From 281c4f3ced7415aa6289ca4ddf922c63e9fb39af Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Fri, 6 Sep 2019 14:45:24 -0700
Subject: [PATCH 01/82] Fix banners in production build.

---
 components/src/style/reset.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/src/style/reset.less b/components/src/style/reset.less
index a08d5dc69..008ca0c8f 100644
--- a/components/src/style/reset.less
+++ b/components/src/style/reset.less
@@ -38,7 +38,6 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   font-size: inherit;
-  vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */

From bc0d56190673dd2b52d4b9d0228cbee183bcc6b6 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 9 Sep 2019 15:07:38 -0700
Subject: [PATCH 02/82] Able to get br search suggestion working

---
 app/src/ep.config.json                        |  32 ++++
 components/src/AppHeader/appheader.main.tsx   |   7 +-
 .../bloomreach.appheadersearch.main.tsx       | 163 ++++++++++++++++++
 .../bloomreach.headersearch.main.less         | 126 ++++++++++++++
 4 files changed, 327 insertions(+), 1 deletion(-)
 create mode 100644 components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
 create mode 100644 components/src/Bloomreach/bloomreach.headersearch.main.less

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index 580a76c39..47079fc21 100644
--- a/app/src/ep.config.json
+++ b/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
   },
diff --git a/components/src/AppHeader/appheader.main.tsx b/components/src/AppHeader/appheader.main.tsx
index 0893b6f6f..09ebd99b9 100644
--- a/components/src/AppHeader/appheader.main.tsx
+++ b/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
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
new file mode 100644
index 000000000..a7cdecafc
--- /dev/null
+++ b/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;
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
new file mode 100644
index 000000000..e2af3e833
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+  
+
+ 
+ 
\ No newline at end of file

From e77d1c02b7cc8b4ab46b5e091651ea87b2270c5d Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 9 Sep 2019 15:15:49 -0700
Subject: [PATCH 03/82] Fix typescript error

---
 .../src/Bloomreach/bloomreach.appheadersearch.main.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index a7cdecafc..550f0fcd5 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -19,7 +19,7 @@
  *
  */
 
-import React from 'react';
+import React, { FormEvent } from 'react';
 import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
 import './bloomreach.headersearch.main.less';
 
@@ -96,7 +96,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       });
   }
 
-  search(event?: Event) {
+  search(event?: FormEvent<HTMLFormElement>) {
     const { onSearchPage } = this.props;
     const { keywords } = this.state;
 
@@ -150,7 +150,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
-        <form className="search-form" onSubmit={this.search}>
+        <form className="search-form" onSubmit={event => this.search(event)}>
           <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()}

From 20b7790b6545fe9ba7ec826a475c4adcbf556456 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 10 Sep 2019 16:38:28 -0700
Subject: [PATCH 04/82] Able to get tabbing and focusing to work correctly

---
 .../bloomreach.appheadersearch.main.tsx       | 97 ++++++++++++-------
 .../bloomreach.headersearch.main.less         | 47 +++++----
 2 files changed, 92 insertions(+), 52 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 550f0fcd5..9b54cbdf5 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -27,54 +27,74 @@ const intl = { get: str => str };
 
 interface BloomreachHeaderSearchMainProps {
     isMobileView: boolean,
-    isFocused?: boolean,
     onSearchPage?: (...args: any[]) => any,
 }
 interface BloomreachHeaderSearchMainState {
     keywords: string,
     suggestions: [],
+    focusedElement?: HTMLElement,
+    liElements?: {},
 }
 
 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: [],
+      focusedElement: null,
+      liElements: {}
     };
     this.searchInput = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.search = this.search.bind(this);
+    this.inputOnFocusOut = this.inputOnFocusOut.bind(this);
+    this.inputOnFocus = this.inputOnFocus.bind(this);
+    this.liOnFocus = this.liOnFocus.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFocused === true) {
-      setTimeout(() => {
-        this.searchInput.current.focus();
-      }, 500);
-    }
+  inputOnFocus(element) {
+    this.setState({focusedElement:element.currentTarget}, () => {
+      const suggestionContainer = document.getElementsByClassName('suggestions');
+
+      // if (suggestionContainer !== undefined && suggestionContainer.length > 0) {
+      //   suggestionContainer[0].setAttribute('style', 'display: list-item;');
+      // }
+    });
+  }
+
+  inputOnFocusOut(event) {
+    // Need to get the element that is focused out...
+    // Only close the suggestion container if the list inside is not selected.
+    
+    // console.log('inputOnFocusOut');
+    // console.log(document.activeElement);
+    // console.log(document.hasFocus());
+    // const suggestionContainer = document.getElementsByClassName('suggestions');
+    // const { focusedElement } = this.state;
+    // console.log('focusedElement', focusedElement);
+    // console.log(focusedElement.DOCUMENT_TYPE_NODE);
+    // console.log(document.querySelector(":focus"));
+    // if (suggestionContainer !== undefined && suggestionContainer.length > 0 && !focusedElement.DOCUMENT_TYPE_NODE) {
+    //   suggestionContainer[0].setAttribute('style', 'display: none;');
+    // }
+  }
+
+  liOnFocusOut(event) {
+    // console.log(document.activeElement);
+  }
+
+  liOnFocus(event) {
+    // console.log('lionfocus running');
+    // this.setState({focusedElement: event.target},()=>{
+    //   console.log();
+    // });
   }
 
   handleChange(event) {
@@ -124,22 +144,29 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   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>
-    ));
+    return suggestions.map(suggestion=> {
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        return (<li className="suggestion-element" tabIndex={0} onFocus={this.liOnFocus} key={suggestion} onMouseDown={() => this.handleSuggestionClicked(suggestion)}>
+          {suggestion}
+        </li>);
+      }
+    );
   }
 
   suggestionsListComponent() {
     const { suggestions } = this.state;
     if (suggestions.length !== 0) {
-      return (
-        <ul className="suggestions">
-          { this.suggestionListHelper() }
-        </ul>
-      );
+      const currentlyFocusedElementClassName = document.activeElement.className;
+      if (currentlyFocusedElementClassName == 'input-search' || currentlyFocusedElementClassName == 'suggestion-element') {
+        console.log('the currently focused element classname');
+        console.log(currentlyFocusedElementClassName);  
+        return (
+          // TODO: Should create a reference to this suggestion here...
+          <ul className="suggestions">
+            { this.suggestionListHelper() }
+          </ul>
+        );  
+      }
     }
 
     return null;
@@ -151,7 +178,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={BloomreachHeaderSearchMain.inputOnFocus} onBlur={BloomreachHeaderSearchMain.inputOnFocusOut} />
+          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index e2af3e833..b3be38d53 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -20,22 +20,6 @@
  */
  @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;
@@ -43,6 +27,19 @@
     .search-form {
       position: relative;
       display: inline-block;
+
+      // If there is a focus within make suggestions display as well...
+      &:focus-within {
+        .input-search {
+          width: 170px;
+          padding-left: 40px;
+          border-bottom: 1px solid #fff;
+          cursor: auto;
+        }
+        .suggestions {
+          display:list-item;
+        }
+      }
   
       .input-search {
         background: transparent;
@@ -64,7 +61,7 @@
           opacity: 0.3;
           color: #fff;
         }
-  
+        // If there is a focus then make suggestions display...
         &:focus {
           width: 170px;
           padding-left: 40px;
@@ -72,6 +69,22 @@
           cursor: auto;
         }
       }
+
+      .suggestions {
+        display: 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;
+        }
+      }
   
       .search-icon {
         background: #ffffff00 url(../../../app/src/images/header-icons/magnifying-glass.svg) no-repeat 9px center;

From 22d80b2b6d285e152bebf2abd44978aea64efaaa Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 10 Sep 2019 16:44:21 -0700
Subject: [PATCH 05/82] Change the suggestion box to be part of the reference
 store theme

---
 .../AppHeaderSearch/appheadersearch.main.less | 184 +++++++++---------
 1 file changed, 92 insertions(+), 92 deletions(-)

diff --git a/components/src/AppHeaderSearch/appheadersearch.main.less b/components/src/AppHeaderSearch/appheadersearch.main.less
index bfd63de1f..be44d1277 100644
--- a/components/src/AppHeaderSearch/appheadersearch.main.less
+++ b/components/src/AppHeaderSearch/appheadersearch.main.less
@@ -1,105 +1,105 @@
-/**
- * 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/
- *
- *
- */
+// /**
+//  * 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 './../../../app/src/theme/common.less';
+// @import './../../../app/src/theme/common.less';
 
-.main-search-container {
-  width: 170px;
-  text-align: right;
+// .main-search-container {
+//   width: 170px;
+//   text-align: right;
 
-  .search-form {
-    position: relative;
-    display: inline-block;
+//   .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;
-      color: @mainNavigationTextColor;
-      cursor: pointer;
-      outline: 0;
-      border: 0;
-      border-bottom: 1px solid transparent;
-      font-weight: 300;
+//     .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;
+//       color: @mainNavigationTextColor;
+//       cursor: pointer;
+//       outline: 0;
+//       border: 0;
+//       border-bottom: 1px solid transparent;
+//       font-weight: 300;
 
-      &::placeholder {
-        opacity: 0.3;
-        color: @mainNavigationTextColor;
-      }
+//       &::placeholder {
+//         opacity: 0.3;
+//         color: @mainNavigationTextColor;
+//       }
 
-      &:focus {
-        width: 170px;
-        padding-left: 40px;
-        border-bottom: 1px solid @mainNavigationTextColor;
-        cursor: auto;
-      }
-    }
+//       &:focus {
+//         width: 170px;
+//         padding-left: 40px;
+//         border-bottom: 1px solid @mainNavigationTextColor;
+//         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: 24px;
-      pointer-events: none;
-    }
-  }
+//     .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: 24px;
+//       pointer-events: none;
+//     }
+//   }
 
-  &.mobile-view {
-    width: 100%;
-    border-bottom: solid 1px #dedede;
+//   &.mobile-view {
+//     width: 100%;
+//     border-bottom: solid 1px #dedede;
 
-    .search-form {
-      display: block;
+//     .search-form {
+//       display: block;
 
-      .input-search {
-        color: #333;
-        background-color: @mainBackgroundColor;
-        width: 100%;
-        transition: none;
-        font-size: 18px;
-        padding: 10px 45px 10px 20px;
-        border-bottom: 0;
+//       .input-search {
+//         color: #333;
+//         background-color: @mainBackgroundColor;
+//         width: 100%;
+//         transition: none;
+//         font-size: 18px;
+//         padding: 10px 45px 10px 20px;
+//         border-bottom: 0;
 
-        &::placeholder {
-          opacity: 0.3;
-          color: #000;
-        }
+//         &::placeholder {
+//           opacity: 0.3;
+//           color: #000;
+//         }
 
-        &:focus {
-          border-bottom: 0;
-        }
-      }
+//         &:focus {
+//           border-bottom: 0;
+//         }
+//       }
 
-      .search-icon {
-        filter: invert(100%);
-        opacity: 0.5;
-        left: auto;
-        right: 10px;
-        top: 12px;
-      }
-    }
-  }
-}
+//       .search-icon {
+//         filter: invert(100%);
+//         opacity: 0.5;
+//         left: auto;
+//         right: 10px;
+//         top: 12px;
+//       }
+//     }
+//   }
+// }

From 80a7ef19a4a0e5bc3c11d9d9fefbf22aca2bddbb Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 10 Sep 2019 16:47:04 -0700
Subject: [PATCH 06/82] make suggestion box adhere to styling

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index b3be38d53..0db89266b 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -78,10 +78,11 @@
         padding-left: 40px;
         width: 170px;
         position: absolute;
-        background-color: rgba(0, 0, 0, .5);
+        background-color: #fff;
+        box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
         .suggestion-element {
           text-align: left;
-          color: white;
+          color: black;
           cursor: pointer;
         }
       }

From e575066f440772ac0081a90ae7bea9933cf08c28 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 10 Sep 2019 17:29:18 -0700
Subject: [PATCH 07/82] Increase the size of the search so that it goes to the
 very end of header

---
 components/src/AppHeader/appheader.main.less      |  1 -
 .../Bloomreach/bloomreach.headersearch.main.less  | 15 ++++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/src/AppHeader/appheader.main.less b/components/src/AppHeader/appheader.main.less
index 32579d9d8..226561c5e 100644
--- a/components/src/AppHeader/appheader.main.less
+++ b/components/src/AppHeader/appheader.main.less
@@ -97,7 +97,6 @@
           line-height: 0;
           font-size: 0;
           background-size: cover;
-          position: relative;
 
           .cart-link-counter {
             right: 0;
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index 0db89266b..ef6312f9a 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -31,7 +31,7 @@
       // If there is a focus within make suggestions display as well...
       &:focus-within {
         .input-search {
-          width: 170px;
+          width: 270px;
           padding-left: 40px;
           border-bottom: 1px solid #fff;
           cursor: auto;
@@ -42,7 +42,8 @@
       }
   
       .input-search {
-        background: transparent;
+        z-index:1;
+        background: @mainColor;
         padding: 2px 0 2px 35px;
         width: 35px;
         transition: width 0.5s ease,
@@ -62,12 +63,6 @@
           color: #fff;
         }
         // If there is a focus then make suggestions display...
-        &:focus {
-          width: 170px;
-          padding-left: 40px;
-          border-bottom: 1px solid #fff;
-          cursor: auto;
-        }
       }
 
       .suggestions {
@@ -75,12 +70,14 @@
         margin-top: 0;
         max-height: 143px;
         overflow-y: auto;
-        padding-left: 40px;
         width: 170px;
         position: absolute;
         background-color: #fff;
         box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
         .suggestion-element {
+          margin:10px;
+          padding-left: 40px;
+          border: 1px solid @mainBorderColor;
           text-align: left;
           color: black;
           cursor: pointer;

From 89a0365e5cf9009c6d5e3d6de5d97405b4cdb1e1 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 10 Sep 2019 17:31:24 -0700
Subject: [PATCH 08/82] Extend the size of the suggestion box

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index ef6312f9a..d309adc01 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -70,14 +70,13 @@
         margin-top: 0;
         max-height: 143px;
         overflow-y: auto;
-        width: 170px;
+        width: 270px;
         position: absolute;
         background-color: #fff;
         box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
         .suggestion-element {
           margin:10px;
           padding-left: 40px;
-          border: 1px solid @mainBorderColor;
           text-align: left;
           color: black;
           cursor: pointer;

From e883812d4ee783eeb4b85166b2d065f2b30c8287 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 10:11:13 -0700
Subject: [PATCH 09/82] get rid of comments

---
 .../src/Bloomreach/bloomreach.appheadersearch.main.tsx      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 9b54cbdf5..8463f4bf6 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -146,7 +146,8 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
     return suggestions.map(suggestion=> {
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        return (<li className="suggestion-element" tabIndex={0} onFocus={this.liOnFocus} key={suggestion} onMouseDown={() => this.handleSuggestionClicked(suggestion)}>
+        // Must figure out how keydown will work properly...
+        return (<li className="suggestion-element" tabIndex={0} onFocus={this.liOnFocus} key={suggestion} onKeyDown={this._handleKeyDown} onMouseDown={() => this.handleSuggestionClicked(suggestion)}>
           {suggestion}
         </li>);
       }
@@ -158,10 +159,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     if (suggestions.length !== 0) {
       const currentlyFocusedElementClassName = document.activeElement.className;
       if (currentlyFocusedElementClassName == 'input-search' || currentlyFocusedElementClassName == 'suggestion-element') {
-        console.log('the currently focused element classname');
-        console.log(currentlyFocusedElementClassName);  
         return (
-          // TODO: Should create a reference to this suggestion here...
           <ul className="suggestions">
             { this.suggestionListHelper() }
           </ul>

From 8f7d40e1ca59767f9627a9603dd36a10d9d15055 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 11:16:03 -0700
Subject: [PATCH 10/82] Able to swap focus from keydown

---
 .../bloomreach.appheadersearch.main.tsx       | 65 ++++++++++++++-----
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 8463f4bf6..de9c2d999 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -31,17 +31,19 @@ interface BloomreachHeaderSearchMainProps {
 }
 interface BloomreachHeaderSearchMainState {
     keywords: string,
-    suggestions: [],
     focusedElement?: HTMLElement,
+    suggestions: [],
     liElements?: {},
 }
 
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
-
+  private suggestionList: HTMLLIElement[];
+  
   static defaultProps = {
     onSearchPage: () => {},
   }
+  
 
   constructor(props) {
     super(props);
@@ -52,21 +54,22 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       liElements: {}
     };
     this.searchInput = React.createRef();
+    this.suggestionList = [];
+    // this.suggestionList = this.suggestionList.bind(this);
+    this.setSuggestionsList = this.setSuggestionsList.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.search = this.search.bind(this);
-    this.inputOnFocusOut = this.inputOnFocusOut.bind(this);
-    this.inputOnFocus = this.inputOnFocus.bind(this);
-    this.liOnFocus = this.liOnFocus.bind(this);
+    this.inputHandleKeyDown = this.inputHandleKeyDown.bind(this);
+    this.liHandleKeyDown = this.liHandleKeyDown.bind(this);
   }
 
-  inputOnFocus(element) {
-    this.setState({focusedElement:element.currentTarget}, () => {
-      const suggestionContainer = document.getElementsByClassName('suggestions');
+  setSuggestionsList(element) {
+    console.log('printing the type of element', element.constructor.name);
+    this.suggestionList.push(element);
+  }
 
-      // if (suggestionContainer !== undefined && suggestionContainer.length > 0) {
-      //   suggestionContainer[0].setAttribute('style', 'display: list-item;');
-      // }
-    });
+  inputOnFocus(element) {
+    // 
   }
 
   inputOnFocusOut(event) {
@@ -141,15 +144,47 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     );
   }
 
+  liHandleKeyDown(e) {
+    // TODO: This function handles changing focus of the list items...
+  
+    // arrow up/down button should select next/previous list element
+    if (e.keyCode === 38) {
+      // this.setState( prevState => ({
+      //   cursor: prevState.cursor - 1
+      // }))
+    } else if (e.keyCode === 40) {
+      // this.setState( prevState => ({
+      //   cursor: prevState.cursor + 1
+      // }))
+    }
+
+    // e.preventDefault();
+  }
+
+  inputHandleKeyDown(e) {
+    if (e.keyCode === 40) {
+      this.suggestionList[0].focus();
+    }
+  }
+
   suggestionListHelper() {
     const { suggestions } = this.state;
 
     return suggestions.map(suggestion=> {
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
         // Must figure out how keydown will work properly...
-        return (<li className="suggestion-element" tabIndex={0} onFocus={this.liOnFocus} key={suggestion} onKeyDown={this._handleKeyDown} onMouseDown={() => this.handleSuggestionClicked(suggestion)}>
+        return (
+        <li className="suggestion-element" 
+            tabIndex={0} 
+            ref={this.setSuggestionsList} 
+            onFocus={this.liOnFocus} 
+            key={suggestion} 
+            onKeyDown={this.liHandleKeyDown} 
+            onMouseDown={() => this.handleSuggestionClicked(suggestion)}
+        >
           {suggestion}
-        </li>);
+        </li>
+        );
       }
     );
   }
@@ -176,7 +211,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} />
+          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} onKeyDown={this.inputHandleKeyDown} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>

From ad47091b01728ab4c0bc2c35d5b563dd94dc942e Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 11:23:07 -0700
Subject: [PATCH 11/82] Able to handle using the arrow keys

---
 .../bloomreach.appheadersearch.main.tsx       | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index de9c2d999..38f15a479 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -39,6 +39,7 @@ interface BloomreachHeaderSearchMainState {
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
   private suggestionList: HTMLLIElement[];
+  private suggestionIndex: number;
   
   static defaultProps = {
     onSearchPage: () => {},
@@ -55,6 +56,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     };
     this.searchInput = React.createRef();
     this.suggestionList = [];
+    this.suggestionIndex = 0;
     // this.suggestionList = this.suggestionList.bind(this);
     this.setSuggestionsList = this.setSuggestionsList.bind(this);
     this.handleChange = this.handleChange.bind(this);
@@ -145,26 +147,22 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   }
 
   liHandleKeyDown(e) {
-    // TODO: This function handles changing focus of the list items...
-  
-    // arrow up/down button should select next/previous list element
     if (e.keyCode === 38) {
-      // this.setState( prevState => ({
-      //   cursor: prevState.cursor - 1
-      // }))
+      this.suggestionIndex = this.suggestionIndex - 1;
+      this.suggestionList[this.suggestionIndex].focus();
     } else if (e.keyCode === 40) {
-      // this.setState( prevState => ({
-      //   cursor: prevState.cursor + 1
-      // }))
+      this.suggestionIndex = this.suggestionIndex + 1;
+      this.suggestionList[this.suggestionIndex].focus();
     }
 
-    // e.preventDefault();
+    e.preventDefault();
   }
 
   inputHandleKeyDown(e) {
     if (e.keyCode === 40) {
       this.suggestionList[0].focus();
     }
+    e.preventDefault();
   }
 
   suggestionListHelper() {
@@ -211,7 +209,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} onKeyDown={this.inputHandleKeyDown} />
+          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} onKeyUp={this.inputHandleKeyDown} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>

From 76473f228209a4f9263006f51d14c7d54a02e091 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 11:27:51 -0700
Subject: [PATCH 12/82] Place the appropriate guards on the arrow key functions

---
 .../bloomreach.appheadersearch.main.tsx           | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 38f15a479..5d5e37ca9 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -148,13 +148,18 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
   liHandleKeyDown(e) {
     if (e.keyCode === 38) {
-      this.suggestionIndex = this.suggestionIndex - 1;
-      this.suggestionList[this.suggestionIndex].focus();
+      if (this.suggestionIndex > 0) {
+        this.suggestionIndex = this.suggestionIndex - 1;
+        this.suggestionList[this.suggestionIndex].focus();
+      } else {
+        this.searchInput.current.focus();
+      }
     } else if (e.keyCode === 40) {
-      this.suggestionIndex = this.suggestionIndex + 1;
-      this.suggestionList[this.suggestionIndex].focus();
+      if (this.suggestionIndex < this.suggestionList.length - 1) {
+        this.suggestionIndex = this.suggestionIndex + 1;
+        this.suggestionList[this.suggestionIndex].focus();
+      }
     }
-
     e.preventDefault();
   }
 

From 215d11c076dfa3bae0046a1e2efa5c36923454d8 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 14:35:06 -0700
Subject: [PATCH 13/82] Fix issue with being unable to arrow down to the
 suggestions once the suggestions had populated once.

---
 .../bloomreach.appheadersearch.main.tsx       | 53 +++++--------------
 1 file changed, 12 insertions(+), 41 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 5d5e37ca9..af3a4d967 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -65,43 +65,10 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     this.liHandleKeyDown = this.liHandleKeyDown.bind(this);
   }
 
-  setSuggestionsList(element) {
-    console.log('printing the type of element', element.constructor.name);
+  setSuggestionsList(element, indexOfSuggestion) {
     this.suggestionList.push(element);
   }
 
-  inputOnFocus(element) {
-    // 
-  }
-
-  inputOnFocusOut(event) {
-    // Need to get the element that is focused out...
-    // Only close the suggestion container if the list inside is not selected.
-    
-    // console.log('inputOnFocusOut');
-    // console.log(document.activeElement);
-    // console.log(document.hasFocus());
-    // const suggestionContainer = document.getElementsByClassName('suggestions');
-    // const { focusedElement } = this.state;
-    // console.log('focusedElement', focusedElement);
-    // console.log(focusedElement.DOCUMENT_TYPE_NODE);
-    // console.log(document.querySelector(":focus"));
-    // if (suggestionContainer !== undefined && suggestionContainer.length > 0 && !focusedElement.DOCUMENT_TYPE_NODE) {
-    //   suggestionContainer[0].setAttribute('style', 'display: none;');
-    // }
-  }
-
-  liOnFocusOut(event) {
-    // console.log(document.activeElement);
-  }
-
-  liOnFocus(event) {
-    // console.log('lionfocus running');
-    // this.setState({focusedElement: event.target},()=>{
-    //   console.log();
-    // });
-  }
-
   handleChange(event) {
     const keywords = event.target.value;
 
@@ -159,12 +126,16 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
         this.suggestionIndex = this.suggestionIndex + 1;
         this.suggestionList[this.suggestionIndex].focus();
       }
+    } else if (e.keyCode === 13) {
+      // TODO: Need to press enter here...
     }
     e.preventDefault();
   }
 
   inputHandleKeyDown(e) {
+    console.log('inputhandlekeydown being clicked');
     if (e.keyCode === 40) {
+      console.log(this.suggestionList);
       this.suggestionList[0].focus();
     }
     e.preventDefault();
@@ -172,15 +143,14 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
   suggestionListHelper() {
     const { suggestions } = this.state;
-
-    return suggestions.map(suggestion=> {
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        // Must figure out how keydown will work properly...
+    this.suggestionList = [];
+    
+    return suggestions.map((suggestion, i)=> {
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions    
         return (
         <li className="suggestion-element" 
             tabIndex={0} 
-            ref={this.setSuggestionsList} 
-            onFocus={this.liOnFocus} 
+            ref={(e)=>this.setSuggestionsList(e, i)} 
             key={suggestion} 
             onKeyDown={this.liHandleKeyDown} 
             onMouseDown={() => this.handleSuggestionClicked(suggestion)}
@@ -195,6 +165,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   suggestionsListComponent() {
     const { suggestions } = this.state;
     if (suggestions.length !== 0) {
+      // TODO: might not need this
       const currentlyFocusedElementClassName = document.activeElement.className;
       if (currentlyFocusedElementClassName == 'input-search' || currentlyFocusedElementClassName == 'suggestion-element') {
         return (
@@ -214,7 +185,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onFocus={this.inputOnFocus} onBlur={this.inputOnFocusOut} onKeyUp={this.inputHandleKeyDown} />
+          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>

From 89b1cc74f82364d8b7721460120f6c62e55c7b12 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 14:35:58 -0700
Subject: [PATCH 14/82] get rid of unecessary if statement

---
 .../Bloomreach/bloomreach.appheadersearch.main.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index af3a4d967..23ae2f81d 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -165,15 +165,11 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   suggestionsListComponent() {
     const { suggestions } = this.state;
     if (suggestions.length !== 0) {
-      // TODO: might not need this
-      const currentlyFocusedElementClassName = document.activeElement.className;
-      if (currentlyFocusedElementClassName == 'input-search' || currentlyFocusedElementClassName == 'suggestion-element') {
-        return (
-          <ul className="suggestions">
-            { this.suggestionListHelper() }
-          </ul>
-        );  
-      }
+      return (
+        <ul className="suggestions">
+          { this.suggestionListHelper() }
+        </ul>
+      );
     }
 
     return null;

From 09b5b3c42dfb139792a5df4691e60af27e7407fc Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 14:55:30 -0700
Subject: [PATCH 15/82] Able to fix issue with the suggestionlistelemeent not
 being navigable once suggestionlistelement had already been populated

---
 .../bloomreach.appheadersearch.main.tsx       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 23ae2f81d..b85101593 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -38,7 +38,7 @@ interface BloomreachHeaderSearchMainState {
 
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
-  private suggestionList: HTMLLIElement[];
+  private suggestionListElements: HTMLLIElement[];
   private suggestionIndex: number;
   
   static defaultProps = {
@@ -55,9 +55,8 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       liElements: {}
     };
     this.searchInput = React.createRef();
-    this.suggestionList = [];
+    this.suggestionListElements = [];
     this.suggestionIndex = 0;
-    // this.suggestionList = this.suggestionList.bind(this);
     this.setSuggestionsList = this.setSuggestionsList.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.search = this.search.bind(this);
@@ -65,8 +64,8 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     this.liHandleKeyDown = this.liHandleKeyDown.bind(this);
   }
 
-  setSuggestionsList(element, indexOfSuggestion) {
-    this.suggestionList.push(element);
+  setSuggestionsList(element, indexOfSuggestion: number) {
+    this.suggestionListElements[indexOfSuggestion] = element;
   }
 
   handleChange(event) {
@@ -115,19 +114,20 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
   liHandleKeyDown(e) {
     if (e.keyCode === 38) {
-      if (this.suggestionIndex > 0) {
+      if (this.suggestionIndex > 0 && this.suggestionListElements[this.suggestionIndex - 1]) {
         this.suggestionIndex = this.suggestionIndex - 1;
-        this.suggestionList[this.suggestionIndex].focus();
+        this.suggestionListElements[this.suggestionIndex].focus();
       } else {
         this.searchInput.current.focus();
       }
     } else if (e.keyCode === 40) {
-      if (this.suggestionIndex < this.suggestionList.length - 1) {
+      if (this.suggestionIndex < this.suggestionListElements.length - 1 && this.suggestionListElements[this.suggestionIndex + 1]) {
         this.suggestionIndex = this.suggestionIndex + 1;
-        this.suggestionList[this.suggestionIndex].focus();
+        this.suggestionListElements[this.suggestionIndex].focus();
       }
     } else if (e.keyCode === 13) {
       // TODO: Need to press enter here...
+      // Check the active element and actually go to the history... or look at how input does it...
     }
     e.preventDefault();
   }
@@ -135,15 +135,15 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   inputHandleKeyDown(e) {
     console.log('inputhandlekeydown being clicked');
     if (e.keyCode === 40) {
-      console.log(this.suggestionList);
-      this.suggestionList[0].focus();
+      console.log(this.suggestionListElements);
+      this.suggestionListElements[0].focus();
     }
     e.preventDefault();
   }
 
   suggestionListHelper() {
     const { suggestions } = this.state;
-    this.suggestionList = [];
+    this.suggestionListElements = [];
     
     return suggestions.map((suggestion, i)=> {
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions    

From 8cdfac6ad8b31a98cf625d2746327ab8c2fed086 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:17:16 -0700
Subject: [PATCH 16/82] add the ability to press enter on a list item

---
 .../bloomreach.appheadersearch.main.tsx           | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index b85101593..2e92d7d8f 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -87,15 +87,18 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       });
   }
 
-  search(event?: FormEvent<HTMLFormElement>) {
+  search(event?: FormEvent<HTMLFormElement>, listElementKeyword?: string) {
     const { onSearchPage } = this.props;
     const { keywords } = this.state;
 
-    if (keywords !== '') {
+    if (listElementKeyword) {
+      document.querySelector('.collapsable-container').classList.remove('show');
+      onSearchPage(listElementKeyword);
+    } else if (keywords !== '') {
       document.querySelector('.collapsable-container').classList.remove('show');
       onSearchPage(keywords);
     }
-
+    
     this.searchInput.current.value = '';
     if (event != null) {
       event.preventDefault();
@@ -126,8 +129,8 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
         this.suggestionListElements[this.suggestionIndex].focus();
       }
     } else if (e.keyCode === 13) {
-      // TODO: Need to press enter here...
-      // Check the active element and actually go to the history... or look at how input does it...
+      const { suggestions } = this.state;
+      this.search(e, suggestions[this.suggestionIndex]);
     }
     e.preventDefault();
   }
@@ -181,7 +184,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
+          <input tabIndex={0} className="input-search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>

From 995765f136a8e877e68c63ca60904dc2eb0ebca7 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:46:06 -0700
Subject: [PATCH 17/82] Add bloomreach connector files

---
 components/src/utils/Bloomreach.js            |  37 +++++
 .../src/utils/BloomreachSearchService.js      | 141 ++++++++++++++++++
 2 files changed, 178 insertions(+)
 create mode 100644 components/src/utils/Bloomreach.js
 create mode 100644 components/src/utils/BloomreachSearchService.js

diff --git a/components/src/utils/Bloomreach.js b/components/src/utils/Bloomreach.js
new file mode 100644
index 000000000..ef2e66ed8
--- /dev/null
+++ b/components/src/utils/Bloomreach.js
@@ -0,0 +1,37 @@
+/**
+ * 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/
+ *
+ *
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export function bloomreachFetch(input, requestInit) {
+  return fetch(input, requestInit)
+    .then((res) => {
+      if (res.status >= 500) {
+        if (window.location.href.indexOf('/maintenance') === -1) {
+          window.location.pathname = '/maintenance';
+        }
+      }
+      return res;
+    })
+    .catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error(error.message);
+    });
+}
diff --git a/components/src/utils/BloomreachSearchService.js b/components/src/utils/BloomreachSearchService.js
new file mode 100644
index 000000000..be9da6b5f
--- /dev/null
+++ b/components/src/utils/BloomreachSearchService.js
@@ -0,0 +1,141 @@
+/**
+ * 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 { bloomreachFetch } from './Bloomreach';
+import { searchLookup } from './CortexLookup';
+
+import { getConfig } from './ConfigProvider';
+
+function generateBaseBloomreachUrl(baseUri = getConfig().bloomreachSearch.config.baseUri) {
+  const {
+    accountId,
+    authKey,
+    domainKey,
+    requestId,
+    brUID2,
+    url,
+    refurl,
+  } = getConfig().config.bloomreachSearch.config;
+  return `${baseUri}${accountId}&${authKey}&${domainKey}&${requestId}&${brUID2}&${url}&${refurl}`;
+}
+
+export function bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams) {
+  const baseUrl = generateBaseBloomreachUrl();
+  const {
+    requestType,
+    rows,
+    start,
+    facetLimit,
+    fl,
+    searchType,
+  } = getConfig().bloomreachSearch.config.keywordSearchConfig;
+  const q = `q=${searchKeyword.keywords}`;
+
+  const fq = searchQueryParams ? `${searchQueryParams}`.replace('?', '') : null;
+  const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${q}&${fq}&${searchType}`;
+
+  return new Promise(((resolve, reject) => {
+    bloomreachFetch(searchUrl, {})
+      .then((res) => {
+        if (res.status >= 500) {
+          reject(res);
+        }
+        return res;
+      })
+      .then(res => res.json())
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+        reject(error);
+      });
+  }));
+}
+
+// TODO: We need the suggestion search here...
+export function bloomreachSuggestionSearch(keyword) {
+  console.log(getConfig());
+  const {
+    baseUri,
+    requestType,
+  } = getConfig().config.bloomreachSearch.config.suggestionConfig;
+
+  const baseUrl = generateBaseBloomreachUrl(baseUri);
+  const q = `q=${keyword}`;
+  const searchUrl = `${baseUrl}&${requestType}&${q}`;
+
+  return new Promise(((resolve, reject) => {
+    bloomreachFetch(searchUrl, {})
+      .then((res) => {
+        if (res.status >= 500) {
+          reject(res);
+        }
+        return res;
+      })
+      .then(res => res.json())
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+        reject(error);
+      });
+  }));
+}
+
+export function bloomreachMtlSearch(sku) {
+  const baseUrl = generateBaseBloomreachUrl();
+  const {
+    requestType,
+    rows,
+    start,
+    facetLimit,
+    fl,
+  } = getConfig().bloomreachSearch.config.productRecommendationConfig;
+
+  return new Promise(((resolve, reject) => {
+    searchLookup(sku).then((searchRes) => {
+      const productIDCode = searchRes._element[0]._code[0].code;
+      const pid = `pid=${productIDCode}`;
+      const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${pid}`;
+
+      bloomreachFetch(searchUrl, {})
+        .then((res) => {
+          if (res.status >= 500) {
+            reject(res);
+          }
+          return res;
+        })
+        .then(res => res.json())
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+        // eslint-disable-next-line no-console
+          console.error(error.message);
+          reject(error);
+        });
+    });
+  }));
+}

From bbe1182dc631314a434cc0e2fd652018017c0ef8 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:53:26 -0700
Subject: [PATCH 18/82] Change the input type back to search

---
 components/src/Bloomreach/bloomreach.appheadersearch.main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 2e92d7d8f..e6416270a 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -184,7 +184,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
+          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
           <div className="search-icon" />
           {this.suggestionsListComponent()}
         </form>

From 49e0cef16c622083a4cd367b46751f77cb649879 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:55:12 -0700
Subject: [PATCH 19/82] Change the height so that list elements line up
 properly

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index d309adc01..fb47e9fad 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -68,7 +68,7 @@
       .suggestions {
         display: none;
         margin-top: 0;
-        max-height: 143px;
+        max-height: 149px;
         overflow-y: auto;
         width: 270px;
         position: absolute;

From c68638b078174e0a34e7228fc369f438fecee1ef Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:55:47 -0700
Subject: [PATCH 20/82] get rid of unecessary comments

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index fb47e9fad..86dbabb05 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -27,8 +27,7 @@
     .search-form {
       position: relative;
       display: inline-block;
-
-      // If there is a focus within make suggestions display as well...
+      
       &:focus-within {
         .input-search {
           width: 270px;

From c6b91323198f7cefd9738cb6880da41ee4d3d28f Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 15:56:11 -0700
Subject: [PATCH 21/82] get rid of more comments here

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index 86dbabb05..26b9a90ef 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -61,7 +61,6 @@
           opacity: 0.3;
           color: #fff;
         }
-        // If there is a focus then make suggestions display...
       }
 
       .suggestions {

From 9c186c3c548fec59f795530c3f5af42eca2c9d09 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 16:00:13 -0700
Subject: [PATCH 22/82] get rid of console.logs and change styling a bit

---
 components/src/Bloomreach/bloomreach.appheadersearch.main.tsx | 2 --
 components/src/Bloomreach/bloomreach.headersearch.main.less   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index e6416270a..d0c3b9259 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -136,9 +136,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   }
 
   inputHandleKeyDown(e) {
-    console.log('inputhandlekeydown being clicked');
     if (e.keyCode === 40) {
-      console.log(this.suggestionListElements);
       this.suggestionListElements[0].focus();
     }
     e.preventDefault();
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index 26b9a90ef..5ee6d2595 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -74,7 +74,7 @@
         box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
         .suggestion-element {
           margin:10px;
-          padding-left: 40px;
+          padding-left: 30px;
           text-align: left;
           color: black;
           cursor: pointer;

From 452297d9f91a55ffb49c5bffae079f9abc2af1cb Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 16:35:21 -0700
Subject: [PATCH 23/82] Able to fix some linter errors but also rename the
 clashing search bar classes.

---
 .../AppHeaderSearch/appheadersearch.main.less | 184 +++++++++---------
 .../bloomreach.appheadersearch.main.tsx       |  41 ++--
 .../bloomreach.headersearch.main.less         |  18 +-
 3 files changed, 118 insertions(+), 125 deletions(-)

diff --git a/components/src/AppHeaderSearch/appheadersearch.main.less b/components/src/AppHeaderSearch/appheadersearch.main.less
index be44d1277..bfd63de1f 100644
--- a/components/src/AppHeaderSearch/appheadersearch.main.less
+++ b/components/src/AppHeaderSearch/appheadersearch.main.less
@@ -1,105 +1,105 @@
-// /**
-//  * 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/
-//  *
-//  *
-//  */
+/**
+ * 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 './../../../app/src/theme/common.less';
+@import './../../../app/src/theme/common.less';
 
-// .main-search-container {
-//   width: 170px;
-//   text-align: right;
+.main-search-container {
+  width: 170px;
+  text-align: right;
 
-//   .search-form {
-//     position: relative;
-//     display: inline-block;
+  .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;
-//       color: @mainNavigationTextColor;
-//       cursor: pointer;
-//       outline: 0;
-//       border: 0;
-//       border-bottom: 1px solid transparent;
-//       font-weight: 300;
+    .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;
+      color: @mainNavigationTextColor;
+      cursor: pointer;
+      outline: 0;
+      border: 0;
+      border-bottom: 1px solid transparent;
+      font-weight: 300;
 
-//       &::placeholder {
-//         opacity: 0.3;
-//         color: @mainNavigationTextColor;
-//       }
+      &::placeholder {
+        opacity: 0.3;
+        color: @mainNavigationTextColor;
+      }
 
-//       &:focus {
-//         width: 170px;
-//         padding-left: 40px;
-//         border-bottom: 1px solid @mainNavigationTextColor;
-//         cursor: auto;
-//       }
-//     }
+      &:focus {
+        width: 170px;
+        padding-left: 40px;
+        border-bottom: 1px solid @mainNavigationTextColor;
+        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: 24px;
-//       pointer-events: none;
-//     }
-//   }
+    .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: 24px;
+      pointer-events: none;
+    }
+  }
 
-//   &.mobile-view {
-//     width: 100%;
-//     border-bottom: solid 1px #dedede;
+  &.mobile-view {
+    width: 100%;
+    border-bottom: solid 1px #dedede;
 
-//     .search-form {
-//       display: block;
+    .search-form {
+      display: block;
 
-//       .input-search {
-//         color: #333;
-//         background-color: @mainBackgroundColor;
-//         width: 100%;
-//         transition: none;
-//         font-size: 18px;
-//         padding: 10px 45px 10px 20px;
-//         border-bottom: 0;
+      .input-search {
+        color: #333;
+        background-color: @mainBackgroundColor;
+        width: 100%;
+        transition: none;
+        font-size: 18px;
+        padding: 10px 45px 10px 20px;
+        border-bottom: 0;
 
-//         &::placeholder {
-//           opacity: 0.3;
-//           color: #000;
-//         }
+        &::placeholder {
+          opacity: 0.3;
+          color: #000;
+        }
 
-//         &:focus {
-//           border-bottom: 0;
-//         }
-//       }
+        &:focus {
+          border-bottom: 0;
+        }
+      }
 
-//       .search-icon {
-//         filter: invert(100%);
-//         opacity: 0.5;
-//         left: auto;
-//         right: 10px;
-//         top: 12px;
-//       }
-//     }
-//   }
-// }
+      .search-icon {
+        filter: invert(100%);
+        opacity: 0.5;
+        left: auto;
+        right: 10px;
+        top: 12px;
+      }
+    }
+  }
+}
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index d0c3b9259..9ca9b4961 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -31,28 +31,25 @@ interface BloomreachHeaderSearchMainProps {
 }
 interface BloomreachHeaderSearchMainState {
     keywords: string,
-    focusedElement?: HTMLElement,
     suggestions: [],
-    liElements?: {},
 }
 
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
+
   private suggestionListElements: HTMLLIElement[];
+
   private suggestionIndex: number;
-  
+
   static defaultProps = {
     onSearchPage: () => {},
   }
-  
 
   constructor(props) {
     super(props);
     this.state = {
       keywords: '',
       suggestions: [],
-      focusedElement: null,
-      liElements: {}
     };
     this.searchInput = React.createRef();
     this.suggestionListElements = [];
@@ -98,7 +95,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       document.querySelector('.collapsable-container').classList.remove('show');
       onSearchPage(keywords);
     }
-    
+
     this.searchInput.current.value = '';
     if (event != null) {
       event.preventDefault();
@@ -145,22 +142,18 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   suggestionListHelper() {
     const { suggestions } = this.state;
     this.suggestionListElements = [];
-    
-    return suggestions.map((suggestion, i)=> {
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions    
-        return (
-        <li className="suggestion-element" 
-            tabIndex={0} 
-            ref={(e)=>this.setSuggestionsList(e, i)} 
-            key={suggestion} 
-            onKeyDown={this.liHandleKeyDown} 
-            onMouseDown={() => this.handleSuggestionClicked(suggestion)}
+
+    return suggestions.map((suggestion, i) => (
+      <li className="suggestion-element" 
+          tabIndex={0} 
+          ref={(e)=>this.setSuggestionsList(e, i)} 
+          key={suggestion} 
+          onKeyDown={this.liHandleKeyDown} 
+          onMouseDown={() => this.handleSuggestionClicked(suggestion)}
         >
           {suggestion}
         </li>
-        );
-      }
-    );
+        ));
   }
 
   suggestionsListComponent() {
@@ -180,10 +173,10 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     const { isMobileView } = this.props;
 
     return (
-      <div className={`main-search-container ${isMobileView ? 'mobile-view' : ''}`}>
-        <form className="search-form" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
-          <div className="search-icon" />
+      <div className={`main-search-container-br ${isMobileView ? 'mobile-view' : ''}`}>
+        <form className="search-form-br" onSubmit={event => this.search(event)}>
+          <input tabIndex={0} className="input-search-br" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
+          <div className="search-icon-br" />
           {this.suggestionsListComponent()}
         </form>
       </div>
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index 5ee6d2595..e5594d762 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -20,16 +20,16 @@
  */
  @import './../../../app/src/theme/common.less';
  
-  .main-search-container {
+  .main-search-container-br {
     width: 170px;
     text-align: right;
   
-    .search-form {
+    .search-form-br {
       position: relative;
       display: inline-block;
       
       &:focus-within {
-        .input-search {
+        .input-search-br {
           width: 270px;
           padding-left: 40px;
           border-bottom: 1px solid #fff;
@@ -40,7 +40,7 @@
         }
       }
   
-      .input-search {
+      .input-search-br {
         z-index:1;
         background: @mainColor;
         padding: 2px 0 2px 35px;
@@ -81,7 +81,7 @@
         }
       }
   
-      .search-icon {
+      .search-icon-br {
         background: #ffffff00 url(../../../app/src/images/header-icons/magnifying-glass.svg) no-repeat 9px center;
         position: absolute;
         left: 0px;
@@ -91,15 +91,15 @@
         pointer-events: none;
       }
     }
-  
+
     &.mobile-view {
       width: 100%;
       border-bottom: solid 1px #dedede;
   
-      .search-form {
+      .search-form-br {
         display: block;
   
-        .input-search {
+        .input-search-br {
           color: #333;
           background-color: #fff;
           width: 100%;
@@ -118,7 +118,7 @@
           }
         }
   
-        .search-icon {
+        .search-icon-br {
           filter: invert(100%);
           opacity: 0.5;
           left: auto;

From 73266278b20cb5edc4033575db43b3117971e79b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 16:43:30 -0700
Subject: [PATCH 24/82] Change the way mouse down event is handled

---
 .../Bloomreach/bloomreach.appheadersearch.main.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index 9ca9b4961..bb2856cb9 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -84,7 +84,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       });
   }
 
-  search(event?: FormEvent<HTMLFormElement>, listElementKeyword?: string) {
+  search(event?: Event, listElementKeyword?: string) {
     const { onSearchPage } = this.props;
     const { keywords } = this.state;
 
@@ -102,16 +102,6 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     }
   }
 
-  handleSuggestionClicked(suggestion) {
-    this.setState(
-      {
-        keywords: suggestion,
-        suggestions: [],
-      },
-      this.search,
-    );
-  }
-
   liHandleKeyDown(e) {
     if (e.keyCode === 38) {
       if (this.suggestionIndex > 0 && this.suggestionListElements[this.suggestionIndex - 1]) {
@@ -149,7 +139,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
           ref={(e)=>this.setSuggestionsList(e, i)} 
           key={suggestion} 
           onKeyDown={this.liHandleKeyDown} 
-          onMouseDown={() => this.handleSuggestionClicked(suggestion)}
+          onMouseDown={(e) => this.search(e, suggestion)}
         >
           {suggestion}
         </li>

From 6ff6316b0f609c10cb17171e338b7096082d7f36 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 17:00:21 -0700
Subject: [PATCH 25/82] fix linter errors

---
 .../bloomreach.appheadersearch.main.tsx       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index bb2856cb9..d4abd1d38 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -134,16 +134,19 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     this.suggestionListElements = [];
 
     return suggestions.map((suggestion, i) => (
-      <li className="suggestion-element" 
-          tabIndex={0} 
-          ref={(e)=>this.setSuggestionsList(e, i)} 
-          key={suggestion} 
-          onKeyDown={this.liHandleKeyDown} 
-          onMouseDown={(e) => this.search(e, suggestion)}
-        >
-          {suggestion}
-        </li>
-        ));
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <li
+        className="suggestion-element"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        ref={(e) => { this.setSuggestionsList(e, i); }}
+        key={suggestion}
+        onKeyDown={this.liHandleKeyDown}
+        onMouseDown={(e) => { this.search(e, suggestion); }}
+      >
+        {suggestion}
+      </li>
+    ));
   }
 
   suggestionsListComponent() {

From b551ef0de6b906ff0fd69274472e449e31b30d97 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 17:48:45 -0700
Subject: [PATCH 26/82] use es6 default imports and get rid of linter disable
 line

---
 components/src/utils/Bloomreach.js              | 6 ++----
 components/src/utils/BloomreachSearchService.js | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/src/utils/Bloomreach.js b/components/src/utils/Bloomreach.js
index ef2e66ed8..264839fa9 100644
--- a/components/src/utils/Bloomreach.js
+++ b/components/src/utils/Bloomreach.js
@@ -1,5 +1,5 @@
 /**
- * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ * 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
@@ -18,9 +18,7 @@
  *
  *
  */
-
-// eslint-disable-next-line import/prefer-default-export
-export function bloomreachFetch(input, requestInit) {
+export default function bloomreachFetch(input, requestInit) {
   return fetch(input, requestInit)
     .then((res) => {
       if (res.status >= 500) {
diff --git a/components/src/utils/BloomreachSearchService.js b/components/src/utils/BloomreachSearchService.js
index be9da6b5f..759084252 100644
--- a/components/src/utils/BloomreachSearchService.js
+++ b/components/src/utils/BloomreachSearchService.js
@@ -19,7 +19,7 @@
  *
  */
 
-import { bloomreachFetch } from './Bloomreach';
+import bloomreachFetch from './Bloomreach';
 import { searchLookup } from './CortexLookup';
 
 import { getConfig } from './ConfigProvider';

From d5739fadfc2186dd0f51c669a80261e29f808260 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 17:49:12 -0700
Subject: [PATCH 27/82] delete console.log line

---
 components/src/utils/BloomreachSearchService.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/src/utils/BloomreachSearchService.js b/components/src/utils/BloomreachSearchService.js
index 759084252..115458449 100644
--- a/components/src/utils/BloomreachSearchService.js
+++ b/components/src/utils/BloomreachSearchService.js
@@ -74,7 +74,6 @@ export function bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams)
 
 // TODO: We need the suggestion search here...
 export function bloomreachSuggestionSearch(keyword) {
-  console.log(getConfig());
   const {
     baseUri,
     requestType,

From 58adce5ad07e773f2f7ccb2347918dcb9bd13db1 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 17:55:13 -0700
Subject: [PATCH 28/82] Correct typing errors

---
 components/src/Bloomreach/bloomreach.appheadersearch.main.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index d4abd1d38..a26a1004e 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -19,7 +19,7 @@
  *
  */
 
-import React, { FormEvent } from 'react';
+import React, { FormEvent, SyntheticEvent } from 'react';
 import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
 import './bloomreach.headersearch.main.less';
 
@@ -84,7 +84,7 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
       });
   }
 
-  search(event?: Event, listElementKeyword?: string) {
+  search(event?: SyntheticEvent, listElementKeyword?: string) {
     const { onSearchPage } = this.props;
     const { keywords } = this.state;
 

From 0c47d571f22c02d7d9aa8f617fd009049f89ef09 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 17:59:17 -0700
Subject: [PATCH 29/82] delete unused functions for now

---
 .../src/utils/BloomreachSearchService.js      | 75 +------------------
 1 file changed, 2 insertions(+), 73 deletions(-)

diff --git a/components/src/utils/BloomreachSearchService.js b/components/src/utils/BloomreachSearchService.js
index 115458449..f9e78a6f6 100644
--- a/components/src/utils/BloomreachSearchService.js
+++ b/components/src/utils/BloomreachSearchService.js
@@ -37,42 +37,7 @@ function generateBaseBloomreachUrl(baseUri = getConfig().bloomreachSearch.config
   return `${baseUri}${accountId}&${authKey}&${domainKey}&${requestId}&${brUID2}&${url}&${refurl}`;
 }
 
-export function bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams) {
-  const baseUrl = generateBaseBloomreachUrl();
-  const {
-    requestType,
-    rows,
-    start,
-    facetLimit,
-    fl,
-    searchType,
-  } = getConfig().bloomreachSearch.config.keywordSearchConfig;
-  const q = `q=${searchKeyword.keywords}`;
-
-  const fq = searchQueryParams ? `${searchQueryParams}`.replace('?', '') : null;
-  const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${q}&${fq}&${searchType}`;
-
-  return new Promise(((resolve, reject) => {
-    bloomreachFetch(searchUrl, {})
-      .then((res) => {
-        if (res.status >= 500) {
-          reject(res);
-        }
-        return res;
-      })
-      .then(res => res.json())
-      .then((res) => {
-        resolve(res);
-      })
-      .catch((error) => {
-        // eslint-disable-next-line no-console
-        console.error(error.message);
-        reject(error);
-      });
-  }));
-}
-
-// TODO: We need the suggestion search here...
+// eslint-disable-next-line import/prefer-default-export
 export function bloomreachSuggestionSearch(keyword) {
   const {
     baseUri,
@@ -101,40 +66,4 @@ export function bloomreachSuggestionSearch(keyword) {
         reject(error);
       });
   }));
-}
-
-export function bloomreachMtlSearch(sku) {
-  const baseUrl = generateBaseBloomreachUrl();
-  const {
-    requestType,
-    rows,
-    start,
-    facetLimit,
-    fl,
-  } = getConfig().bloomreachSearch.config.productRecommendationConfig;
-
-  return new Promise(((resolve, reject) => {
-    searchLookup(sku).then((searchRes) => {
-      const productIDCode = searchRes._element[0]._code[0].code;
-      const pid = `pid=${productIDCode}`;
-      const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${pid}`;
-
-      bloomreachFetch(searchUrl, {})
-        .then((res) => {
-          if (res.status >= 500) {
-            reject(res);
-          }
-          return res;
-        })
-        .then(res => res.json())
-        .then((res) => {
-          resolve(res);
-        })
-        .catch((error) => {
-        // eslint-disable-next-line no-console
-          console.error(error.message);
-          reject(error);
-        });
-    });
-  }));
-}
+}
\ No newline at end of file

From 4304c7656dda2704c8d8ed54b1ae640b27506c46 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 11 Sep 2019 18:08:40 -0700
Subject: [PATCH 30/82] on default turn off br search suggestions

---
 app/src/ep.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index 47079fc21..4be53f45a 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -95,7 +95,7 @@
     "applicationId": "<APP_ID>"
   },
   "bloomreachSearch": {
-    "enable": true,
+    "enable": false,
     "config": {
       "baseUri": "http://core.dxpapi.com/api/v1/core/?",
       "accountId": "account_id=6226",

From 04050c63722378dbd41039515ea49cc8f293c532 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 16 Sep 2019 14:26:27 -0700
Subject: [PATCH 31/82] Change bloomreach server interfacing functions to be
 typescript

---
 components/src/utils/{Bloomreach.js => Bloomreach.ts}         | 2 +-
 ...{BloomreachSearchService.js => BloomreachSearchService.ts} | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename components/src/utils/{Bloomreach.js => Bloomreach.ts} (94%)
 rename components/src/utils/{BloomreachSearchService.js => BloomreachSearchService.ts} (94%)

diff --git a/components/src/utils/Bloomreach.js b/components/src/utils/Bloomreach.ts
similarity index 94%
rename from components/src/utils/Bloomreach.js
rename to components/src/utils/Bloomreach.ts
index 264839fa9..3775b1e82 100644
--- a/components/src/utils/Bloomreach.js
+++ b/components/src/utils/Bloomreach.ts
@@ -18,7 +18,7 @@
  *
  *
  */
-export default function bloomreachFetch(input, requestInit) {
+export default function bloomreachFetch(input, requestInit): any {
   return fetch(input, requestInit)
     .then((res) => {
       if (res.status >= 500) {
diff --git a/components/src/utils/BloomreachSearchService.js b/components/src/utils/BloomreachSearchService.ts
similarity index 94%
rename from components/src/utils/BloomreachSearchService.js
rename to components/src/utils/BloomreachSearchService.ts
index f9e78a6f6..048abdacc 100644
--- a/components/src/utils/BloomreachSearchService.js
+++ b/components/src/utils/BloomreachSearchService.ts
@@ -24,7 +24,7 @@ import { searchLookup } from './CortexLookup';
 
 import { getConfig } from './ConfigProvider';
 
-function generateBaseBloomreachUrl(baseUri = getConfig().bloomreachSearch.config.baseUri) {
+function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch.config.baseUri) {
   const {
     accountId,
     authKey,
@@ -66,4 +66,4 @@ export function bloomreachSuggestionSearch(keyword) {
         reject(error);
       });
   }));
-}
\ No newline at end of file
+}

From 995c80111c48e3c5ec2a129eb4c746b832455e6b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 16 Sep 2019 16:06:26 -0700
Subject: [PATCH 32/82] Change search suggestion request to use async await
 pattern in place of promises

---
 .../bloomreach.appheadersearch.main.tsx       | 64 +++++++++++++------
 .../src/utils/BloomreachSearchService.ts      |  2 +-
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index a26a1004e..d629b00e1 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -31,9 +31,33 @@ interface BloomreachHeaderSearchMainProps {
 }
 interface BloomreachHeaderSearchMainState {
     keywords: string,
-    suggestions: [],
+    suggestions: string[],
 }
 
+interface BloomreachSearchSuggestionResponse {
+  responseHeader: {
+    status: number;
+    QTime: number;
+  }
+  response: {
+    q: string;
+    suggestions: [{
+      q: string;
+      dq: string;
+    }];
+    numFound: number;
+    products: [{
+      url: string;
+      sale_price: number;
+      pid: string;
+      thumb_image: string;
+      title: string;
+    }];
+  };
+}
+
+
+
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
 
@@ -65,23 +89,15 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     this.suggestionListElements[indexOfSuggestion] = element;
   }
 
-  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);
-      });
+  async handleChange(event) {
+    const keywords: string = event.target.value;
+    
+    const res: BloomreachSearchSuggestionResponse = await bloomreachSuggestionSearch(keywords);
+
+    const brSuggestions = res.response.suggestions;
+    const suggestions: string[] = brSuggestions ? brSuggestions.map(suggestion => suggestion.dq) : [];
+    
+    this.setState({keywords, suggestions});
   }
 
   search(event?: SyntheticEvent, listElementKeyword?: string) {
@@ -168,7 +184,17 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container-br ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form-br" onSubmit={event => this.search(event)}>
-          <input tabIndex={0} className="input-search-br" type="search" onChange={this.handleChange} placeholder={intl.get('search')} ref={this.searchInput} onKeyUp={this.inputHandleKeyDown} />
+          <input 
+            tabIndex={0} 
+            className="input-search-br" 
+            type="search" 
+            onChange={
+              this.handleChange
+            }
+            placeholder={intl.get('search')} 
+            ref={this.searchInput} 
+            onKeyUp={this.inputHandleKeyDown} 
+          />
           <div className="search-icon-br" />
           {this.suggestionsListComponent()}
         </form>
diff --git a/components/src/utils/BloomreachSearchService.ts b/components/src/utils/BloomreachSearchService.ts
index 048abdacc..aed13bf3e 100644
--- a/components/src/utils/BloomreachSearchService.ts
+++ b/components/src/utils/BloomreachSearchService.ts
@@ -38,7 +38,7 @@ function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch
 }
 
 // eslint-disable-next-line import/prefer-default-export
-export function bloomreachSuggestionSearch(keyword) {
+export function bloomreachSuggestionSearch<T>(keyword): Promise<T> {
   const {
     baseUri,
     requestType,

From 870b171026237921fc5bef2b8f4a59d968fa5281 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 16 Sep 2019 16:25:54 -0700
Subject: [PATCH 33/82] Fix all linter errors

---
 .../bloomreach.appheadersearch.main.tsx       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index d629b00e1..a4cb1f7a9 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -48,16 +48,16 @@ interface BloomreachSearchSuggestionResponse {
     numFound: number;
     products: [{
       url: string;
+      // eslint-disable-next-line
       sale_price: number;
       pid: string;
+      // eslint-disable-next-line
       thumb_image: string;
       title: string;
     }];
   };
 }
 
-
-
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
 
@@ -91,13 +91,13 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
   async handleChange(event) {
     const keywords: string = event.target.value;
-    
+
     const res: BloomreachSearchSuggestionResponse = await bloomreachSuggestionSearch(keywords);
 
     const brSuggestions = res.response.suggestions;
     const suggestions: string[] = brSuggestions ? brSuggestions.map(suggestion => suggestion.dq) : [];
-    
-    this.setState({keywords, suggestions});
+
+    this.setState({ keywords, suggestions });
   }
 
   search(event?: SyntheticEvent, listElementKeyword?: string) {
@@ -184,16 +184,16 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     return (
       <div className={`main-search-container-br ${isMobileView ? 'mobile-view' : ''}`}>
         <form className="search-form-br" onSubmit={event => this.search(event)}>
-          <input 
-            tabIndex={0} 
-            className="input-search-br" 
-            type="search" 
+          <input
+            tabIndex={0}
+            className="input-search-br"
+            type="search"
             onChange={
               this.handleChange
             }
-            placeholder={intl.get('search')} 
-            ref={this.searchInput} 
-            onKeyUp={this.inputHandleKeyDown} 
+            placeholder={intl.get('search')}
+            ref={this.searchInput}
+            onKeyUp={this.inputHandleKeyDown}
           />
           <div className="search-icon-br" />
           {this.suggestionsListComponent()}

From ed18c0639d5e8c3c9eae5572b638f84d56d30a45 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 17 Sep 2019 11:06:09 -0700
Subject: [PATCH 34/82] Change width to 275px to avoid having buttons
 underneath showing in firefox

---
 components/src/Bloomreach/bloomreach.headersearch.main.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index e5594d762..f0eecf691 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -30,7 +30,7 @@
       
       &:focus-within {
         .input-search-br {
-          width: 270px;
+          width: 275px;
           padding-left: 40px;
           border-bottom: 1px solid #fff;
           cursor: auto;
@@ -68,7 +68,7 @@
         margin-top: 0;
         max-height: 149px;
         overflow-y: auto;
-        width: 270px;
+        width: 275px;
         position: absolute;
         background-color: #fff;
         box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);

From 2e8c8726383572e2c5e7c31c852f811956e57408 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 17 Sep 2019 11:42:23 -0700
Subject: [PATCH 35/82] Get rid of unused br configs

---
 app/src/ep.config.json | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index 4be53f45a..0713b1137 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -105,24 +105,9 @@
       "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"
       }
     }
   },

From 247c0869a9044da14d8e5c6dd1575dafaa491272 Mon Sep 17 00:00:00 2001
From: aChanEP <Alvin.chan@elasticpath.com>
Date: Tue, 17 Sep 2019 20:17:07 -0700
Subject: [PATCH 36/82] Feature/bloomreach integration search suggestion
 responsive (#416)

* Replace componentWillRecieveProps with componentDidUpdate and make it so that bloomreach search automatically focuses in mobile view

* Fix styling for search to be responsive

* touch up the suggestion window in mobile mode

* Provide some visual feedback

* Adjust styling and interactions

* Fix linter

* Fix suggestion navigation with tabs

* Fix scrolling on mobile

* fix linter errors

* use q for search and dq for suggestion display with br data return.

* Remove need to suggestionListIndex variable and fix issue with tabbing navigation not being registered.

* Add storybook file (#417)

* Add storybook file

* Update to components

* add new line
---
 components/package-lock.json                  |  2 +-
 components/src/AppHeader/appheader.main.tsx   |  6 +-
 .../AppHeaderSearch/appheadersearch.main.tsx  |  6 +-
 ...loomreach.appheadersearch.main.stories.tsx | 38 +++++++++++
 .../bloomreach.appheadersearch.main.tsx       | 67 +++++++++++++------
 .../bloomreach.headersearch.main.less         | 34 +++++++++-
 6 files changed, 128 insertions(+), 25 deletions(-)
 create mode 100644 components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx

diff --git a/components/package-lock.json b/components/package-lock.json
index 5fc297f51..1bf00bb9a 100644
--- a/components/package-lock.json
+++ b/components/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@elasticpath/store-components",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/components/src/AppHeader/appheader.main.tsx b/components/src/AppHeader/appheader.main.tsx
index 09ebd99b9..94cbc0c48 100644
--- a/components/src/AppHeader/appheader.main.tsx
+++ b/components/src/AppHeader/appheader.main.tsx
@@ -333,7 +333,11 @@ class AppHeaderMain extends React.Component<AppHeaderMainProps, AppHeaderMainSta
 
         <div className="collapsable-container collapse collapsed">
           <div className="search-container">
-            <AppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />
+            {Config.bloomreachSearch.enable ? (
+              <BloomreachAppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />
+            ) : (
+              <AppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />
+            )}
           </div>
           <div className="mobile-locale-container">
             <AppHeaderLocaleMain isMobileView onCurrencyChange={onCurrencyChange} onLocaleChange={onLocaleChange} />
diff --git a/components/src/AppHeaderSearch/appheadersearch.main.tsx b/components/src/AppHeaderSearch/appheadersearch.main.tsx
index 728c1f6c8..f6c52ea13 100644
--- a/components/src/AppHeaderSearch/appheadersearch.main.tsx
+++ b/components/src/AppHeaderSearch/appheadersearch.main.tsx
@@ -54,8 +54,10 @@ class AppHeaderSearchMain extends React.Component<AppHeaderSearchMainProps, AppH
     this.search = this.search.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isFocused === true) {
+  componentDidUpdate(prevProps) {
+    const { isFocused } = this.props;
+
+    if (isFocused === true) {
       setTimeout(() => {
         this.searchInput.current.focus();
       }, 500);
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx
new file mode 100644
index 000000000..1c236ca64
--- /dev/null
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { MemoryRouter } from 'react-router';
+
+import BloomreachAppHeaderSearchMain from './bloomreach.appheadersearch.main';
+
+storiesOf('BloomreachAppHeaderSearchMain', module)
+  .add('BloomreachAppHeaderSearchMain', () => (
+    <div style={{ backgroundColor: '#040060' }}>
+      <MemoryRouter initialEntries={['/']}><BloomreachAppHeaderSearchMain isMobileView={false} isFocused /></MemoryRouter>
+    </div>
+  ))
+  .add('BloomreachAppHeaderSearchMain Mobile View', () => (
+    <div style={{ backgroundColor: '#040060' }}>
+      <MemoryRouter initialEntries={['/']}><BloomreachAppHeaderSearchMain isMobileView={true} isFocused /></MemoryRouter>
+    </div>
+  ));
+  
\ No newline at end of file
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
index a4cb1f7a9..9f44b698f 100644
--- a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
+++ b/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
@@ -27,11 +27,18 @@ const intl = { get: str => str };
 
 interface BloomreachHeaderSearchMainProps {
     isMobileView: boolean,
+    isFocused: boolean,
     onSearchPage?: (...args: any[]) => any,
 }
+
+interface BloomreachSuggestion {
+  q: string,
+  dq: string,
+}
+
 interface BloomreachHeaderSearchMainState {
     keywords: string,
-    suggestions: string[],
+    suggestions: BloomreachSuggestion[],
 }
 
 interface BloomreachSearchSuggestionResponse {
@@ -41,10 +48,7 @@ interface BloomreachSearchSuggestionResponse {
   }
   response: {
     q: string;
-    suggestions: [{
-      q: string;
-      dq: string;
-    }];
+    suggestions: BloomreachSuggestion[];
     numFound: number;
     products: [{
       url: string;
@@ -63,10 +67,11 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
   private suggestionListElements: HTMLLIElement[];
 
-  private suggestionIndex: number;
+  private isTouchMoveEvent: boolean;
 
   static defaultProps = {
     onSearchPage: () => {},
+    isFocused: false,
   }
 
   constructor(props) {
@@ -77,12 +82,23 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     };
     this.searchInput = React.createRef();
     this.suggestionListElements = [];
-    this.suggestionIndex = 0;
+    this.isTouchMoveEvent = false;
     this.setSuggestionsList = this.setSuggestionsList.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.search = this.search.bind(this);
     this.inputHandleKeyDown = this.inputHandleKeyDown.bind(this);
     this.liHandleKeyDown = this.liHandleKeyDown.bind(this);
+    this.handleOnTouchEndOnSuggestionLiElement = this.handleOnTouchEndOnSuggestionLiElement.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isFocused } = this.props;
+
+    if (isFocused === true) {
+      setTimeout(() => {
+        this.searchInput.current.focus();
+      }, 500);
+    }
   }
 
   setSuggestionsList(element, indexOfSuggestion: number) {
@@ -94,8 +110,8 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
 
     const res: BloomreachSearchSuggestionResponse = await bloomreachSuggestionSearch(keywords);
 
-    const brSuggestions = res.response.suggestions;
-    const suggestions: string[] = brSuggestions ? brSuggestions.map(suggestion => suggestion.dq) : [];
+    let { suggestions }: { suggestions: BloomreachSuggestion[]} = res.response;
+    suggestions = (suggestions === undefined) ? [] : suggestions;
 
     this.setState({ keywords, suggestions });
   }
@@ -119,23 +135,24 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
   }
 
   liHandleKeyDown(e) {
+    const currentSuggestionListIndex: number = parseInt(e.currentTarget.getAttribute('data-list-index'), 10);
+
     if (e.keyCode === 38) {
-      if (this.suggestionIndex > 0 && this.suggestionListElements[this.suggestionIndex - 1]) {
-        this.suggestionIndex = this.suggestionIndex - 1;
-        this.suggestionListElements[this.suggestionIndex].focus();
+      if (currentSuggestionListIndex > 0 && this.suggestionListElements[currentSuggestionListIndex - 1]) {
+        this.suggestionListElements[currentSuggestionListIndex - 1].focus();
       } else {
         this.searchInput.current.focus();
       }
+      e.preventDefault();
     } else if (e.keyCode === 40) {
-      if (this.suggestionIndex < this.suggestionListElements.length - 1 && this.suggestionListElements[this.suggestionIndex + 1]) {
-        this.suggestionIndex = this.suggestionIndex + 1;
-        this.suggestionListElements[this.suggestionIndex].focus();
+      if (currentSuggestionListIndex < this.suggestionListElements.length - 1 && this.suggestionListElements[currentSuggestionListIndex + 1]) {
+        this.suggestionListElements[currentSuggestionListIndex + 1].focus();
+        e.preventDefault();
       }
     } else if (e.keyCode === 13) {
       const { suggestions } = this.state;
-      this.search(e, suggestions[this.suggestionIndex]);
+      this.search(e, suggestions[currentSuggestionListIndex].q);
     }
-    e.preventDefault();
   }
 
   inputHandleKeyDown(e) {
@@ -145,6 +162,13 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
     e.preventDefault();
   }
 
+  handleOnTouchEndOnSuggestionLiElement(e, suggestion) {
+    if (this.isTouchMoveEvent === false) {
+      this.search(e, suggestion);
+    }
+    this.isTouchMoveEvent = false;
+  }
+
   suggestionListHelper() {
     const { suggestions } = this.state;
     this.suggestionListElements = [];
@@ -156,11 +180,14 @@ class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchM
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
         ref={(e) => { this.setSuggestionsList(e, i); }}
-        key={suggestion}
+        key={suggestion.dq}
+        data-list-index={i}
         onKeyDown={this.liHandleKeyDown}
-        onMouseDown={(e) => { this.search(e, suggestion); }}
+        onMouseUp={(e) => { this.search(e, suggestion.q); }}
+        onTouchEnd={(e) => { this.handleOnTouchEndOnSuggestionLiElement(e, suggestion.q); }}
+        onTouchMove={(e) => { this.isTouchMoveEvent = true; }}
       >
-        {suggestion}
+        {suggestion.dq}
       </li>
     ));
   }
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/Bloomreach/bloomreach.headersearch.main.less
index f0eecf691..dbac7a075 100644
--- a/components/src/Bloomreach/bloomreach.headersearch.main.less
+++ b/components/src/Bloomreach/bloomreach.headersearch.main.less
@@ -98,7 +98,13 @@
   
       .search-form-br {
         display: block;
-  
+        
+        &:focus-within {
+          .suggestions {
+            display:list-item;
+          }
+        }
+        
         .input-search-br {
           color: #333;
           background-color: #fff;
@@ -117,6 +123,32 @@
             border-bottom: 0;
           }
         }
+
+        .suggestions {
+          z-index: 1;
+          display: none;
+          margin-top: 0;
+          overflow-y: auto;
+          width: 100%;
+          position: relative;
+          background-color: #fff;
+          border-top: 1px solid @firstBorderColor;
+          box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
+          max-height: 100%;
+          .suggestion-element {
+            margin: 1;
+            padding-left:0;
+            padding-top:15px;
+            padding-bottom:15px;
+            text-align: center;
+            color: @mainTextColor;
+            font-size: 18px;
+            cursor: pointer;
+            &:active {
+              background-color: @firstComplimentBackground
+            }
+          }
+        }
   
         .search-icon-br {
           filter: invert(100%);

From 7efeb44beeb825aef67207a46119c8254dca3407 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 10:23:32 -0700
Subject: [PATCH 37/82] Move over files from bloomreach search results

---
 app/src/ep.config.json                                    | 8 ++++++++
 .../bloomreach.appheadersearch.main.stories.tsx           | 0
 .../bloomreach.appheadersearch.main.tsx                   | 0
 .../bloomreach.headersearch.main.less                     | 0
 .../bloomreach.searchresultsitems.main.less               | 0
 .../bloomreach.searchresultsitems.main.tsx                | 0
 6 files changed, 8 insertions(+)
 rename components/src/{Bloomreach => BloomreachAppHeaderSearch}/bloomreach.appheadersearch.main.stories.tsx (100%)
 rename components/src/{Bloomreach => BloomreachAppHeaderSearch}/bloomreach.appheadersearch.main.tsx (100%)
 rename components/src/{Bloomreach => BloomreachAppHeaderSearch}/bloomreach.headersearch.main.less (100%)
 create mode 100644 components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.less
 create mode 100644 components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index b175c99fd..a569bcb58 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -109,6 +109,14 @@
       "suggestionConfig": {
         "baseUri": "http://suggest.dxpapi.com/api/v1/suggest/?",
         "requestType": "request_type=suggest"
+      },
+      "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"
       }
     }
   },
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.stories.tsx
similarity index 100%
rename from components/src/Bloomreach/bloomreach.appheadersearch.main.stories.tsx
rename to components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.stories.tsx
diff --git a/components/src/Bloomreach/bloomreach.appheadersearch.main.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
similarity index 100%
rename from components/src/Bloomreach/bloomreach.appheadersearch.main.tsx
rename to components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
diff --git a/components/src/Bloomreach/bloomreach.headersearch.main.less b/components/src/BloomreachAppHeaderSearch/bloomreach.headersearch.main.less
similarity index 100%
rename from components/src/Bloomreach/bloomreach.headersearch.main.less
rename to components/src/BloomreachAppHeaderSearch/bloomreach.headersearch.main.less
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.less b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
new file mode 100644
index 000000000..e69de29bb

From 57f8f3e3a5a603ddb1228247ec9764f9f12228f3 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 11:13:25 -0700
Subject: [PATCH 38/82] include config

---
 app/src/containers/SearchResultsPage.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/src/containers/SearchResultsPage.tsx b/app/src/containers/SearchResultsPage.tsx
index 0b7e067e6..da0ea586d 100644
--- a/app/src/containers/SearchResultsPage.tsx
+++ b/app/src/containers/SearchResultsPage.tsx
@@ -22,6 +22,7 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { SearchResultsItemsMain } from '@elasticpath/store-components';
+import Config from '../ep.config.json';
 
 function SearchResultsPage(props: RouteComponentProps) {
   function handleProductFacetSelection(offerSearch, title) {
@@ -40,6 +41,10 @@ function SearchResultsPage(props: RouteComponentProps) {
     productCategory: '/category',
   };
 
+  if (Config.bloomreachSearch.enable) {
+    
+  }
+
   return (
     <div>
       {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}

From 2f127bd0571ae5669c9b3a3fc6e8d5a3833c202f Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 12:28:20 -0700
Subject: [PATCH 39/82] Adding bloomreach search results page and exporting all
 bloomreach changes thus far

---
 app/src/containers/SearchResultsPage.tsx      |  11 +-
 components/src/AppHeader/appheader.main.tsx   |   2 +-
 .../bloomreach.searchresultsitems.main.tsx    | 159 ++++++++++++++++++
 components/src/index.ts                       |   4 +
 .../src/utils/BloomreachSearchService.ts      |  36 ++++
 5 files changed, 208 insertions(+), 4 deletions(-)

diff --git a/app/src/containers/SearchResultsPage.tsx b/app/src/containers/SearchResultsPage.tsx
index da0ea586d..a821fd707 100644
--- a/app/src/containers/SearchResultsPage.tsx
+++ b/app/src/containers/SearchResultsPage.tsx
@@ -21,7 +21,7 @@
 
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { SearchResultsItemsMain } from '@elasticpath/store-components';
+import { SearchResultsItemsMain, BloomreachSearchResultsItems } from '@elasticpath/store-components';
 import Config from '../ep.config.json';
 
 function SearchResultsPage(props: RouteComponentProps) {
@@ -42,9 +42,14 @@ function SearchResultsPage(props: RouteComponentProps) {
   };
 
   if (Config.bloomreachSearch.enable) {
-    
+    return (
+    <div>
+      {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
+      <BloomreachSearchResultsItems searchKeywordsProps={props} onProductFacetSelection={handleProductFacetSelection} productLinks={productLinks} />
+    </div>
+    );
   }
-
+  
   return (
     <div>
       {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
diff --git a/components/src/AppHeader/appheader.main.tsx b/components/src/AppHeader/appheader.main.tsx
index 94cbc0c48..d1c519219 100644
--- a/components/src/AppHeader/appheader.main.tsx
+++ b/components/src/AppHeader/appheader.main.tsx
@@ -22,7 +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 BloomreachAppHeaderSearchMain from '../BloomreachAppHeaderSearch/bloomreach.appheadersearch.main';
 import AppHeaderLoginMain from '../AppHeaderLogin/appheaderlogin.main';
 import AppHeaderLocaleMain from '../AppHeaderLocale/appheaderlocale.main';
 import AppHeaderNavigationMain from '../AppHeaderNavigation/appheadernavigation.main';
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index e69de29bb..3218735f3 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -0,0 +1,159 @@
+/**
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+// import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
+// import BloomreachProductListMain from './bloomreach.productlist.main';
+// import BloomreachSearchFacetNavigationMain from './bloomreach.searchfacetnavigation.main';
+
+// import '../searchresultsitems.main.less';
+
+import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+
+let Config: IEpConfig | any = {};
+
+
+
+interface BloomreachSearchResultsItemsMainProps {
+    searchKeywordsProps: {
+      [key: string]: any
+    },
+    onProductFacetSelection?: (...args: any[]) => any,
+    productLinks?: {
+      [key: string]: string
+    }
+  }
+  
+interface BloomreachSearchResultsItemsMainState {
+    isLoading: boolean,
+    searchResultsModel: {
+      [key: string]: any
+    },
+    loadSortedProduct: boolean,
+    searchKeywords: any
+}
+
+class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchResultsItemsMainProps, BloomreachSearchResultsItemsMainState> {
+
+  constructor(props) {
+    super(props);
+    const { searchKeywordsProps } = this.props;
+    const epConfig = getConfig();
+    Config = epConfig.config;
+    this.state = {
+      isLoading: true,
+      searchResultsModel: {},
+      loadSortedProduct: false,
+      searchKeywords: searchKeywordsProps,
+    };
+  }
+
+  componentDidMount() {
+    const { searchKeywordsProps } = this.props;
+    this.getSearchData(searchKeywordsProps);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { searchKeywordsProps } = nextProps;
+    this.getSearchData(searchKeywordsProps);
+  }
+
+  getSearchData(searchKeywordsProps) {
+    this.setState({
+      isLoading: true,
+      searchKeywords: searchKeywordsProps,
+    });
+
+    const searchKeyword = searchKeywordsProps.match.params;
+    const searchQueryParams = searchKeywordsProps.location.search;
+
+    // bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams)
+    //   .then((res) => {
+    //     this.setState({
+    //       isLoading: false,
+    //       searchResultsModel: res,
+    //       searchKeywords: searchKeyword,
+    //       searchQueryParams,
+    //     });
+    //   })
+    //   .catch((error) => {
+    //     // eslint-disable-next-line no-console
+    //     console.error(error.message);
+    //   });
+  }
+
+  render() {
+    const {
+      isLoading,
+      searchResultsModel,
+      searchKeywords,
+    } = this.state;
+    const products = searchResultsModel.response ? searchResultsModel.response.docs : [];
+    const facets = searchResultsModel.facet_counts ? searchResultsModel.facet_counts.facet_fields : searchResultsModel;
+    const categoryMap = searchResultsModel.category_map;
+    const propCompareButton = false;
+
+    console.log('rendering bloomreach search results items');
+
+    return (
+      <div className="category-items-container container-3">
+        <div data-region="categoryTitleRegion">
+          {
+            ((typeof searchKeywords === 'object' || searchKeywords instanceof Object) || ((typeof searchKeywords === 'string' || searchKeywords instanceof String) && searchKeywords.includes('/') && searchKeywords.includes(Config.cortexApi.scope))) ? (
+              <h1 className="view-title">
+                {intl.get('search-results')}
+              </h1>
+            ) : (
+              <h1 className="view-title">
+                {intl.get('search-results-for', { searchKeywords })}
+              </h1>
+            )}
+          {(() => {
+            if (isLoading) {
+              return (<div className="loader" />);
+            }
+
+            if (products.length === 0) {
+              return (
+                <h3>
+                  {intl.get('no-products-found')}
+                </h3>
+              );
+            }
+
+            return (
+              <div>
+                {/* <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} currentFacets={searchQueryParams} categoryMap={categoryMap} /> */}
+                <div className="products-container">
+                  {/* <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} /> */}
+                </div>
+              </div>
+            );
+          })()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BloomreachSearchResultsItemsMain;
diff --git a/components/src/index.ts b/components/src/index.ts
index 43c4a98a7..05d5c122e 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -75,6 +75,8 @@ import SortProductMenuMain from './SortProductMenu/sortproductmenu.main';
 import WishListMain from './WishList/wishlist.main';
 import ChatComponent from './ChatBot/chatbot';
 import BarcodeScanner from './BarcodeScanner/barcodescanner';
+import BloomreachAppHeaderSearchMain from './BloomreachAppHeaderSearch/bloomreach.appheadersearch.main';
+import BloomreachSearchResultsItems from './BloomreachSearchResultsItems/bloomreach.searchresultsitems.main';
 
 export {
   init,
@@ -133,4 +135,6 @@ export {
   WishListMain,
   ChatComponent,
   BarcodeScanner,
+  BloomreachAppHeaderSearchMain,
+  BloomreachSearchResultsItems,
 };
diff --git a/components/src/utils/BloomreachSearchService.ts b/components/src/utils/BloomreachSearchService.ts
index aed13bf3e..f079afe7e 100644
--- a/components/src/utils/BloomreachSearchService.ts
+++ b/components/src/utils/BloomreachSearchService.ts
@@ -37,6 +37,42 @@ function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch
   return `${baseUri}${accountId}&${authKey}&${domainKey}&${requestId}&${brUID2}&${url}&${refurl}`;
 }
 
+// TODO: Will have to use generic types here.
+export function bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams) {
+  const baseUrl = generateBaseBloomreachUrl();
+  const {
+    requestType,
+    rows,
+    start,
+    facetLimit,
+    fl,
+    searchType,
+  } = getConfig().config.bloomreachSearch.config.keywordSearchConfig;
+  const q = `q=${searchKeyword.keywords}`;
+
+  const fq = searchQueryParams ? `${searchQueryParams}`.replace('?', '') : null;
+  const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${q}&${fq}&${searchType}`;
+
+  return new Promise(((resolve, reject) => {
+    bloomreachFetch(searchUrl, {})
+      .then((res) => {
+        if (res.status >= 500) {
+          reject(res);
+        }
+        return res;
+      })
+      .then(res => res.json())
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error(error.message);
+        reject(error);
+      });
+  }));
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export function bloomreachSuggestionSearch<T>(keyword): Promise<T> {
   const {

From 15beef176ba18d0ac8ac3355169317c6e1eca984 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 13:49:32 -0700
Subject: [PATCH 40/82] Able to get the facets to show up on the searchresults
 page

---
 ...bloomreach.searchfacetnavigation.main.less |   0
 .../bloomreach.searchfacetnavigation.main.tsx | 325 ++++++++++++++++++
 .../bloomreach.searchresultsitems.main.tsx    | 109 ++++--
 .../src/utils/BloomreachSearchService.ts      |   2 +-
 4 files changed, 413 insertions(+), 23 deletions(-)
 create mode 100644 components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
 create mode 100644 components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
new file mode 100644
index 000000000..ee1d6b416
--- /dev/null
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -0,0 +1,325 @@
+/**
+ * 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 React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+
+import './bloomreach.searchfacetnavigation.main.less';
+
+interface BloomreachSearchFacetNavigationMainProps {
+    productData: any,
+    titleString: any,
+    categoryMap: any,
+    currentFacets: any,
+    history: any,
+}
+
+interface BloomreachSearchResultsNavigationMainState {
+    facetModel: any,
+    currentFacets: any,
+    categoryMap: any,
+}
+
+class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSearchFacetNavigationMainProps, BloomreachSearchResultsNavigationMainState> {
+
+  static removeSelectedFacet(facetUriStr, facetKey, facetName) {
+    const splitFilters = facetUriStr.split('-');
+    const facetUriStrElement = `${facetKey}:"${facetName}"`;
+    const removeFacetSelection = splitFilters.filter((element) => {
+      if (element === facetUriStrElement) {
+        return false;
+      }
+      return true;
+    });
+
+    return removeFacetSelection.join('-');
+  }
+
+  static turnQueryParamsIntoTree(queryParams) {
+    // Ex. ?fq=colors:"black"OR"red"&fq=category:"cat250"
+    // Ex. ['colors: "black"', 'category: "cat250"']
+    // Ex {colors: ["black"], category: "cat250"}
+    // TODO: Make this one large regex expression.
+    if (queryParams) {
+        let filteredQueryParams = queryParams.replace('?', '');
+        filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
+        filteredQueryParams = filteredQueryParams.split('fq=');
+        filteredQueryParams = filteredQueryParams.map(params => params.replace('&', ''));
+
+        const filteredQueryParamsTree = filteredQueryParams.reduce((acc, outerFacetStr) => {
+        if (outerFacetStr) {
+            const outerFacetArray = outerFacetStr.split(':');
+            const category = outerFacetArray[0];
+            const loFacets = outerFacetArray[1].split('OR');
+
+            loFacets.forEach((innerFacet) => {
+            if (acc[category] == null) {
+                acc[category] = [innerFacet];
+            } else {
+                acc[category].push(innerFacet);
+            }
+            });
+        }
+
+        return acc;
+        }, {});
+
+        return filteredQueryParamsTree;
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    const { productData, currentFacets, categoryMap } = this.props;
+
+    this.state = {
+      facetModel: productData,
+      currentFacets: BloomreachSearchFacetNavigationMain.turnQueryParamsIntoTree(currentFacets),
+      categoryMap,
+    };
+    this.handleFacetSelection = this.handleFacetSelection.bind(this);
+  }
+
+  removeFacetFromQueryParamsTree(facetKey, facetName) {
+    const { currentFacets } = this.state;
+    const filteredCurrentFacets = currentFacets[facetKey].filter((facet) => {
+      if (facet.includes(facetName)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    if (filteredCurrentFacets.length === 0) {
+      delete currentFacets[facetKey];
+    } else {
+      currentFacets[facetKey] = filteredCurrentFacets;
+    }
+
+    this.setState({
+      currentFacets,
+    });
+  }
+
+  addFacetFromQueryParamsTree(facetKey, facetName) {
+    const { currentFacets } = this.state;
+
+    if (currentFacets[facetKey] == null) {
+      currentFacets[facetKey] = [facetName];
+    } else {
+      currentFacets[facetKey].push(facetName);
+    }
+
+    this.setState({
+      currentFacets,
+    });
+  }
+
+  reconstructTreeIntoQueryParamsString() {
+    const { currentFacets } = this.state;
+    const paramArray = [];
+    Object.keys(currentFacets).forEach(
+      (facetCategory) => {
+        let facetStr = `fq=${facetCategory}:`;
+        currentFacets[facetCategory].forEach((innerFacet) => {
+          if (facetStr.charAt(facetStr.length - 1) === ':') {
+            facetStr = `${facetStr}"${innerFacet}"`;
+          } else {
+            facetStr = `${facetStr}OR"${innerFacet}"`;
+          }
+        });
+        paramArray.push(facetStr);
+      },
+    );
+    const queryParams = paramArray.join('&');
+    return queryParams ? `?${queryParams}` : '';
+  }
+
+  handleFacetSelection(facetKey, facetId) {
+    const { history, titleString } = this.props;
+    const { keywords } = titleString;
+
+    if (this.hasFacetBeenSelected(facetKey, facetId)) {
+      this.removeFacetFromQueryParamsTree(facetKey, facetId);
+    } else {
+      this.addFacetFromQueryParamsTree(facetKey, facetId);
+    }
+
+    const facets = this.reconstructTreeIntoQueryParamsString();
+
+    history.push(`/search/${keywords}${facets}`);
+  }
+
+  hasFacetBeenSelected(facetKey, facetName) {
+    const { currentFacets } = this.state;
+    
+    if (currentFacets) {
+        if (currentFacets[facetKey]) {
+            return currentFacets[facetKey].some((facet) => {
+              if (facet.includes(facetName)) {
+                return true;
+              }
+              return false;
+            });
+          }
+    }
+
+    return false;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  findAllParentCategories(categoryMap) {
+    const parentCategories = {};
+    Object.keys(categoryMap).forEach((categoryKey) => {
+      const l = categoryKey.length;
+      const lastTwoDigits = categoryKey.substring(l - 3, l - 1);
+      if (lastTwoDigits === '00') {
+        parentCategories[categoryKey] = categoryMap[categoryKey];
+      }
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isCategoryCodeParent(categoryCode) {
+    const l = categoryCode.length;
+    const lastTwoDigits = categoryCode.substring(l - 2, l);
+    if (lastTwoDigits === '00') {
+      return true;
+    }
+    return false;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  findParent(facetselector, choice) {
+    const { categoryMap } = this.state;
+    // const parentCategories = this.findAllParentCategories(categoryMap);
+    const id = choice.cat_id;
+    const choicePrefix = id.substring(0, id.length - 2);
+    const choiceSelector = `${choicePrefix}00`;
+
+    const parent = categoryMap[choiceSelector];
+    return parent;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  generateFacetName(facetKey, name, choice) {
+    const { categoryMap } = this.state;
+
+    if (choice.crumb) {
+      const crumbs = choice.crumb.split('/');
+      const crumbNames = crumbs.map((categoryCode) => {
+        if (categoryCode) {
+          return categoryMap[categoryCode];
+        }
+        return '';
+      });
+
+      const filteredCrumbNames = crumbNames.filter((currentName) => {
+        if (currentName) {
+          return true;
+        }
+        return false;
+      });
+      return filteredCrumbNames.join(' : ');
+    }
+
+    return name;
+  }
+
+  renderFacetSelectors(facetKey, facetselector) {
+    // this.funcName = 'renderFacetSelectors';
+
+    if (facetselector) {
+      return facetselector.map((choice) => {
+        if (choice) {
+          const name = choice.name ? choice.name : choice.cat_name;
+          const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
+          if (!this.hasFacetBeenSelected(facetKey, id)) {
+            return (
+              <div className="list-group-item facet-value" key={id}>
+                <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
+                  {`${this.generateFacetName(facetKey, name, choice)}`}
+                </button>
+              </div>
+            );
+          }
+          return (
+            <div className="list-group-item facet-value" key={id}>
+              <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
+                {`${this.generateFacetName(facetKey, name, choice)}`}
+              </button>
+            </div>
+          );
+        }
+        return null;
+      });
+    }
+    return null;
+  }
+
+  renderFacets() {
+    const { facetModel } = this.state;
+    return Object.keys(facetModel).map((facetKey) => {
+      if (facetKey && facetModel[facetKey].length > 0) {
+        const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');
+        const facetCategoryChildren = facetModel[facetKey];
+        return (
+          <div className="card" key={facetKey} id={`${facetDisplayNameId}_facet`}>
+            <div className="card-header">
+              <h4 className="card-title">
+                <a className="facet" data-toggle="collapse" href={`#${facetDisplayNameId}_facet_values`}>
+                  <span className="glyphicon glyphicon-tag" />
+                  {facetKey}
+                </a>
+              </h4>
+            </div>
+            <div id={`${facetDisplayNameId}_facet_values`} className="collapse navbar-collapse in">
+              <ul className="list-group list-group-flush">
+                {this.renderFacetSelectors(facetKey, facetCategoryChildren)}
+              </ul>
+            </div>
+          </div>
+        );
+      }
+      return null;
+    });
+  }
+
+  render() {
+    const { facetModel } = this.state;
+    if (facetModel) {
+      return (
+        <div className="product-list-facet-navigation-component">
+          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+            <div className="card-stack" id="accordion">
+              {this.renderFacets()}
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return ('');
+  }
+}
+
+export default withRouter(BloomreachSearchFacetNavigationMain);
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index 3218735f3..1262ee2cd 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -22,9 +22,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-// import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
+import { bloomreachKeywordSearchLookup } from '../utils/BloomreachSearchService';
 // import BloomreachProductListMain from './bloomreach.productlist.main';
-// import BloomreachSearchFacetNavigationMain from './bloomreach.searchfacetnavigation.main';
+import BloomreachSearchFacetNavigationMain from '../BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main';
 
 // import '../searchresultsitems.main.less';
 
@@ -32,8 +32,6 @@ import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 
 let Config: IEpConfig | any = {};
 
-
-
 interface BloomreachSearchResultsItemsMainProps {
     searchKeywordsProps: {
       [key: string]: any
@@ -50,7 +48,81 @@ interface BloomreachSearchResultsItemsMainState {
       [key: string]: any
     },
     loadSortedProduct: boolean,
-    searchKeywords: any
+    searchKeywords: any,
+    searchQueryParams: any,
+}
+
+interface BloomreachKeywordSearchLookupResponse {
+    response:     Response;
+    facet_counts: FacetCounts;
+    category_map: CategoryMap;
+    did_you_mean: any[];
+}
+
+interface CategoryMap {
+    VESTRI_BM_APPAREL:   string;
+    VESTRI_APPAREL_MENS: string;
+}
+
+interface FacetCounts {
+    facet_ranges:  Facet;
+    facet_fields:  FacetFields;
+    facet_queries: Facet;
+}
+
+interface FacetFields {
+    category:     Category[];
+    sizes:        AgeGroup[];
+    brand:        any[];
+    colors:       AgeGroup[];
+    color_groups: any[];
+    color:        AgeGroup[];
+    gender:       AgeGroup[];
+    material:     AgeGroup[];
+    apparel_type: AgeGroup[];
+    age_group:    AgeGroup[];
+}
+
+interface AgeGroup {
+    count: number;
+    name:  string;
+}
+
+interface Category {
+    count:     number;
+    crumb:     string;
+    cat_name:  string;
+    parent:    string;
+    cat_id:    string;
+    tree_path: string;
+}
+
+interface Facet {
+}
+
+interface Response {
+    numFound: number;
+    start:    number;
+    docs:     Doc[];
+}
+
+interface Doc {
+    sale_price:       number;
+    price:            number;
+    description:      string;
+    title:            string;
+    url:              string;
+    brand:            string;
+    pid:              string;
+    thumb_image:      string;
+    sale_price_range: number[];
+    price_range:      number[];
+    variants:         Variant[];
+}
+
+interface Variant {
+    sku_swatch_images: string[];
+    sku_thumb_images:  string[];
 }
 
 class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchResultsItemsMainProps, BloomreachSearchResultsItemsMainState> {
@@ -65,6 +137,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
       searchResultsModel: {},
       loadSortedProduct: false,
       searchKeywords: searchKeywordsProps,
+      searchQueryParams: null,
     };
   }
 
@@ -78,7 +151,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     this.getSearchData(searchKeywordsProps);
   }
 
-  getSearchData(searchKeywordsProps) {
+  async getSearchData(searchKeywordsProps) {
     this.setState({
       isLoading: true,
       searchKeywords: searchKeywordsProps,
@@ -86,20 +159,14 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
 
     const searchKeyword = searchKeywordsProps.match.params;
     const searchQueryParams = searchKeywordsProps.location.search;
+    
+    const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams);
 
-    // bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams)
-    //   .then((res) => {
-    //     this.setState({
-    //       isLoading: false,
-    //       searchResultsModel: res,
-    //       searchKeywords: searchKeyword,
-    //       searchQueryParams,
-    //     });
-    //   })
-    //   .catch((error) => {
-    //     // eslint-disable-next-line no-console
-    //     console.error(error.message);
-    //   });
+    this.setState({
+        isLoading: false,
+        searchResultsModel: res,
+        searchKeywords: searchKeyword,
+    });
   }
 
   render() {
@@ -113,8 +180,6 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     const categoryMap = searchResultsModel.category_map;
     const propCompareButton = false;
 
-    console.log('rendering bloomreach search results items');
-
     return (
       <div className="category-items-container container-3">
         <div data-region="categoryTitleRegion">
@@ -143,7 +208,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
 
             return (
               <div>
-                {/* <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} currentFacets={searchQueryParams} categoryMap={categoryMap} /> */}
+                <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} />
                 <div className="products-container">
                   {/* <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} /> */}
                 </div>
diff --git a/components/src/utils/BloomreachSearchService.ts b/components/src/utils/BloomreachSearchService.ts
index f079afe7e..4ea128f23 100644
--- a/components/src/utils/BloomreachSearchService.ts
+++ b/components/src/utils/BloomreachSearchService.ts
@@ -38,7 +38,7 @@ function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch
 }
 
 // TODO: Will have to use generic types here.
-export function bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams) {
+export function bloomreachKeywordSearchLookup<T>(searchKeyword, searchQueryParams): Promise<T> {
   const baseUrl = generateBaseBloomreachUrl();
   const {
     requestType,

From 2c29b4428df04936c51c6f24924cad2e867bb984 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 17:14:51 -0700
Subject: [PATCH 41/82] Add less file for facet navigation and include
 checkmark for each facet

---
 ...bloomreach.searchfacetnavigation.main.less | 279 ++++++++++++++++++
 .../bloomreach.searchfacetnavigation.main.tsx |   2 +
 2 files changed, 281 insertions(+)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
index e69de29bb..1ee1afc8b 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
@@ -0,0 +1,279 @@
+/**
+ * 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 './../../../app/src/theme/common.less';
+
+ .product-list-facet-navigation-component {
+   float: left;
+   display: table;
+   min-width: 25%;
+   padding-bottom: 30px;
+ 
+   .card-stack {
+     margin-top: 11px;
+ 
+     .card {
+       border-radius: 0;
+       margin-top: -1px;
+ 
+       .card-title {
+         .facet {
+           color: #40B1F3;
+           font-weight: 500;
+           display: inline-block;
+           width: 100%;
+           .glyphicon {
+             display: inline-block;
+             height: 12px;
+             width: 16px;
+             background: url('../../../app/src/images/header-icons/baseline-filter_list-24px.svg') no-repeat center center;
+             margin-right:10px;
+           }
+ 
+           &:hover {
+             text-decoration: none;
+             color: @firstComplimentColor;
+             cursor: pointer;
+           }
+         }
+       }
+ 
+       .facet-value {
+         padding-left: 12.5px;
+ 
+         button {
+           color: #777777;
+           display: inline-block;
+           vertical-align: middle;
+           position: relative;
+           padding-left: 5px;
+           padding-right: 0px;
+           background:none;
+           border:none;
+ 
+           .checkmark {
+             top: 4px;
+             position: relative;
+             display: inline-block;
+             width: 18px;
+             height: 18px;
+             margin-right: 10px;
+             border: #cccccc 2px solid;
+             border-radius: 2px;
+ 
+             &.chosen {
+               border-color: #6dd401;
+               background-color: #6dd401;
+               &:before {
+                 content: "";
+                 position: absolute;
+                 top: 1px;
+                 left: -1px;
+                 width: 12px;
+                 height: 7px;
+                 border: solid 2px #FFFFFF;
+                 border-right: none;
+                 border-top: none;
+                 transform: translate(2px, 1px) rotate(-45deg);
+               }
+             }
+           }
+ 
+           &:hover {
+             text-decoration: none;
+             color: @firstComplimentColor;
+             cursor: pointer;
+           }
+ 
+           &:focus {
+             outline: 0 auto transparent;
+           }
+         }
+       }
+     }
+ 
+     @media (max-width: @tabletWidth - 1px) {
+       display: none;
+       position: fixed;
+       left: 0;
+       top: 100%;
+       width: 100vw;
+       height: 100vh;
+       z-index: 5;
+       background: @mainBackgroundColor;
+       margin-top: 0;
+ 
+       &.show-filter-mobile-menu {
+         display: flex;
+         flex-direction: column;
+         top: 0;
+         -webkit-animation: appear-up-long 1s forwards cubic-bezier(.23,1,.32,1);
+         animation: appear-up-long 1s forwards cubic-bezier(.23,1,.32,1);
+         text-align: left;
+       }
+ 
+       .navbar-collapse {
+         display: block;
+       }
+     }
+   }
+ 
+   @media (min-width: @tabletWidth) {
+     .card-title > a {
+       pointer-events: none;
+     }
+ 
+     .in.collapse {
+       display: block;
+     }
+   }
+ 
+   @media (max-width: @tabletWidth - 1px) {
+     display: block;
+     float: none;
+ 
+     .card-header {
+       border-bottom: none;
+     }
+   }
+ 
+   .filter-btn {
+     height: 48px;
+     min-width: 78px;
+     padding: 0 10px;
+     font-size: 14px;
+     font-weight: 500;
+     color: #40B1F3;
+     border: 1px solid #EEEEEE;
+     background-color: #F7F7F7;
+     &:focus {
+       outline: 2px solid #007bff80;
+     }
+ 
+     &-wrap {
+       display: none;
+       text-align: right;
+ 
+       @media (max-width: @tabletWidth - 1px) {
+         display: block;
+       }
+     }
+ 
+     .check-icon {
+       opacity: 0;
+       display: inline-block;
+       width: 6px;
+       height: 12px;
+       border: solid #40B1F3;
+       border-width: 0 2px 2px 0;
+       -webkit-transform: rotate(45deg);
+       -ms-transform: rotate(45deg);
+       transform: rotate(45deg);
+       margin-left: 8px;
+     }
+ 
+     &.filtered {
+       .check-icon {
+         opacity: 1;
+       }
+     }
+   }
+ 
+   .close-filter-mobile-menu {
+     position: relative;
+     height: 15px;
+     width: 15px;
+     border: none;
+     background: transparent;
+ 
+     &:before,
+     &:after {
+       position: absolute;
+       top: 0;
+       left: 7px;
+       content: ' ';
+       height: 15px;
+       width: 1px;
+       background-color: #333;
+     }
+ 
+     &:before {
+       transform: rotate(45deg);
+     }
+ 
+     &:after {
+       transform: rotate(-45deg);
+     }
+ 
+     &-wrap {
+       display: none;
+       padding: 1.5rem 1.25rem;
+ 
+       @media (max-width: @tabletWidth - 1px) {
+         display: flex;
+         justify-content: space-between;
+       }
+ 
+       h2 {
+         font-size: 14px;
+         font-weight: 800;
+         margin: 0;
+         color: @mainTextColor;
+       }
+     }
+   }
+ 
+   .facets-container {
+     @media (max-width: @tabletWidth - 1px) {
+       flex-grow: 1;
+       overflow: auto;
+     }
+   }
+ }
+ 
+ @-webkit-keyframes appear-up-long {
+   0% {
+     top: 100%;
+     -webkit-transform: translate(0,4rem);
+     transform: translate(0,4rem)
+   }
+ 
+   100% {
+     top: 0;
+     -webkit-transform: translate(0,0);
+     transform: translate(0,0)
+   }
+ }
+ 
+ @keyframes appear-up-long {
+   0% {
+     top: 100%;
+     -webkit-transform: translate(0,4rem);
+     transform: translate(0,4rem)
+   }
+ 
+   100% {
+     top: 0;
+     -webkit-transform: translate(0,0);
+     transform: translate(0,0)
+   }
+ }
+ 
\ No newline at end of file
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index ee1d6b416..6911345ed 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -258,6 +258,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
             return (
               <div className="list-group-item facet-value" key={id}>
                 <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
+                  <span className="checkmark" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
                 </button>
               </div>
@@ -266,6 +267,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
           return (
             <div className="list-group-item facet-value" key={id}>
               <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
+                <span className="checkmark" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
               </button>
             </div>

From 8d88c48c95d825799ae73d1300692e6d679c512b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 19 Sep 2019 19:04:33 -0700
Subject: [PATCH 42/82] Enable clicking

---
 .../bloomreach.searchfacetnavigation.main.tsx | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 6911345ed..ad7c23e0c 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -60,32 +60,35 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     // Ex. ['colors: "black"', 'category: "cat250"']
     // Ex {colors: ["black"], category: "cat250"}
     // TODO: Make this one large regex expression.
+    const filteredQueryParams: [] = [];
+
     if (queryParams) {
         let filteredQueryParams = queryParams.replace('?', '');
         filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
         filteredQueryParams = filteredQueryParams.split('fq=');
         filteredQueryParams = filteredQueryParams.map(params => params.replace('&', ''));
+    }
 
-        const filteredQueryParamsTree = filteredQueryParams.reduce((acc, outerFacetStr) => {
-        if (outerFacetStr) {
-            const outerFacetArray = outerFacetStr.split(':');
-            const category = outerFacetArray[0];
-            const loFacets = outerFacetArray[1].split('OR');
-
-            loFacets.forEach((innerFacet) => {
-            if (acc[category] == null) {
-                acc[category] = [innerFacet];
-            } else {
-                acc[category].push(innerFacet);
-            }
-            });
-        }
+    const filteredQueryParamsTree = filteredQueryParams.reduce((acc, outerFacetStr:string) => {
+      if (outerFacetStr) {
+          const outerFacetArray = outerFacetStr.split(':');
+          const category = outerFacetArray[0];
+          const loFacets = outerFacetArray[1].split('OR');
 
-        return acc;
-        }, {});
+          loFacets.forEach((innerFacet) => {
+          if (acc[category] == null) {
+              acc[category] = [innerFacet];
+          } else {
+              acc[category].push(innerFacet);
+          }
+          });
+      }
 
-        return filteredQueryParamsTree;
-    }
+      return acc;
+    }, {});
+
+    return filteredQueryParamsTree;
+    
   }
 
   constructor(props) {
@@ -224,7 +227,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   // eslint-disable-next-line class-methods-use-this
   generateFacetName(facetKey, name, choice) {
     const { categoryMap } = this.state;
-
+    
     if (choice.crumb) {
       const crumbs = choice.crumb.split('/');
       const crumbNames = crumbs.map((categoryCode) => {
@@ -281,6 +284,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
   renderFacets() {
     const { facetModel } = this.state;
+
     return Object.keys(facetModel).map((facetKey) => {
       if (facetKey && facetModel[facetKey].length > 0) {
         const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');

From c819991a3aac78f3a2ba9be41cfad706dcd0d439 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Fri, 20 Sep 2019 14:10:23 -0700
Subject: [PATCH 43/82] Able to get facets functioning properly

---
 .../bloomreach.searchfacetnavigation.main.tsx | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index ad7c23e0c..0a1754a00 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -101,6 +101,9 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       categoryMap,
     };
     this.handleFacetSelection = this.handleFacetSelection.bind(this);
+    this.addFacetFromQueryParamsTree = this.addFacetFromQueryParamsTree.bind(this);
+    this.renderFacetSelectors = this.renderFacetSelectors.bind(this);
+    this.renderFacets = this.renderFacets.bind(this);
   }
 
   removeFacetFromQueryParamsTree(facetKey, facetName) {
@@ -132,10 +135,11 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       currentFacets[facetKey].push(facetName);
     }
-
+    
     this.setState({
       currentFacets,
-    });
+    }
+    );
   }
 
   reconstructTreeIntoQueryParamsString() {
@@ -157,6 +161,15 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     const queryParams = paramArray.join('&');
     return queryParams ? `?${queryParams}` : '';
   }
+  
+  componentDidUpdate(prevProps, prevState) {
+    const { titleString } = this.props;
+    const { keywords } = titleString;
+    
+    const facets = this.reconstructTreeIntoQueryParamsString();
+    
+    window.history.pushState('', '', `/search/${keywords}${facets}`);
+  }
 
   handleFacetSelection(facetKey, facetId) {
     const { history, titleString } = this.props;
@@ -167,24 +180,19 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       this.addFacetFromQueryParamsTree(facetKey, facetId);
     }
-
-    const facets = this.reconstructTreeIntoQueryParamsString();
-
-    history.push(`/search/${keywords}${facets}`);
   }
 
   hasFacetBeenSelected(facetKey, facetName) {
     const { currentFacets } = this.state;
-    
-    if (currentFacets) {
-        if (currentFacets[facetKey]) {
-            return currentFacets[facetKey].some((facet) => {
-              if (facet.includes(facetName)) {
-                return true;
-              }
-              return false;
-            });
-          }
+
+    if (currentFacets[facetKey]) {
+
+      return currentFacets[facetKey].some((facet) => {
+        if (facet.includes(facetName)) {
+          return true;
+        }
+        return false;
+      });
     }
 
     return false;
@@ -261,16 +269,17 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
             return (
               <div className="list-group-item facet-value" key={id}>
                 <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
-                  <span className="checkmark" />
+                  <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
                 </button>
               </div>
             );
           }
+
           return (
             <div className="list-group-item facet-value" key={id}>
               <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
-                <span className="checkmark" />
+                <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
               </button>
             </div>
@@ -312,7 +321,8 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   render() {
-    const { facetModel } = this.state;
+    const { facetModel, currentFacets } = this.state;
+    
     if (facetModel) {
       return (
         <div className="product-list-facet-navigation-component">

From 77f0078f171c91310188f1aabe1ca018d189239c Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Fri, 20 Sep 2019 15:47:11 -0700
Subject: [PATCH 44/82] Able to get product list item showing up on search

---
 .../bloomreach.productlist.main.less          | 100 +++++++++++
 .../bloomreach.productlist.main.tsx           | 170 ++++++++++++++++++
 .../bloomreach.searchresultsitems.main.tsx    |   4 +-
 3 files changed, 272 insertions(+), 2 deletions(-)
 create mode 100644 components/src/BloomreachProductListMain/bloomreach.productlist.main.less
 create mode 100644 components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.less b/components/src/BloomreachProductListMain/bloomreach.productlist.main.less
new file mode 100644
index 000000000..a611897e0
--- /dev/null
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.less
@@ -0,0 +1,100 @@
+/**
+ * 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 './../style/common.less';
+
+ .product-list-container {
+   text-align: left;
+ 
+   .compare-button{
+     text-align: center;
+     margin-bottom: 30px;
+ 
+     .top-compare-link{
+       margin: 0;
+       padding: 0;
+       text-transform: none;
+ 
+       &:hover{
+         text-decoration: none;
+       }
+ 
+       &.disabled {
+         background-color: #9d9d9d;
+         pointer-events: none;
+         cursor: default;
+       }
+     }
+     
+     .toggle-compare-link{
+       min-height: 40px;
+       line-height: 40px;
+       display: inline-block;
+       padding: 0 15px;
+       text-decoration: none;
+       color: #fff;
+     }
+   }
+ 
+   .category-items-listing {
+     .category-item-container {
+       position: relative;
+       display: inline-block;
+       width: 25%;
+       padding: 0 10px 30px 10px;
+       vertical-align: top;
+ 
+       .compare-checkbox{
+         position: absolute;
+         left: 10px;
+         bottom: 10px;
+       }
+ 
+       .category-item-inner {
+         .category-item-availability-container {
+           display: block;
+         }
+ 
+         .category-item-title {
+           padding-top: 10px;
+           min-height: 70px;
+           font-size: 14px;
+           font-weight: 800;
+           line-height: 1.13;
+           color: @mainBlueColor;
+ 
+           a {
+             color: @mainBlueColor;
+           }
+         }
+       }
+ 
+       @media (max-width: @tabletWidth - 1px) {
+         width: 33%;
+       }
+ 
+       @media (max-width: @mobileWidth - 1px) {
+         width: 50%;
+       }
+     }
+   }
+ }
+ 
\ No newline at end of file
diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
new file mode 100644
index 000000000..0074ce837
--- /dev/null
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -0,0 +1,170 @@
+/**
+ * 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 React from 'react';
+import PropTypes, { string } from 'prop-types';
+import intl from 'react-intl-universal';
+import { Link } from 'react-router-dom';
+import ProductListItemMain from '../ProductListItem/productlistitem.main';
+
+// import '../productlist.main.less';
+
+interface BloomreachProductListMainProps {
+    productData: any,
+    showCompareButton: any
+  }
+  
+interface BloomreachProductListMainState {
+    isCompare: any,
+      compareLink: any,
+      categoryModel: any,
+      compareList: any,
+}
+
+// TODO: Have to create types for all these files...
+class BloomreachProductListMain extends React.Component<BloomreachProductListMainProps, BloomreachProductListMainState>  {
+  static propTypes = {
+    productData: PropTypes.objectOf(PropTypes.any).isRequired,
+    showCompareButton: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    showCompareButton: true,
+  }
+
+  constructor(props) {
+    super(props);
+    const { productData } = this.props;
+    this.state = {
+      isCompare: false,
+      compareLink: '',
+      categoryModel: productData,
+      compareList: [],
+    };
+    this.handleCompareToggle = this.handleCompareToggle.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { productData } = nextProps;
+    this.setState({ categoryModel: productData });
+  }
+
+  handleCompare(event) {
+    this.setState({
+      isCompare: !event,
+    });
+  }
+
+  handleCompareToggle(event) {
+    const { compareList } = this.state;
+    const elementCode:string = event.target.name;
+    const index = compareList.indexOf(elementCode);
+    if (index === -1 && compareList.length > 2) return;
+    if (index !== -1) {
+      this.setState({
+        compareList: compareList.slice(0, index).concat(compareList.slice(index + 1)),
+        compareLink: `/productscompare/${encodeURIComponent(compareList.slice(0, index).concat(compareList.slice(index + 1)).join())}`,
+      });
+    } else {
+      this.setState({
+        compareList: [...compareList, elementCode],
+        compareLink: `/productscompare/${encodeURIComponent([...compareList, elementCode].join())}`,
+      });
+    }
+  }
+
+  checkComparison(product) {
+    const { compareList, isCompare } = this.state;
+    const code:string = product._code[0].code;
+    const isChecked = compareList.indexOf(code) !== -1;
+    if (product._definition && isCompare) {
+      return (
+        <div className="compare-checkbox">
+          <label htmlFor={product._definition[0]['display-name']}>
+            <input
+              id={product._definition[0]['display-name']}
+              checked={isChecked}
+              name={product._code[0].code}
+              disabled={compareList.length > 2 && !isChecked}
+              type="checkbox"
+              onChange={this.handleCompareToggle}
+            />
+            <span className="helping-el" />
+            <span className="label-text">
+          &nbsp;
+              {intl.get('compare')}
+            </span>
+          </label>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  renderProducts() {
+    const { categoryModel } = this.state;
+    console.log(categoryModel);
+    return categoryModel.map((product) => {
+      if (product.pid) {
+        const sku = product.variants[0].sku_swatch_images[0];
+        return (
+          <li key={`_${Math.random().toString(36).substr(2, 9)}`} className="category-item-container">
+            <ProductListItemMain productId={sku} />
+          </li>
+        );
+      }
+      return null;
+    });
+  }
+
+  render() {
+    const {
+      isCompare,
+      compareList,
+      compareLink,
+    } = this.state;
+    const { showCompareButton } = this.props;
+    return (
+      <div className="product-list-container" data-region="categoryBrowseRegion">
+        {showCompareButton ? (
+          <div className="compare-button">
+            <button 
+            type="button" 
+            className="ep-btn primary top-compare-link" 
+            // onClick={
+            //   (compareList.length <= 1) ? () => this.handleCompare(isCompare) : ''
+            //   }
+            >
+              {(compareList.length > 1) ? (
+                <Link className="toggle-compare-link" to={compareLink}>{intl.get('compare-products')}</Link>
+              ) : `${intl.get('compare')}`}
+            </button>
+          </div>
+        ) : ''}
+        <ul className="category-items-listing equalize" id="category_items_listing">
+          {this.renderProducts()}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default BloomreachProductListMain;
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index 1262ee2cd..53cc2413d 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -23,7 +23,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
 import { bloomreachKeywordSearchLookup } from '../utils/BloomreachSearchService';
-// import BloomreachProductListMain from './bloomreach.productlist.main';
+import BloomreachProductListMain from '../BloomreachProductListMain/bloomreach.productlist.main';
 import BloomreachSearchFacetNavigationMain from '../BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main';
 
 // import '../searchresultsitems.main.less';
@@ -210,7 +210,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
               <div>
                 <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} />
                 <div className="products-container">
-                  {/* <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} /> */}
+                  <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} />
                 </div>
               </div>
             );

From f38e84757ef9b094c6d515cdbed9a97004ca04c3 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 14:41:30 -0700
Subject: [PATCH 45/82] Able to get the facets to filter properly

---
 .../bloomreach.productlist.main.tsx           |  1 -
 .../bloomreach.searchfacetnavigation.main.tsx | 68 +++++++++++--------
 .../bloomreach.searchresultsitems.main.tsx    | 27 ++++++--
 3 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index 0074ce837..88a3dbab0 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -121,7 +121,6 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
 
   renderProducts() {
     const { categoryModel } = this.state;
-    console.log(categoryModel);
     return categoryModel.map((product) => {
       if (product.pid) {
         const sku = product.variants[0].sku_swatch_images[0];
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 0a1754a00..8e8c45a18 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -20,8 +20,7 @@
  */
 
 import React from 'react';
-import ReactRouterPropTypes from 'react-router-prop-types';
-import PropTypes from 'prop-types';
+
 import { withRouter } from 'react-router';
 
 import './bloomreach.searchfacetnavigation.main.less';
@@ -31,6 +30,7 @@ interface BloomreachSearchFacetNavigationMainProps {
     titleString: any,
     categoryMap: any,
     currentFacets: any,
+    onFacetSelected: any,
     history: any,
 }
 
@@ -56,20 +56,21 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   static turnQueryParamsIntoTree(queryParams) {
+    const decodedQueryParams = decodeURI(queryParams);
     // Ex. ?fq=colors:"black"OR"red"&fq=category:"cat250"
     // Ex. ['colors: "black"', 'category: "cat250"']
     // Ex {colors: ["black"], category: "cat250"}
     // TODO: Make this one large regex expression.
-    const filteredQueryParams: [] = [];
-
-    if (queryParams) {
-        let filteredQueryParams = queryParams.replace('?', '');
+    let filteredQueryParamsArray: string[] = [];
+    console.log(decodedQueryParams);
+    if (decodedQueryParams) {
+        let filteredQueryParams: string = decodedQueryParams.replace('?', '');
         filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
-        filteredQueryParams = filteredQueryParams.split('fq=');
-        filteredQueryParams = filteredQueryParams.map(params => params.replace('&', ''));
+        filteredQueryParamsArray = filteredQueryParams.split('fq=');
+        filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
     }
 
-    const filteredQueryParamsTree = filteredQueryParams.reduce((acc, outerFacetStr:string) => {
+    const filteredQueryParamsTree = filteredQueryParamsArray.reduce((acc, outerFacetStr:string) => {
       if (outerFacetStr) {
           const outerFacetArray = outerFacetStr.split(':');
           const category = outerFacetArray[0];
@@ -87,26 +88,31 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       return acc;
     }, {});
 
+    console.log(filteredQueryParamsTree);
+
     return filteredQueryParamsTree;
     
   }
 
   constructor(props) {
+    console.log('constructor being called again');
     super(props);
     const { productData, currentFacets, categoryMap } = this.props;
-
+    
     this.state = {
       facetModel: productData,
-      currentFacets: BloomreachSearchFacetNavigationMain.turnQueryParamsIntoTree(currentFacets),
+      currentFacets: BloomreachSearchFacetNavigationMain.turnQueryParamsIntoTree(window.location.search),
       categoryMap,
     };
+
+    console.log(this.state);
     this.handleFacetSelection = this.handleFacetSelection.bind(this);
     this.addFacetFromQueryParamsTree = this.addFacetFromQueryParamsTree.bind(this);
     this.renderFacetSelectors = this.renderFacetSelectors.bind(this);
     this.renderFacets = this.renderFacets.bind(this);
   }
 
-  removeFacetFromQueryParamsTree(facetKey, facetName) {
+  removeFacetFromQueryParamsTree(facetKey, facetName, onFacetFinishUpdate) {
     const { currentFacets } = this.state;
     const filteredCurrentFacets = currentFacets[facetKey].filter((facet) => {
       if (facet.includes(facetName)) {
@@ -124,10 +130,12 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
     this.setState({
       currentFacets,
-    });
+    },
+    onFacetFinishUpdate
+    );
   }
 
-  addFacetFromQueryParamsTree(facetKey, facetName) {
+  addFacetFromQueryParamsTree(facetKey, facetName, onFacetFinishUpdate) {
     const { currentFacets } = this.state;
 
     if (currentFacets[facetKey] == null) {
@@ -135,10 +143,14 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       currentFacets[facetKey].push(facetName);
     }
+
+    console.log('the current facets');
+    console.log(currentFacets);
     
     this.setState({
       currentFacets,
-    }
+    },
+    onFacetFinishUpdate
     );
   }
 
@@ -161,25 +173,24 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     const queryParams = paramArray.join('&');
     return queryParams ? `?${queryParams}` : '';
   }
-  
-  componentDidUpdate(prevProps, prevState) {
-    const { titleString } = this.props;
-    const { keywords } = titleString;
-    
-    const facets = this.reconstructTreeIntoQueryParamsString();
-    
-    window.history.pushState('', '', `/search/${keywords}${facets}`);
-  }
 
   handleFacetSelection(facetKey, facetId) {
-    const { history, titleString } = this.props;
+    const { history, titleString, onFacetSelected } = this.props;
     const { keywords } = titleString;
 
+    var onFacetFinishUpdate = () => {
+      const facets = this.reconstructTreeIntoQueryParamsString();
+      window.history.pushState('', '', `/search/${keywords}${facets}`);
+      onFacetSelected(facets);
+    }
+
     if (this.hasFacetBeenSelected(facetKey, facetId)) {
-      this.removeFacetFromQueryParamsTree(facetKey, facetId);
+      this.removeFacetFromQueryParamsTree(facetKey, facetId, onFacetFinishUpdate);
     } else {
-      this.addFacetFromQueryParamsTree(facetKey, facetId);
+      this.addFacetFromQueryParamsTree(facetKey, facetId, onFacetFinishUpdate);
     }
+
+    // TODO: Here we should call something that changes the state here... Might want to update the state from the setState function.
   }
 
   hasFacetBeenSelected(facetKey, facetName) {
@@ -322,7 +333,8 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
   render() {
     const { facetModel, currentFacets } = this.state;
-    
+    console.log('checking the currentFacets');
+    console.log(currentFacets);
     if (facetModel) {
       return (
         <div className="product-list-facet-navigation-component">
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index 53cc2413d..e9b665936 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -139,29 +139,35 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
       searchKeywords: searchKeywordsProps,
       searchQueryParams: null,
     };
+
+    this.onFacetSelected = this.onFacetSelected.bind(this);
   }
 
   componentDidMount() {
     const { searchKeywordsProps } = this.props;
-    this.getSearchData(searchKeywordsProps);
+    this.getSearchData(searchKeywordsProps, undefined);
   }
 
   componentWillReceiveProps(nextProps) {
     const { searchKeywordsProps } = nextProps;
-    this.getSearchData(searchKeywordsProps);
+    this.getSearchData(searchKeywordsProps, undefined);
   }
 
-  async getSearchData(searchKeywordsProps) {
+  async getSearchData(searchKeywordsProps, searchQueryParams) {
     this.setState({
       isLoading: true,
       searchKeywords: searchKeywordsProps,
     });
 
     const searchKeyword = searchKeywordsProps.match.params;
-    const searchQueryParams = searchKeywordsProps.location.search;
+    const queryParams = (searchQueryParams == undefined) ? searchKeywordsProps.location.search : searchQueryParams;
+    console.log(searchKeyword);
+    console.log(searchQueryParams);
+    
+    const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, queryParams);
+    
+    console.log(res);
     
-    const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, searchQueryParams);
-
     this.setState({
         isLoading: false,
         searchResultsModel: res,
@@ -169,6 +175,15 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     });
   }
 
+  onFacetSelected(queryParams) {
+    // TODO: this.handleFacetSelection.
+    // This needs to change the products
+    const { searchKeywordsProps } = this.props;
+    console.log(window.location.search);
+    console.log(searchKeywordsProps); // not sure if this changed... maybe should 
+    this.getSearchData(searchKeywordsProps, window.location.search);
+  }
+
   render() {
     const {
       isLoading,

From 9845d4d4b87cf4fe21f2390f1aecfa550986fc41 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 14:47:52 -0700
Subject: [PATCH 46/82] Get rid of errors

---
 .../bloomreach.productlist.main.tsx              | 16 ++++------------
 .../bloomreach.searchfacetnavigation.main.tsx    |  7 +++----
 .../bloomreach.searchresultsitems.main.tsx       |  8 +-------
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index 88a3dbab0..b51d2ae59 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -28,27 +28,19 @@ import ProductListItemMain from '../ProductListItem/productlistitem.main';
 // import '../productlist.main.less';
 
 interface BloomreachProductListMainProps {
-    productData: any,
+    productData: [],
     showCompareButton: any
   }
   
 interface BloomreachProductListMainState {
     isCompare: any,
-      compareLink: any,
-      categoryModel: any,
-      compareList: any,
+    compareLink: any,
+    categoryModel: any,
+    compareList: any,
 }
 
 // TODO: Have to create types for all these files...
 class BloomreachProductListMain extends React.Component<BloomreachProductListMainProps, BloomreachProductListMainState>  {
-  static propTypes = {
-    productData: PropTypes.objectOf(PropTypes.any).isRequired,
-    showCompareButton: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    showCompareButton: true,
-  }
 
   constructor(props) {
     super(props);
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 8e8c45a18..a43cc816b 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -269,16 +269,15 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   renderFacetSelectors(facetKey, facetselector) {
-    // this.funcName = 'renderFacetSelectors';
 
     if (facetselector) {
-      return facetselector.map((choice) => {
+      return facetselector.map((choice, i) => {
         if (choice) {
           const name = choice.name ? choice.name : choice.cat_name;
           const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
           if (!this.hasFacetBeenSelected(facetKey, id)) {
             return (
-              <div className="list-group-item facet-value" key={id}>
+              <div className="list-group-item facet-value" key={id + i}>
                 <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
                   <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
@@ -288,7 +287,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
           }
 
           return (
-            <div className="list-group-item facet-value" key={id}>
+            <div className="list-group-item facet-value" key={id + i}>
               <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
                 <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index e9b665936..cfe93d4cc 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -161,8 +161,6 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
 
     const searchKeyword = searchKeywordsProps.match.params;
     const queryParams = (searchQueryParams == undefined) ? searchKeywordsProps.location.search : searchQueryParams;
-    console.log(searchKeyword);
-    console.log(searchQueryParams);
     
     const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, queryParams);
     
@@ -176,11 +174,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
   }
 
   onFacetSelected(queryParams) {
-    // TODO: this.handleFacetSelection.
-    // This needs to change the products
     const { searchKeywordsProps } = this.props;
-    console.log(window.location.search);
-    console.log(searchKeywordsProps); // not sure if this changed... maybe should 
     this.getSearchData(searchKeywordsProps, window.location.search);
   }
 
@@ -223,7 +217,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
 
             return (
               <div>
-                <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} />
+                <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} onFacetSelected={this.onFacetSelected}/>
                 <div className="products-container">
                   <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} />
                 </div>

From 81cba4f8e5edf548aaa23b7838e91fda01b684f3 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 14:56:09 -0700
Subject: [PATCH 47/82] Get rid of some console.logs

---
 .../bloomreach.searchfacetnavigation.main.tsx         | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index a43cc816b..7c06c429f 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -62,7 +62,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     // Ex {colors: ["black"], category: "cat250"}
     // TODO: Make this one large regex expression.
     let filteredQueryParamsArray: string[] = [];
-    console.log(decodedQueryParams);
+    
     if (decodedQueryParams) {
         let filteredQueryParams: string = decodedQueryParams.replace('?', '');
         filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
@@ -88,8 +88,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       return acc;
     }, {});
 
-    console.log(filteredQueryParamsTree);
-
     return filteredQueryParamsTree;
     
   }
@@ -105,7 +103,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       categoryMap,
     };
 
-    console.log(this.state);
     this.handleFacetSelection = this.handleFacetSelection.bind(this);
     this.addFacetFromQueryParamsTree = this.addFacetFromQueryParamsTree.bind(this);
     this.renderFacetSelectors = this.renderFacetSelectors.bind(this);
@@ -143,9 +140,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       currentFacets[facetKey].push(facetName);
     }
-
-    console.log('the current facets');
-    console.log(currentFacets);
     
     this.setState({
       currentFacets,
@@ -332,8 +326,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
   render() {
     const { facetModel, currentFacets } = this.state;
-    console.log('checking the currentFacets');
-    console.log(currentFacets);
+
     if (facetModel) {
       return (
         <div className="product-list-facet-navigation-component">

From 28a4a11a81e9c8ac28f9d9d6997a20de2686c041 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 15:01:07 -0700
Subject: [PATCH 48/82] Delete unused functions

---
 .../bloomreach.searchfacetnavigation.main.tsx | 37 -------------------
 1 file changed, 37 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 7c06c429f..3168c18bd 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -93,7 +93,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   constructor(props) {
-    console.log('constructor being called again');
     super(props);
     const { productData, currentFacets, categoryMap } = this.props;
     
@@ -183,8 +182,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       this.addFacetFromQueryParamsTree(facetKey, facetId, onFacetFinishUpdate);
     }
-
-    // TODO: Here we should call something that changes the state here... Might want to update the state from the setState function.
   }
 
   hasFacetBeenSelected(facetKey, facetName) {
@@ -203,40 +200,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     return false;
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  findAllParentCategories(categoryMap) {
-    const parentCategories = {};
-    Object.keys(categoryMap).forEach((categoryKey) => {
-      const l = categoryKey.length;
-      const lastTwoDigits = categoryKey.substring(l - 3, l - 1);
-      if (lastTwoDigits === '00') {
-        parentCategories[categoryKey] = categoryMap[categoryKey];
-      }
-    });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  isCategoryCodeParent(categoryCode) {
-    const l = categoryCode.length;
-    const lastTwoDigits = categoryCode.substring(l - 2, l);
-    if (lastTwoDigits === '00') {
-      return true;
-    }
-    return false;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  findParent(facetselector, choice) {
-    const { categoryMap } = this.state;
-    // const parentCategories = this.findAllParentCategories(categoryMap);
-    const id = choice.cat_id;
-    const choicePrefix = id.substring(0, id.length - 2);
-    const choiceSelector = `${choicePrefix}00`;
-
-    const parent = categoryMap[choiceSelector];
-    return parent;
-  }
-
   // eslint-disable-next-line class-methods-use-this
   generateFacetName(facetKey, name, choice) {
     const { categoryMap } = this.state;

From 91d3e2c319fdebd4c9298779e353e188ec9d85bc Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 15:02:29 -0700
Subject: [PATCH 49/82] get rid of unused variable

---
 .../bloomreach.searchfacetnavigation.main.tsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 3168c18bd..9dcb1b97f 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -288,7 +288,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   render() {
-    const { facetModel, currentFacets } = this.state;
+    const { facetModel} = this.state;
 
     if (facetModel) {
       return (

From 0d78435088a3f9dbdcfd0eb6ce45181e8916802d Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 15:03:01 -0700
Subject: [PATCH 50/82] get rid of unused console log

---
 .../bloomreach.searchresultsitems.main.tsx                      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index cfe93d4cc..e47af6410 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -164,8 +164,6 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     
     const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, queryParams);
     
-    console.log(res);
-    
     this.setState({
         isLoading: false,
         searchResultsModel: res,

From c902c27c6c512bb1ff48dc77944b72f1df2529ee Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 15:51:42 -0700
Subject: [PATCH 51/82] Able to get the facets to toggle properly

---
 .../bloomreach.searchfacetnavigation.main.tsx             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 9dcb1b97f..6ab3d13cc 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -269,13 +269,13 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
           <div className="card" key={facetKey} id={`${facetDisplayNameId}_facet`}>
             <div className="card-header">
               <h4 className="card-title">
-                <a className="facet" data-toggle="collapse" href={`#${facetDisplayNameId}_facet_values`}>
-                  <span className="glyphicon glyphicon-tag" />
+                <div className="facet" data-toggle="collapse" data-target={`#${facetDisplayNameId}_facet_values`}>
+                  <span className="glyphicon" />
                   {facetKey}
-                </a>
+                </div>
               </h4>
             </div>
-            <div id={`${facetDisplayNameId}_facet_values`} className="collapse navbar-collapse in">
+            <div id={`${facetDisplayNameId}_facet_values`} className="collapse">
               <ul className="list-group list-group-flush">
                 {this.renderFacetSelectors(facetKey, facetCategoryChildren)}
               </ul>

From 8cbea2abc91a00daef7f663a750d74b37f82172c Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 15:56:21 -0700
Subject: [PATCH 52/82] uncollapse the left category

---
 .../bloomreach.searchfacetnavigation.main.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 6ab3d13cc..b5aeeda56 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -261,7 +261,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   renderFacets() {
     const { facetModel } = this.state;
 
-    return Object.keys(facetModel).map((facetKey) => {
+    return Object.keys(facetModel).map((facetKey, index) => {
       if (facetKey && facetModel[facetKey].length > 0) {
         const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');
         const facetCategoryChildren = facetModel[facetKey];
@@ -275,7 +275,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                 </div>
               </h4>
             </div>
-            <div id={`${facetDisplayNameId}_facet_values`} className="collapse">
+            <div id={`${facetDisplayNameId}_facet_values`} className={index ? "collapse" : "collapse show"}>
               <ul className="list-group list-group-flush">
                 {this.renderFacetSelectors(facetKey, facetCategoryChildren)}
               </ul>

From 7c668ac7a6eb87b5dda4fa2cce5ff70e6e292159 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 16:46:43 -0700
Subject: [PATCH 53/82] Move the types into a different file

---
 .../bloomreach.searchresultsitems.main.tsx    | 100 +-----------------
 .../bloomreach.searchresultsitems.main.d.ts   |  92 ++++++++++++++++
 2 files changed, 94 insertions(+), 98 deletions(-)
 create mode 100644 components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts

diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index e47af6410..0ce0f3362 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -20,111 +20,15 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
 import { bloomreachKeywordSearchLookup } from '../utils/BloomreachSearchService';
 import BloomreachProductListMain from '../BloomreachProductListMain/bloomreach.productlist.main';
 import BloomreachSearchFacetNavigationMain from '../BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main';
-
-// import '../searchresultsitems.main.less';
-
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import { BloomreachKeywordSearchLookupResponse, BloomreachSearchResultsItemsMainProps, BloomreachSearchResultsItemsMainState } from './types/bloomreach.searchresultsitems.main';
 
 let Config: IEpConfig | any = {};
 
-interface BloomreachSearchResultsItemsMainProps {
-    searchKeywordsProps: {
-      [key: string]: any
-    },
-    onProductFacetSelection?: (...args: any[]) => any,
-    productLinks?: {
-      [key: string]: string
-    }
-  }
-  
-interface BloomreachSearchResultsItemsMainState {
-    isLoading: boolean,
-    searchResultsModel: {
-      [key: string]: any
-    },
-    loadSortedProduct: boolean,
-    searchKeywords: any,
-    searchQueryParams: any,
-}
-
-interface BloomreachKeywordSearchLookupResponse {
-    response:     Response;
-    facet_counts: FacetCounts;
-    category_map: CategoryMap;
-    did_you_mean: any[];
-}
-
-interface CategoryMap {
-    VESTRI_BM_APPAREL:   string;
-    VESTRI_APPAREL_MENS: string;
-}
-
-interface FacetCounts {
-    facet_ranges:  Facet;
-    facet_fields:  FacetFields;
-    facet_queries: Facet;
-}
-
-interface FacetFields {
-    category:     Category[];
-    sizes:        AgeGroup[];
-    brand:        any[];
-    colors:       AgeGroup[];
-    color_groups: any[];
-    color:        AgeGroup[];
-    gender:       AgeGroup[];
-    material:     AgeGroup[];
-    apparel_type: AgeGroup[];
-    age_group:    AgeGroup[];
-}
-
-interface AgeGroup {
-    count: number;
-    name:  string;
-}
-
-interface Category {
-    count:     number;
-    crumb:     string;
-    cat_name:  string;
-    parent:    string;
-    cat_id:    string;
-    tree_path: string;
-}
-
-interface Facet {
-}
-
-interface Response {
-    numFound: number;
-    start:    number;
-    docs:     Doc[];
-}
-
-interface Doc {
-    sale_price:       number;
-    price:            number;
-    description:      string;
-    title:            string;
-    url:              string;
-    brand:            string;
-    pid:              string;
-    thumb_image:      string;
-    sale_price_range: number[];
-    price_range:      number[];
-    variants:         Variant[];
-}
-
-interface Variant {
-    sku_swatch_images: string[];
-    sku_thumb_images:  string[];
-}
-
 class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchResultsItemsMainProps, BloomreachSearchResultsItemsMainState> {
 
   constructor(props) {
@@ -163,7 +67,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     const queryParams = (searchQueryParams == undefined) ? searchKeywordsProps.location.search : searchQueryParams;
     
     const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, queryParams);
-    
+
     this.setState({
         isLoading: false,
         searchResultsModel: res,
diff --git a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
new file mode 100644
index 000000000..67826bc62
--- /dev/null
+++ b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
@@ -0,0 +1,92 @@
+export interface BloomreachSearchResultsItemsMainProps {
+    searchKeywordsProps: {
+      [key: string]: any
+    },
+    onProductFacetSelection?: (...args: any[]) => any,
+    productLinks?: {
+      [key: string]: string
+    }
+  }
+  
+export interface BloomreachSearchResultsItemsMainState {
+    isLoading: boolean,
+    searchResultsModel: {
+      [key: string]: any
+    },
+    loadSortedProduct: boolean,
+    searchKeywords: any,
+    searchQueryParams: any,
+}
+
+export interface BloomreachKeywordSearchLookupResponse {
+    response:     Response;
+    facet_counts: FacetCounts;
+    category_map: CategoryMap;
+    did_you_mean: any[];
+}
+
+export interface CategoryMap {
+    VESTRI_BM_APPAREL:   string;
+    VESTRI_APPAREL_MENS: string;
+}
+
+export interface FacetCounts {
+    facet_ranges:  Facet;
+    facet_fields:  FacetFields;
+    facet_queries: Facet;
+}
+
+export interface FacetFields {
+    category:     Category[];
+    sizes:        AgeGroup[];
+    brand:        any[];
+    colors:       AgeGroup[];
+    color_groups: any[];
+    color:        AgeGroup[];
+    gender:       AgeGroup[];
+    material:     AgeGroup[];
+    apparel_type: AgeGroup[];
+    age_group:    AgeGroup[];
+}
+
+export interface AgeGroup {
+    count: number;
+    name:  string;
+}
+
+export interface Category {
+    count:     number;
+    crumb:     string;
+    cat_name:  string;
+    parent:    string;
+    cat_id:    string;
+    tree_path: string;
+}
+
+interface Facet {
+}
+
+interface Response {
+    numFound: number;
+    start:    number;
+    docs:     Doc[];
+}
+
+interface Doc {
+    sale_price:       number;
+    price:            number;
+    description:      string;
+    title:            string;
+    url:              string;
+    brand:            string;
+    pid:              string;
+    thumb_image:      string;
+    sale_price_range: number[];
+    price_range:      number[];
+    variants:         Variant[];
+}
+
+interface Variant {
+    sku_swatch_images: string[];
+    sku_thumb_images:  string[];
+}
\ No newline at end of file

From 2d4587becc6c8330a50ff1077a7f7099d9437857 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 16:58:04 -0700
Subject: [PATCH 54/82] Move types into seperate folder

---
 .../bloomreach.productlist.main.tsx               |  1 -
 .../bloomreach.searchfacetnavigation.main.tsx     | 15 +--------------
 .../bloomreach.searchfacetnavigation.main.d.ts    | 14 ++++++++++++++
 3 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index b51d2ae59..7f1654892 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -20,7 +20,6 @@
  */
 
 import React from 'react';
-import PropTypes, { string } from 'prop-types';
 import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import ProductListItemMain from '../ProductListItem/productlistitem.main';
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index b5aeeda56..4a9761195 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -25,20 +25,7 @@ import { withRouter } from 'react-router';
 
 import './bloomreach.searchfacetnavigation.main.less';
 
-interface BloomreachSearchFacetNavigationMainProps {
-    productData: any,
-    titleString: any,
-    categoryMap: any,
-    currentFacets: any,
-    onFacetSelected: any,
-    history: any,
-}
-
-interface BloomreachSearchResultsNavigationMainState {
-    facetModel: any,
-    currentFacets: any,
-    categoryMap: any,
-}
+import { BloomreachSearchFacetNavigationMainProps, BloomreachSearchResultsNavigationMainState } from './types/bloomreach.searchfacetnavigation.main';
 
 class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSearchFacetNavigationMainProps, BloomreachSearchResultsNavigationMainState> {
 
diff --git a/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts b/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts
new file mode 100644
index 000000000..a3ed516b9
--- /dev/null
+++ b/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts
@@ -0,0 +1,14 @@
+export interface BloomreachSearchFacetNavigationMainProps {
+    productData: any,
+    titleString: any,
+    categoryMap: any,
+    currentFacets: any,
+    onFacetSelected: any,
+    history: any,
+}
+
+export interface BloomreachSearchResultsNavigationMainState {
+    facetModel: any,
+    currentFacets: any,
+    categoryMap: any,
+}

From fbd102f63fd34d655e448698448597c8d66308c1 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 17:02:17 -0700
Subject: [PATCH 55/82] Move types from bloomreach.appheadersearch.main

---
 .../bloomreach.appheadersearch.main.tsx       | 39 +------------------
 .../bloomreach.appheadersearch.main.d.ts      | 36 +++++++++++++++++
 2 files changed, 38 insertions(+), 37 deletions(-)
 create mode 100644 components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts

diff --git a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
index 9f44b698f..b778e04e6 100644
--- a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
+++ b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
@@ -23,44 +23,9 @@ import React, { FormEvent, SyntheticEvent } 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 BloomreachSuggestion {
-  q: string,
-  dq: string,
-}
+import { BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState, BloomreachSearchSuggestionResponse, BloomreachSuggestion } from './types/bloomreach.appheadersearch.main';
 
-interface BloomreachHeaderSearchMainState {
-    keywords: string,
-    suggestions: BloomreachSuggestion[],
-}
-
-interface BloomreachSearchSuggestionResponse {
-  responseHeader: {
-    status: number;
-    QTime: number;
-  }
-  response: {
-    q: string;
-    suggestions: BloomreachSuggestion[];
-    numFound: number;
-    products: [{
-      url: string;
-      // eslint-disable-next-line
-      sale_price: number;
-      pid: string;
-      // eslint-disable-next-line
-      thumb_image: string;
-      title: string;
-    }];
-  };
-}
+const intl = { get: str => str };
 
 class BloomreachHeaderSearchMain extends React.Component<BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState> {
   private searchInput: React.RefObject<HTMLInputElement>;
diff --git a/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
new file mode 100644
index 000000000..5e7a45c6b
--- /dev/null
+++ b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
@@ -0,0 +1,36 @@
+export interface BloomreachHeaderSearchMainProps {
+    isMobileView: boolean,
+    isFocused: boolean,
+    onSearchPage?: (...args: any[]) => any,
+}
+
+export interface BloomreachSuggestion {
+  q: string,
+  dq: string,
+}
+
+export interface BloomreachHeaderSearchMainState {
+    keywords: string,
+    suggestions: BloomreachSuggestion[],
+}
+
+export interface BloomreachSearchSuggestionResponse {
+  responseHeader: {
+    status: number;
+    QTime: number;
+  }
+  response: {
+    q: string;
+    suggestions: BloomreachSuggestion[];
+    numFound: number;
+    products: [{
+      url: string;
+      // eslint-disable-next-line
+      sale_price: number;
+      pid: string;
+      // eslint-disable-next-line
+      thumb_image: string;
+      title: string;
+    }];
+  };
+}

From 1ed09c62b9f763eba178434ec391270dd78ba052 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Mon, 23 Sep 2019 17:05:10 -0700
Subject: [PATCH 56/82] Move bloomreach.productlist.main types into another
 file

---
 .../bloomreach.productlist.main.tsx              | 16 +---------------
 .../types/bloomreach.productlist.main.d.ts       | 11 +++++++++++
 2 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index 7f1654892..eced0dfef 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -23,22 +23,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import ProductListItemMain from '../ProductListItem/productlistitem.main';
+import { BloomreachProductListMainProps, BloomreachProductListMainState } from './types/bloomreach.productlist.main'
 
-// import '../productlist.main.less';
-
-interface BloomreachProductListMainProps {
-    productData: [],
-    showCompareButton: any
-  }
-  
-interface BloomreachProductListMainState {
-    isCompare: any,
-    compareLink: any,
-    categoryModel: any,
-    compareList: any,
-}
-
-// TODO: Have to create types for all these files...
 class BloomreachProductListMain extends React.Component<BloomreachProductListMainProps, BloomreachProductListMainState>  {
 
   constructor(props) {
diff --git a/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
new file mode 100644
index 000000000..ab10a01a8
--- /dev/null
+++ b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
@@ -0,0 +1,11 @@
+export interface BloomreachProductListMainProps {
+    productData: [],
+    showCompareButton: any
+  }
+  
+export interface BloomreachProductListMainState {
+    isCompare: any,
+    compareLink: any,
+    categoryModel: any,
+    compareList: any,
+}

From 369c63576d346e345e1d041b0a284e2a75385980 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 10:05:05 -0700
Subject: [PATCH 57/82] get rid of uneeded export functions

---
 .../types/bloomreach.searchresultsitems.main.d.ts      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
index 67826bc62..94b029acf 100644
--- a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
+++ b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
@@ -25,18 +25,18 @@ export interface BloomreachKeywordSearchLookupResponse {
     did_you_mean: any[];
 }
 
-export interface CategoryMap {
+interface CategoryMap {
     VESTRI_BM_APPAREL:   string;
     VESTRI_APPAREL_MENS: string;
 }
 
-export interface FacetCounts {
+interface FacetCounts {
     facet_ranges:  Facet;
     facet_fields:  FacetFields;
     facet_queries: Facet;
 }
 
-export interface FacetFields {
+interface FacetFields {
     category:     Category[];
     sizes:        AgeGroup[];
     brand:        any[];
@@ -49,12 +49,12 @@ export interface FacetFields {
     age_group:    AgeGroup[];
 }
 
-export interface AgeGroup {
+interface AgeGroup {
     count: number;
     name:  string;
 }
 
-export interface Category {
+interface Category {
     count:     number;
     crumb:     string;
     cat_name:  string;

From 2a7177cdc61ec8bab9c39034b864b6f82c801a2f Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 10:06:29 -0700
Subject: [PATCH 58/82] delete unused variable

---
 .../bloomreach.searchfacetnavigation.main.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 4a9761195..6e2918de7 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -81,8 +81,8 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
   constructor(props) {
     super(props);
-    const { productData, currentFacets, categoryMap } = this.props;
-    
+    const { productData, categoryMap } = this.props;
+
     this.state = {
       facetModel: productData,
       currentFacets: BloomreachSearchFacetNavigationMain.turnQueryParamsIntoTree(window.location.search),

From cdbc7ab948e3642e0b930fa1a9585bf1f755f2e2 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 12:50:56 -0700
Subject: [PATCH 59/82] Organize the bloomreach folders better in the util
 folder

---
 .../bloomreach.appheadersearch.main.tsx                       | 2 +-
 .../bloomreach.searchresultsitems.main.tsx                    | 2 +-
 components/src/utils/{ => Bloomreach}/Bloomreach.ts           | 0
 .../src/utils/{ => Bloomreach}/BloomreachSearchService.ts     | 4 ++--
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename components/src/utils/{ => Bloomreach}/Bloomreach.ts (100%)
 rename components/src/utils/{ => Bloomreach}/BloomreachSearchService.ts (96%)

diff --git a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
index b778e04e6..e9710ad8a 100644
--- a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
+++ b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
@@ -20,7 +20,7 @@
  */
 
 import React, { FormEvent, SyntheticEvent } from 'react';
-import { bloomreachSuggestionSearch } from '../utils/BloomreachSearchService';
+import { bloomreachSuggestionSearch } from '../utils/Bloomreach/BloomreachSearchService';
 import './bloomreach.headersearch.main.less';
 
 import { BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState, BloomreachSearchSuggestionResponse, BloomreachSuggestion } from './types/bloomreach.appheadersearch.main';
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index 0ce0f3362..6dbb4b14b 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -21,7 +21,7 @@
 
 import React from 'react';
 import intl from 'react-intl-universal';
-import { bloomreachKeywordSearchLookup } from '../utils/BloomreachSearchService';
+import { bloomreachKeywordSearchLookup } from '../utils/Bloomreach/BloomreachSearchService';
 import BloomreachProductListMain from '../BloomreachProductListMain/bloomreach.productlist.main';
 import BloomreachSearchFacetNavigationMain from '../BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
diff --git a/components/src/utils/Bloomreach.ts b/components/src/utils/Bloomreach/Bloomreach.ts
similarity index 100%
rename from components/src/utils/Bloomreach.ts
rename to components/src/utils/Bloomreach/Bloomreach.ts
diff --git a/components/src/utils/BloomreachSearchService.ts b/components/src/utils/Bloomreach/BloomreachSearchService.ts
similarity index 96%
rename from components/src/utils/BloomreachSearchService.ts
rename to components/src/utils/Bloomreach/BloomreachSearchService.ts
index 4ea128f23..ca7bc63b1 100644
--- a/components/src/utils/BloomreachSearchService.ts
+++ b/components/src/utils/Bloomreach/BloomreachSearchService.ts
@@ -20,9 +20,9 @@
  */
 
 import bloomreachFetch from './Bloomreach';
-import { searchLookup } from './CortexLookup';
+import { searchLookup } from '../CortexLookup';
 
-import { getConfig } from './ConfigProvider';
+import { getConfig } from '../ConfigProvider';
 
 function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch.config.baseUri) {
   const {

From 54e96bd48f22120ced24d46e22928dd09d57e982 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 13:16:42 -0700
Subject: [PATCH 60/82] Reorganize types

---
 .../bloomreach.searchresultsitems.main.d.ts   | 75 +------------------
 .../types/BloomreachSearchService.d.ts        | 72 ++++++++++++++++++
 2 files changed, 74 insertions(+), 73 deletions(-)
 create mode 100644 components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts

diff --git a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
index 94b029acf..7dc6ca4ed 100644
--- a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
+++ b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
@@ -1,3 +1,5 @@
+export { BloomreachKeywordSearchLookupResponse } from '../../utils/Bloomreach/types/BloomreachSearchService';
+
 export interface BloomreachSearchResultsItemsMainProps {
     searchKeywordsProps: {
       [key: string]: any
@@ -16,77 +18,4 @@ export interface BloomreachSearchResultsItemsMainState {
     loadSortedProduct: boolean,
     searchKeywords: any,
     searchQueryParams: any,
-}
-
-export interface BloomreachKeywordSearchLookupResponse {
-    response:     Response;
-    facet_counts: FacetCounts;
-    category_map: CategoryMap;
-    did_you_mean: any[];
-}
-
-interface CategoryMap {
-    VESTRI_BM_APPAREL:   string;
-    VESTRI_APPAREL_MENS: string;
-}
-
-interface FacetCounts {
-    facet_ranges:  Facet;
-    facet_fields:  FacetFields;
-    facet_queries: Facet;
-}
-
-interface FacetFields {
-    category:     Category[];
-    sizes:        AgeGroup[];
-    brand:        any[];
-    colors:       AgeGroup[];
-    color_groups: any[];
-    color:        AgeGroup[];
-    gender:       AgeGroup[];
-    material:     AgeGroup[];
-    apparel_type: AgeGroup[];
-    age_group:    AgeGroup[];
-}
-
-interface AgeGroup {
-    count: number;
-    name:  string;
-}
-
-interface Category {
-    count:     number;
-    crumb:     string;
-    cat_name:  string;
-    parent:    string;
-    cat_id:    string;
-    tree_path: string;
-}
-
-interface Facet {
-}
-
-interface Response {
-    numFound: number;
-    start:    number;
-    docs:     Doc[];
-}
-
-interface Doc {
-    sale_price:       number;
-    price:            number;
-    description:      string;
-    title:            string;
-    url:              string;
-    brand:            string;
-    pid:              string;
-    thumb_image:      string;
-    sale_price_range: number[];
-    price_range:      number[];
-    variants:         Variant[];
-}
-
-interface Variant {
-    sku_swatch_images: string[];
-    sku_thumb_images:  string[];
 }
\ No newline at end of file
diff --git a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
new file mode 100644
index 000000000..fe7448263
--- /dev/null
+++ b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
@@ -0,0 +1,72 @@
+export interface BloomreachKeywordSearchLookupResponse {
+    response:     Response;
+    facet_counts: FacetCounts;
+    category_map: CategoryMap;
+    did_you_mean: any[];
+}
+
+interface CategoryMap {
+    VESTRI_BM_APPAREL:   string;
+    VESTRI_APPAREL_MENS: string;
+}
+
+interface FacetCounts {
+    facet_ranges:  Facet;
+    facet_fields:  FacetFields;
+    facet_queries: Facet;
+}
+
+interface FacetFields {
+    category:     Category[];
+    sizes:        AgeGroup[];
+    brand:        any[];
+    colors:       AgeGroup[];
+    color_groups: any[];
+    color:        AgeGroup[];
+    gender:       AgeGroup[];
+    material:     AgeGroup[];
+    apparel_type: AgeGroup[];
+    age_group:    AgeGroup[];
+}
+
+interface AgeGroup {
+    count: number;
+    name:  string;
+}
+
+interface Category {
+    count:     number;
+    crumb:     string;
+    cat_name:  string;
+    parent:    string;
+    cat_id:    string;
+    tree_path: string;
+}
+
+interface Facet {
+}
+
+interface Response {
+    numFound: number;
+    start:    number;
+    docs:     Doc[];
+}
+
+interface Doc {
+    sale_price:       number;
+    price:            number;
+    description:      string;
+    title:            string;
+    url:              string;
+    brand:            string;
+    pid:              string;
+    thumb_image:      string;
+    sale_price_range: number[];
+    price_range:      number[];
+    variants:         Variant[];
+}
+
+interface Variant {
+    sku_swatch_images: string[];
+    sku_thumb_images:  string[];
+}
\ No newline at end of file

From 2bba5e3d8c765f76b6a0e5f95b0135f9cb47f41b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 13:27:18 -0700
Subject: [PATCH 61/82] Reorganize all bloomreach service types

---
 .../bloomreach.appheadersearch.main.d.ts      | 25 +++----------------
 .../types/BloomreachSearchService.d.ts        | 23 ++++++++++++++++-
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
index 5e7a45c6b..98dbcf8ca 100644
--- a/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
+++ b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
@@ -1,3 +1,5 @@
+export { BloomreachSearchSuggestionResponse } from '../../utils/Bloomreach/BloomreachSearchService'
+
 export interface BloomreachHeaderSearchMainProps {
     isMobileView: boolean,
     isFocused: boolean,
@@ -12,25 +14,4 @@ export interface BloomreachSuggestion {
 export interface BloomreachHeaderSearchMainState {
     keywords: string,
     suggestions: BloomreachSuggestion[],
-}
-
-export interface BloomreachSearchSuggestionResponse {
-  responseHeader: {
-    status: number;
-    QTime: number;
-  }
-  response: {
-    q: string;
-    suggestions: BloomreachSuggestion[];
-    numFound: number;
-    products: [{
-      url: string;
-      // eslint-disable-next-line
-      sale_price: number;
-      pid: string;
-      // eslint-disable-next-line
-      thumb_image: string;
-      title: string;
-    }];
-  };
-}
+}
\ No newline at end of file
diff --git a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
index fe7448263..b4adb885d 100644
--- a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
+++ b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
@@ -69,4 +69,25 @@ interface Doc {
 interface Variant {
     sku_swatch_images: string[];
     sku_thumb_images:  string[];
-}
\ No newline at end of file
+}
+
+export interface BloomreachSearchSuggestionResponse {
+    responseHeader: {
+      status: number;
+      QTime: number;
+    }
+    response: {
+      q: string;
+      suggestions: BloomreachSuggestion[];
+      numFound: number;
+      products: [{
+        url: string;
+        // eslint-disable-next-line
+        sale_price: number;
+        pid: string;
+        // eslint-disable-next-line
+        thumb_image: string;
+        title: string;
+      }];
+    };
+  }

From a7312e193d15bd84e1eac9cf9d316a74844e0718 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 13:34:30 -0700
Subject: [PATCH 62/82] Make types less ambigious

---
 .../bloomreach.productlist.main.tsx                       | 2 +-
 .../types/bloomreach.productlist.main.d.ts                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index eced0dfef..01f4b1608 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -53,7 +53,7 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
   handleCompareToggle(event) {
     const { compareList } = this.state;
     const elementCode:string = event.target.name;
-    const index = compareList.indexOf(elementCode);
+    const index: number = compareList.indexOf(elementCode);
     if (index === -1 && compareList.length > 2) return;
     if (index !== -1) {
       this.setState({
diff --git a/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
index ab10a01a8..fdbebce15 100644
--- a/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
+++ b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
@@ -1,11 +1,11 @@
 export interface BloomreachProductListMainProps {
     productData: [],
-    showCompareButton: any
+    showCompareButton: boolean
   }
   
 export interface BloomreachProductListMainState {
-    isCompare: any,
-    compareLink: any,
-    categoryModel: any,
+    isCompare: boolean,
+    compareLink: string,
+    categoryModel: {[key: string]: any},
     compareList: any,
 }

From 6269c0aabf2567c57e7603bc4403e6c60e592f1c Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 14:13:43 -0700
Subject: [PATCH 63/82] Make types more descriptive for
 bloomreach.searchfacetnavigation

---
 .../bloomreach.searchfacetnavigation.main.d.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts b/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts
index a3ed516b9..1f5dd2203 100644
--- a/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts
+++ b/components/src/BloomreachSearchFacetNavigation/types/bloomreach.searchfacetnavigation.main.d.ts
@@ -1,14 +1,16 @@
+import { Value } from "aws-sdk/clients/s3";
+
 export interface BloomreachSearchFacetNavigationMainProps {
-    productData: any,
-    titleString: any,
-    categoryMap: any,
-    currentFacets: any,
-    onFacetSelected: any,
+    productData: {},
+    titleString: {keywords:string},
+    categoryMap: {},
+    currentFacets: {},
+    onFacetSelected: (queryParams: {}) => void,
     history: any,
 }
 
 export interface BloomreachSearchResultsNavigationMainState {
-    facetModel: any,
-    currentFacets: any,
-    categoryMap: any,
+    facetModel: {},
+    currentFacets: {},
+    categoryMap: {},
 }

From bac69af1f4ba514828b2b6548d52fb955830f557 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 24 Sep 2019 14:16:52 -0700
Subject: [PATCH 64/82] make bloomreach.searchresultsitem types more
 descriptive

---
 .../types/bloomreach.searchresultsitems.main.d.ts               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
index 7dc6ca4ed..62ba61216 100644
--- a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
+++ b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
@@ -17,5 +17,5 @@ export interface BloomreachSearchResultsItemsMainState {
     },
     loadSortedProduct: boolean,
     searchKeywords: any,
-    searchQueryParams: any,
+    searchQueryParams: string,
 }
\ No newline at end of file

From d329a23da5bedea9687dd9850428294bc470d81c Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 10:18:40 -0700
Subject: [PATCH 65/82] Properly uncollapse and collapse facets on reload

---
 .../bloomreach.searchfacetnavigation.main.tsx   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 6e2918de7..d8a11b47e 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -245,6 +245,20 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     return null;
   }
 
+  shouldUncollapseFacet(facetKey, index) {
+    const { currentFacets } = this.state;
+    // uncollapse the first facet if nothing is clicked.
+    if (Object.keys(currentFacets).length == 0 && index == 0) {
+      return true;
+    }
+    // uncollapse facet that has a checkbox.
+    if (currentFacets.hasOwnProperty(facetKey)) {
+      return true;
+    }
+
+    return false
+  }
+
   renderFacets() {
     const { facetModel } = this.state;
 
@@ -252,6 +266,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       if (facetKey && facetModel[facetKey].length > 0) {
         const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');
         const facetCategoryChildren = facetModel[facetKey];
+        
         return (
           <div className="card" key={facetKey} id={`${facetDisplayNameId}_facet`}>
             <div className="card-header">
@@ -262,7 +277,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                 </div>
               </h4>
             </div>
-            <div id={`${facetDisplayNameId}_facet_values`} className={index ? "collapse" : "collapse show"}>
+            <div id={`${facetDisplayNameId}_facet_values`} className={this.shouldUncollapseFacet(facetKey, index) ? "collapse show" : "collapse"}>
               <ul className="list-group list-group-flush">
                 {this.renderFacetSelectors(facetKey, facetCategoryChildren)}
               </ul>

From 0b80672c4cc662eee3a8971d872e81561e5223d2 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 10:52:42 -0700
Subject: [PATCH 66/82] add the count to the facet navigation

---
 .../bloomreach.searchfacetnavigation.main.less       | 12 ++++++++++++
 .../bloomreach.searchfacetnavigation.main.tsx        |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
index 1ee1afc8b..1b1225517 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
@@ -58,6 +58,17 @@
  
        .facet-value {
          padding-left: 12.5px;
+         display: flex;
+
+         .facet-count {
+           flex: right;
+           width: 30%;
+           text-align: right;
+           margin-top:4px;
+           height: 18px;
+           width: 18px;
+           position: relative;
+         }
  
          button {
            color: #777777;
@@ -68,6 +79,7 @@
            padding-right: 0px;
            background:none;
            border:none;
+           
  
            .checkmark {
              top: 4px;
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index d8a11b47e..a69ab4de7 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -216,9 +216,13 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
     if (facetselector) {
       return facetselector.map((choice, i) => {
+        console.log(choice);
+        
         if (choice) {
           const name = choice.name ? choice.name : choice.cat_name;
           const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
+          const count = choice.count ? choice.count : `n/a`;
+          
           if (!this.hasFacetBeenSelected(facetKey, id)) {
             return (
               <div className="list-group-item facet-value" key={id + i}>
@@ -226,6 +230,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                   <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
                 </button>
+                <div className="facet-count">{count}</div>
               </div>
             );
           }
@@ -236,6 +241,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                 <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
               </button>
+              <div className="facet-count">{count}</div>
             </div>
           );
         }

From 7dfec44e340eef9327557e8b913f11f2f81d1463 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 13:36:18 -0700
Subject: [PATCH 67/82] Add counters to the facets

---
 ...bloomreach.searchfacetnavigation.main.less | 21 +++++++++++++------
 .../bloomreach.searchfacetnavigation.main.tsx |  8 +++++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
index 1b1225517..f0ec5bad9 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.less
@@ -59,23 +59,32 @@
        .facet-value {
          padding-left: 12.5px;
          display: flex;
-
+         justify-content: space-between;
          .facet-count {
-           flex: right;
-           width: 30%;
-           text-align: right;
+           text-align: center;
            margin-top:4px;
+           margin-right:12.5px;
            height: 18px;
            width: 18px;
            position: relative;
+           
+           .circle {
+            width:30px;
+            background: @firstBorderColor; 
+            color: @firstComplimentTextColor;
+            -moz-border-radius: 70px; 
+            -webkit-border-radius: 70px; 
+            border-radius: 70px;
+            margin-right: 10px;
+          }
          }
  
          button {
-           color: #777777;
+           color: @firstComplimentTextColor;
            display: inline-block;
            vertical-align: middle;
            position: relative;
-           padding-left: 5px;
+           padding-left: 0px;
            padding-right: 0px;
            background:none;
            border:none;
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index a69ab4de7..38914b701 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -230,7 +230,9 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                   <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
                 </button>
-                <div className="facet-count">{count}</div>
+                <div className="facet-count">
+                  <div className="circle">{count}</div>
+                </div>  
               </div>
             );
           }
@@ -241,7 +243,9 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                 <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
               </button>
-              <div className="facet-count">{count}</div>
+              <div className="facet-count">
+                <div className="circle">{count}</div>
+              </div>
             </div>
           );
         }

From 9bcd8b6bdde37fc728bdfc64255d93786d4c0de3 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 14:04:40 -0700
Subject: [PATCH 68/82] Add modules to export file

---
 components/src/AppHeader/appheader.main.less | 1 -
 components/src/index.ts                      | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/src/AppHeader/appheader.main.less b/components/src/AppHeader/appheader.main.less
index 97e6d24c6..226561c5e 100644
--- a/components/src/AppHeader/appheader.main.less
+++ b/components/src/AppHeader/appheader.main.less
@@ -88,7 +88,6 @@
         vertical-align: top;
 
         .cart-link {
-          position: relative;
           display: block;
           width: 23px;
           padding: 10px;
diff --git a/components/src/index.ts b/components/src/index.ts
index 05d5c122e..e08db7d3a 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -77,6 +77,8 @@ import ChatComponent from './ChatBot/chatbot';
 import BarcodeScanner from './BarcodeScanner/barcodescanner';
 import BloomreachAppHeaderSearchMain from './BloomreachAppHeaderSearch/bloomreach.appheadersearch.main';
 import BloomreachSearchResultsItems from './BloomreachSearchResultsItems/bloomreach.searchresultsitems.main';
+import BloomreachSearchFacetNavigation from './BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main';
+import BloomreachProductListMain from './BloomreachProductListMain/bloomreach.productlist.main';
 
 export {
   init,
@@ -137,4 +139,6 @@ export {
   BarcodeScanner,
   BloomreachAppHeaderSearchMain,
   BloomreachSearchResultsItems,
+  BloomreachSearchFacetNavigation,
+  BloomreachProductListMain
 };

From 258acd4f296b66a59a0180f4cdecc6151ba45b7b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 15:09:41 -0700
Subject: [PATCH 69/82] delete unused lines

---
 .../bloomreach.productlist.main.tsx                         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index 01f4b1608..fe3970c43 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -113,7 +113,6 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
 
   render() {
     const {
-      isCompare,
       compareList,
       compareLink,
     } = this.state;
@@ -124,10 +123,7 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
           <div className="compare-button">
             <button 
             type="button" 
-            className="ep-btn primary top-compare-link" 
-            // onClick={
-            //   (compareList.length <= 1) ? () => this.handleCompare(isCompare) : ''
-            //   }
+            className="ep-btn primary top-compare-link"
             >
               {(compareList.length > 1) ? (
                 <Link className="toggle-compare-link" to={compareLink}>{intl.get('compare-products')}</Link>

From 131eaff84e1216652892eddc72987c9a092b7a2d Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 15:43:45 -0700
Subject: [PATCH 70/82] Fix linter errors

---
 .../bloomreach.productlist.main.tsx           | 14 +++---
 .../bloomreach.searchfacetnavigation.main.tsx | 44 +++++++++----------
 .../bloomreach.searchresultsitems.main.tsx    | 15 +++----
 .../bloomreach.searchresultsitems.main.d.ts   |  2 -
 .../src/ProductList/productlist.main.tsx      |  7 +--
 components/src/index.ts                       |  2 +-
 6 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index fe3970c43..224ac3d7b 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -23,10 +23,9 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import ProductListItemMain from '../ProductListItem/productlistitem.main';
-import { BloomreachProductListMainProps, BloomreachProductListMainState } from './types/bloomreach.productlist.main'
-
-class BloomreachProductListMain extends React.Component<BloomreachProductListMainProps, BloomreachProductListMainState>  {
+import { BloomreachProductListMainProps, BloomreachProductListMainState } from './types/bloomreach.productlist.main';
 
+class BloomreachProductListMain extends React.Component<BloomreachProductListMainProps, BloomreachProductListMainState> {
   constructor(props) {
     super(props);
     const { productData } = this.props;
@@ -70,7 +69,8 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
 
   checkComparison(product) {
     const { compareList, isCompare } = this.state;
-    const code:string = product._code[0].code;
+    const { code } = product._code[0];
+
     const isChecked = compareList.indexOf(code) !== -1;
     if (product._definition && isCompare) {
       return (
@@ -121,9 +121,9 @@ class BloomreachProductListMain extends React.Component<BloomreachProductListMai
       <div className="product-list-container" data-region="categoryBrowseRegion">
         {showCompareButton ? (
           <div className="compare-button">
-            <button 
-            type="button" 
-            className="ep-btn primary top-compare-link"
+            <button
+              type="button"
+              className="ep-btn primary top-compare-link"
             >
               {(compareList.length > 1) ? (
                 <Link className="toggle-compare-link" to={compareLink}>{intl.get('compare-products')}</Link>
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 38914b701..8b8f7deea 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -49,34 +49,34 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     // Ex {colors: ["black"], category: "cat250"}
     // TODO: Make this one large regex expression.
     let filteredQueryParamsArray: string[] = [];
-    
+
     if (decodedQueryParams) {
-        let filteredQueryParams: string = decodedQueryParams.replace('?', '');
-        filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
-        filteredQueryParamsArray = filteredQueryParams.split('fq=');
-        filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
+      let filteredQueryParams: string = decodedQueryParams.replace('?', '');
+      filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
+      filteredQueryParamsArray = filteredQueryParams.split('fq=');
+      filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
     }
 
     const filteredQueryParamsTree = filteredQueryParamsArray.reduce((acc, outerFacetStr:string) => {
       if (outerFacetStr) {
-          const outerFacetArray = outerFacetStr.split(':');
-          const category = outerFacetArray[0];
-          const loFacets = outerFacetArray[1].split('OR');
+        const outerFacetArray = outerFacetStr.split(':');
+        const category = outerFacetArray[0];
+        const loFacets = outerFacetArray[1].split('OR');
 
-          loFacets.forEach((innerFacet) => {
+        loFacets.forEach((innerFacet) => {
           if (acc[category] == null) {
-              acc[category] = [innerFacet];
+            acc[category] = [innerFacet];
           } else {
-              acc[category].push(innerFacet);
+            acc[category].push(innerFacet);
           }
-          });
+        });
       }
 
       return acc;
     }, {});
 
     return filteredQueryParamsTree;
-    
+
   }
 
   constructor(props) {
@@ -114,8 +114,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     this.setState({
       currentFacets,
     },
-    onFacetFinishUpdate
-    );
+    onFacetFinishUpdate);
   }
 
   addFacetFromQueryParamsTree(facetKey, facetName, onFacetFinishUpdate) {
@@ -126,12 +125,11 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     } else {
       currentFacets[facetKey].push(facetName);
     }
-    
+
     this.setState({
       currentFacets,
     },
-    onFacetFinishUpdate
-    );
+    onFacetFinishUpdate);
   }
 
   reconstructTreeIntoQueryParamsString() {
@@ -158,11 +156,11 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     const { history, titleString, onFacetSelected } = this.props;
     const { keywords } = titleString;
 
-    var onFacetFinishUpdate = () => {
+    const onFacetFinishUpdate = () => {
       const facets = this.reconstructTreeIntoQueryParamsString();
       window.history.pushState('', '', `/search/${keywords}${facets}`);
       onFacetSelected(facets);
-    }
+    };
 
     if (this.hasFacetBeenSelected(facetKey, facetId)) {
       this.removeFacetFromQueryParamsTree(facetKey, facetId, onFacetFinishUpdate);
@@ -276,7 +274,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       if (facetKey && facetModel[facetKey].length > 0) {
         const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');
         const facetCategoryChildren = facetModel[facetKey];
-        
+ 
         return (
           <div className="card" key={facetKey} id={`${facetDisplayNameId}_facet`}>
             <div className="card-header">
@@ -287,7 +285,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
                 </div>
               </h4>
             </div>
-            <div id={`${facetDisplayNameId}_facet_values`} className={this.shouldUncollapseFacet(facetKey, index) ? "collapse show" : "collapse"}>
+            <div id={`${facetDisplayNameId}_facet_values`} className={this.shouldUncollapseFacet(facetKey, index) ? 'collapse show' : 'collapse'}>
               <ul className="list-group list-group-flush">
                 {this.renderFacetSelectors(facetKey, facetCategoryChildren)}
               </ul>
@@ -300,7 +298,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   render() {
-    const { facetModel} = this.state;
+    const { facetModel } = this.state;
 
     if (facetModel) {
       return (
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index 6dbb4b14b..a52d8ac3b 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -30,7 +30,6 @@ import { BloomreachKeywordSearchLookupResponse, BloomreachSearchResultsItemsMain
 let Config: IEpConfig | any = {};
 
 class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchResultsItemsMainProps, BloomreachSearchResultsItemsMainState> {
-
   constructor(props) {
     super(props);
     const { searchKeywordsProps } = this.props;
@@ -39,9 +38,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     this.state = {
       isLoading: true,
       searchResultsModel: {},
-      loadSortedProduct: false,
       searchKeywords: searchKeywordsProps,
-      searchQueryParams: null,
     };
 
     this.onFacetSelected = this.onFacetSelected.bind(this);
@@ -64,14 +61,14 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
     });
 
     const searchKeyword = searchKeywordsProps.match.params;
-    const queryParams = (searchQueryParams == undefined) ? searchKeywordsProps.location.search : searchQueryParams;
-    
+    const queryParams = (searchQueryParams === undefined) ? searchKeywordsProps.location.search : searchQueryParams;
+
     const res: BloomreachKeywordSearchLookupResponse = await bloomreachKeywordSearchLookup(searchKeyword, queryParams);
 
     this.setState({
-        isLoading: false,
-        searchResultsModel: res,
-        searchKeywords: searchKeyword,
+      isLoading: false,
+      searchResultsModel: res,
+      searchKeywords: searchKeyword,
     });
   }
 
@@ -119,7 +116,7 @@ class BloomreachSearchResultsItemsMain extends React.Component<BloomreachSearchR
 
             return (
               <div>
-                <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} onFacetSelected={this.onFacetSelected}/>
+                <BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} onFacetSelected={this.onFacetSelected} />
                 <div className="products-container">
                   <BloomreachProductListMain productData={products} showCompareButton={propCompareButton} />
                 </div>
diff --git a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
index 62ba61216..da725b62e 100644
--- a/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
+++ b/components/src/BloomreachSearchResultsItems/types/bloomreach.searchresultsitems.main.d.ts
@@ -15,7 +15,5 @@ export interface BloomreachSearchResultsItemsMainState {
     searchResultsModel: {
       [key: string]: any
     },
-    loadSortedProduct: boolean,
     searchKeywords: any,
-    searchQueryParams: string,
 }
\ No newline at end of file
diff --git a/components/src/ProductList/productlist.main.tsx b/components/src/ProductList/productlist.main.tsx
index 169657018..21c38191a 100644
--- a/components/src/ProductList/productlist.main.tsx
+++ b/components/src/ProductList/productlist.main.tsx
@@ -22,11 +22,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import ProductListItemMain from '../ProductListItem/productlistitem.main';
-
-import './productlist.main.less';
 import { getConfig } from '../utils/ConfigProvider';
+import './productlist.main.less';
 
-let intl = { get: str => str };
+let intl = {
+  get: str => str 
+};
 
 interface ProductListMainProps {
     productData: {
diff --git a/components/src/index.ts b/components/src/index.ts
index e08db7d3a..a115d949b 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -140,5 +140,5 @@ export {
   BloomreachAppHeaderSearchMain,
   BloomreachSearchResultsItems,
   BloomreachSearchFacetNavigation,
-  BloomreachProductListMain
+  BloomreachProductListMain,
 };

From a693f63421cab4744884dd25d36551cac4dbe8dc Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 16:07:17 -0700
Subject: [PATCH 71/82] Fix all linter issues

---
 app/src/containers/SearchResultsPage.tsx      | 10 +++---
 .../bloomreach.appheadersearch.main.tsx       |  7 +++-
 .../bloomreach.productlist.main.tsx           |  2 +-
 .../bloomreach.searchfacetnavigation.main.tsx | 35 +++++++------------
 .../bloomreach.searchresultsitems.main.tsx    |  2 +-
 .../src/ProductList/productlist.main.tsx      |  2 +-
 6 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/app/src/containers/SearchResultsPage.tsx b/app/src/containers/SearchResultsPage.tsx
index a821fd707..9579cb9af 100644
--- a/app/src/containers/SearchResultsPage.tsx
+++ b/app/src/containers/SearchResultsPage.tsx
@@ -43,13 +43,13 @@ function SearchResultsPage(props: RouteComponentProps) {
 
   if (Config.bloomreachSearch.enable) {
     return (
-    <div>
-      {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
-      <BloomreachSearchResultsItems searchKeywordsProps={props} onProductFacetSelection={handleProductFacetSelection} productLinks={productLinks} />
-    </div>
+      <div>
+        {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
+        <BloomreachSearchResultsItems searchKeywordsProps={props} onProductFacetSelection={handleProductFacetSelection} productLinks={productLinks} />
+      </div>
     );
   }
-  
+
   return (
     <div>
       {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
diff --git a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
index e9710ad8a..8921942f7 100644
--- a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
+++ b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
@@ -23,7 +23,12 @@ import React, { FormEvent, SyntheticEvent } from 'react';
 import { bloomreachSuggestionSearch } from '../utils/Bloomreach/BloomreachSearchService';
 import './bloomreach.headersearch.main.less';
 
-import { BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState, BloomreachSearchSuggestionResponse, BloomreachSuggestion } from './types/bloomreach.appheadersearch.main';
+import {
+  BloomreachHeaderSearchMainProps,
+  BloomreachHeaderSearchMainState,
+  BloomreachSearchSuggestionResponse,
+  BloomreachSuggestion,
+} from './types/bloomreach.appheadersearch.main';
 
 const intl = { get: str => str };
 
diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
index 224ac3d7b..8ae0c8b5d 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ * 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
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 8b8f7deea..62771761f 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ * 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
@@ -20,15 +20,11 @@
  */
 
 import React from 'react';
-
 import { withRouter } from 'react-router';
-
-import './bloomreach.searchfacetnavigation.main.less';
-
 import { BloomreachSearchFacetNavigationMainProps, BloomreachSearchResultsNavigationMainState } from './types/bloomreach.searchfacetnavigation.main';
+import './bloomreach.searchfacetnavigation.main.less';
 
 class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSearchFacetNavigationMainProps, BloomreachSearchResultsNavigationMainState> {
-
   static removeSelectedFacet(facetUriStr, facetKey, facetName) {
     const splitFilters = facetUriStr.split('-');
     const facetUriStrElement = `${facetKey}:"${facetName}"`;
@@ -76,7 +72,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     }, {});
 
     return filteredQueryParamsTree;
-
   }
 
   constructor(props) {
@@ -173,7 +168,6 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     const { currentFacets } = this.state;
 
     if (currentFacets[facetKey]) {
-
       return currentFacets[facetKey].some((facet) => {
         if (facet.includes(facetName)) {
           return true;
@@ -188,7 +182,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   // eslint-disable-next-line class-methods-use-this
   generateFacetName(facetKey, name, choice) {
     const { categoryMap } = this.state;
-    
+
     if (choice.crumb) {
       const crumbs = choice.crumb.split('/');
       const crumbNames = crumbs.map((categoryCode) => {
@@ -211,32 +205,29 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   renderFacetSelectors(facetKey, facetselector) {
-
     if (facetselector) {
-      return facetselector.map((choice, i) => {
-        console.log(choice);
-        
+      return facetselector.map((choice) => {
         if (choice) {
           const name = choice.name ? choice.name : choice.cat_name;
           const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
-          const count = choice.count ? choice.count : `n/a`;
-          
+          const count = choice.count ? choice.count : 'n/a';
+
           if (!this.hasFacetBeenSelected(facetKey, id)) {
             return (
-              <div className="list-group-item facet-value" key={id + i}>
+              <div className="list-group-item facet-value" key={id}>
                 <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
                   <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
                 </button>
                 <div className="facet-count">
                   <div className="circle">{count}</div>
-                </div>  
+                </div>
               </div>
             );
           }
 
           return (
-            <div className="list-group-item facet-value" key={id + i}>
+            <div className="list-group-item facet-value" key={id}>
               <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
                 <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}
@@ -256,15 +247,15 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   shouldUncollapseFacet(facetKey, index) {
     const { currentFacets } = this.state;
     // uncollapse the first facet if nothing is clicked.
-    if (Object.keys(currentFacets).length == 0 && index == 0) {
+    if (Object.keys(currentFacets).length === 0 && index === 0) {
       return true;
     }
     // uncollapse facet that has a checkbox.
-    if (currentFacets.hasOwnProperty(facetKey)) {
+    if (Object.prototype.hasOwnProperty.call(currentFacets, facetKey)) {
       return true;
     }
 
-    return false
+    return false;
   }
 
   renderFacets() {
@@ -274,7 +265,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
       if (facetKey && facetModel[facetKey].length > 0) {
         const facetDisplayNameId = facetKey.toLowerCase().replace(/ /g, '_');
         const facetCategoryChildren = facetModel[facetKey];
- 
+
         return (
           <div className="card" key={facetKey} id={`${facetDisplayNameId}_facet`}>
             <div className="card-header">
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
index a52d8ac3b..7d5c1aa8a 100644
--- a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ * 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
diff --git a/components/src/ProductList/productlist.main.tsx b/components/src/ProductList/productlist.main.tsx
index 21c38191a..d113f0ff9 100644
--- a/components/src/ProductList/productlist.main.tsx
+++ b/components/src/ProductList/productlist.main.tsx
@@ -26,7 +26,7 @@ import { getConfig } from '../utils/ConfigProvider';
 import './productlist.main.less';
 
 let intl = {
-  get: str => str 
+  get: str => str,
 };
 
 interface ProductListMainProps {

From 881f9c20afb9442e0e0828f81d24a7500b3adefe Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 25 Sep 2019 16:11:49 -0700
Subject: [PATCH 72/82] delete sensitive br data

---
 app/src/ep.config.json | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index a569bcb58..7c80a0fd1 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -1,7 +1,7 @@
 {
   "cortexApi": {
-    "path": "/cortex",
-    "scope": "vestri",
+    "path": "https://vestri-us.epdemos.com/cortex",
+    "scope": "vestri_b2c",
     "pathForProxy": "http://localhost:9080"
   },
   "supportedLocales": [
@@ -98,25 +98,25 @@
   "bloomreachSearch": {
     "enable": false,
     "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",
+      "baseUri": "",
+      "accountId": "",
+      "authKey": "",
+      "domainKey": "",
+      "requestId": "",
+      "brUID2":"",
+      "url": "",
+      "refurl": "",
       "suggestionConfig": {
-        "baseUri": "http://suggest.dxpapi.com/api/v1/suggest/?",
-        "requestType": "request_type=suggest"
+        "baseUri": "",
+        "requestType": ""
       },
       "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"
+        "requestType": "",
+        "rows": "",
+        "start": "",
+        "facetLimit": "",
+        "fl": "",
+        "searchType": ""
       }
     }
   },

From 22558ade57cbf3e5698afe5612af51ed1fa90668 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 26 Sep 2019 10:42:43 -0700
Subject: [PATCH 73/82] Fix bloomreach.appheadersearch.main broken in storybook

---
 .../bloomreach.appheadersearch.main.tsx                  | 9 ++-------
 .../types/bloomreach.appheadersearch.main.d.ts           | 7 +------
 .../utils/Bloomreach/types/BloomreachSearchService.d.ts  | 5 +++++
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
index 8921942f7..458c5009b 100644
--- a/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
+++ b/components/src/BloomreachAppHeaderSearch/bloomreach.appheadersearch.main.tsx
@@ -22,13 +22,8 @@
 import React, { FormEvent, SyntheticEvent } from 'react';
 import { bloomreachSuggestionSearch } from '../utils/Bloomreach/BloomreachSearchService';
 import './bloomreach.headersearch.main.less';
-
-import {
-  BloomreachHeaderSearchMainProps,
-  BloomreachHeaderSearchMainState,
-  BloomreachSearchSuggestionResponse,
-  BloomreachSuggestion,
-} from './types/bloomreach.appheadersearch.main';
+import { BloomreachSearchSuggestionResponse, BloomreachSuggestion } from '../utils/Bloomreach/types/BloomreachSearchService';
+import { BloomreachHeaderSearchMainProps, BloomreachHeaderSearchMainState } from './types/bloomreach.appheadersearch.main';
 
 const intl = { get: str => str };
 
diff --git a/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
index 98dbcf8ca..0abeef690 100644
--- a/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
+++ b/components/src/BloomreachAppHeaderSearch/types/bloomreach.appheadersearch.main.d.ts
@@ -1,4 +1,4 @@
-export { BloomreachSearchSuggestionResponse } from '../../utils/Bloomreach/BloomreachSearchService'
+import { BloomreachSuggestion } from '../../utils/Bloomreach/types/BloomreachSearchService';
 
 export interface BloomreachHeaderSearchMainProps {
     isMobileView: boolean,
@@ -6,11 +6,6 @@ export interface BloomreachHeaderSearchMainProps {
     onSearchPage?: (...args: any[]) => any,
 }
 
-export interface BloomreachSuggestion {
-  q: string,
-  dq: string,
-}
-
 export interface BloomreachHeaderSearchMainState {
     keywords: string,
     suggestions: BloomreachSuggestion[],
diff --git a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
index b4adb885d..5235b7a15 100644
--- a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
+++ b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
@@ -71,6 +71,11 @@ interface Variant {
     sku_thumb_images:  string[];
 }
 
+export interface BloomreachSuggestion {
+    q: string,
+    dq: string,
+}
+
 export interface BloomreachSearchSuggestionResponse {
     responseHeader: {
       status: number;

From bbc319e68a93f280d6a2c456e98d1a8f25b31f50 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 26 Sep 2019 14:44:29 -0700
Subject: [PATCH 74/82] place bloomreach search results in storybook

---
 .../bloomreach.searchfacetnavigation.main.tsx |  10 +-
 .../bloomreach_getKeywordSearch_response.json | 421 ++++++++++++++++++
 ...mreach.searchresultsitems.main.mock.api.js |  35 ++
 ...mreach.searchresultsitems.main.stories.tsx |  54 +++
 4 files changed, 517 insertions(+), 3 deletions(-)
 create mode 100644 components/src/BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
 create mode 100644 components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.mock.api.js
 create mode 100644 components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.stories.tsx

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 62771761f..27236476d 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -38,7 +38,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     return removeFacetSelection.join('-');
   }
 
-  static turnQueryParamsIntoTree(queryParams) {
+  static turnQueryParamsIntoTree(queryParams: string) {
     const decodedQueryParams = decodeURI(queryParams);
     // Ex. ?fq=colors:"black"OR"red"&fq=category:"cat250"
     // Ex. ['colors: "black"', 'category: "cat250"']
@@ -49,8 +49,12 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     if (decodedQueryParams) {
       let filteredQueryParams: string = decodedQueryParams.replace('?', '');
       filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
-      filteredQueryParamsArray = filteredQueryParams.split('fq=');
-      filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
+      if (filteredQueryParams.includes('fq=')) {
+        filteredQueryParamsArray = filteredQueryParams.split('fq=');
+        filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
+      } else {
+        return {}
+      }
     }
 
     const filteredQueryParamsTree = filteredQueryParamsArray.reduce((acc, outerFacetStr:string) => {
diff --git a/components/src/BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json b/components/src/BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
new file mode 100644
index 000000000..cb85da4c2
--- /dev/null
+++ b/components/src/BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
@@ -0,0 +1,421 @@
+{
+	"response": {
+		"numFound": 17,
+		"start": 0,
+		"docs": [{
+			"sale_price": 35900.0,
+			"price": 35900.0,
+			"description": "Our full size electric/hybrid primum four door sedan gives you the performance of a sports car with the function of a sedan. Perfect for family needing something bigger, but still wanting to feel young at heart. The performance and reliability is such that it's been selected as the de factor electric police car by many governments. It's extended range, options give everything needed for the environmentally conscious service.",
+			"title": "X-Class Full Size Premium Sedan",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "X-Class-S",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png",
+			"sale_price_range": [35900.0, 35900.0],
+			"price_range": [35900.0, 35900.0],
+			"variants": [{
+				"sku_swatch_images": ["10002"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png"]
+			}]
+		}, {
+			"sale_price": 136.98,
+			"price": 136.98,
+			"description": "The X-Ice is Michelin's third-generation Studless Ice & Snow winter tire developed for the drivers of coupes, sedans, family vans and small crossover vehicles that are looking for ice and snow traction along with predictable handling in cold, dry and wet wintry conditions. Meeting Michelin's Green X standard* for low rolling resistance confirms the X-Ice contribution to reducing vehicle fuel consumption and emissions of CO2 gases. The X-Ice is designed to take on ice and snow while it provides lasting winter performance.",
+			"title": "X-ICE X13",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "X-ICE_X13",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png",
+			"sale_price_range": [120.78, 136.98],
+			"price_range": [120.78, 136.98],
+			"variants": [{
+				"sku_swatch_images": ["24288"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png"]
+			}, {
+				"sku_swatch_images": ["21244"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21244.png"]
+			}]
+		}, {
+			"sale_price": 145.9,
+			"price": 145.9,
+			"description": "The iceGUARD iG52c is Yokohama's Studless Ice & Snow winter tire developed for the drivers of compacts, coupes, sedans and vans looking for traction in challenging winter driving conditions. Featuring Yokohama's advanced winter tire technology, iceGUARD iG52c tires are designed to be proficient in cold temperatures on dry, wet, slushy, snow-covered and icy roads.",
+			"title": "Ice Guard IG52C",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "ICE_GUARD_IG52C",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png",
+			"sale_price_range": [143.8, 145.9],
+			"price_range": [143.8, 145.9],
+			"variants": [{
+				"sku_swatch_images": ["48757"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png"]
+			}, {
+				"sku_swatch_images": ["11611"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/11611.png"]
+			}]
+		}, {
+			"sale_price": 290.9,
+			"price": 290.9,
+			"description": "This cable organizer is a must have to ensure you can quickly and easily plug in at the end of a long day and not deal with a tangle of cables",
+			"title": "Cable Organizer",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CABLE_ORGANIZER",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png",
+			"sale_price_range": [125.0, 290.9],
+			"price_range": [125.0, 290.9],
+			"variants": [{
+				"sku_swatch_images": ["65012"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png"]
+			}, {
+				"sku_swatch_images": ["87175"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/87175.png"]
+			}, {
+				"sku_swatch_images": ["16561"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/16561.png"]
+			}, {
+				"sku_swatch_images": ["21179"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21179.png"]
+			}, {
+				"sku_swatch_images": ["56139"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/56139.png"]
+			}, {
+				"sku_swatch_images": ["31079"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/31079.png"]
+			}, {
+				"sku_swatch_images": ["19961"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/19961.png"]
+			}]
+		}, {
+			"sale_price": 134.2,
+			"price": 134.2,
+			"description": "The BluEarth Winter V905 is Yokohama's environmentally conscious Performance Winter / Snow tire developed for the drivers of sports cars, sports coupes, high-performance sedans and performance-tuned SUVs looking for high speed winter driving performance, along with confident traction and handling in dry and wet conditions.",
+			"title": "Bluearth V905",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "BLUEARTH_V905",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png",
+			"sale_price_range": [124.56, 134.2],
+			"price_range": [124.56, 134.2],
+			"variants": [{
+				"sku_swatch_images": ["43449"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png"]
+			}, {
+				"sku_swatch_images": ["45678"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/45678.png"]
+			}]
+		}, {
+			"sale_price": 550.0,
+			"price": 550.0,
+			"description": "Our corded wall charger will hook up to the utility power at a higher amperage and provide faster recharge times, available for single or two car garages",
+			"title": "Corded Wall Charger",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CORDED_CHARGER",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png",
+			"sale_price_range": [550.0, 550.0],
+			"price_range": [550.0, 550.0],
+			"variants": [{
+				"sku_swatch_images": ["52193"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png"]
+			}]
+		}, {
+			"sale_price": 259.0,
+			"price": 259.0,
+			"description": "Our universal connector will allow you to connect and change anywhere in any plug so you never have to worry about where that next charge is coming from",
+			"title": "Universal Mobile Connector",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "UNIVERSAL_MOBILE_CONNECTOR",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png",
+			"sale_price_range": [259.0, 259.0],
+			"price_range": [259.0, 259.0],
+			"variants": [{
+				"sku_swatch_images": ["67728"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png"]
+			}]
+		}, {
+			"sale_price": 395.75,
+			"price": 395.75,
+			"description": "Stream radio online or in your car w/ SiriusXM. Get 150+ streaming music, latest news, sports news & talk radio stations",
+			"title": "XM Radio",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "XM_RADIO_ADDON",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png",
+			"sale_price_range": [15.75, 395.75],
+			"price_range": [15.75, 395.75],
+			"variants": [{
+				"sku_swatch_images": ["32396"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png"]
+			}, {
+				"sku_swatch_images": ["26864"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/26864.png"]
+			}, {
+				"sku_swatch_images": ["97128"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/97128.png"]
+			}]
+		}, {
+			"sale_price": 126.55,
+			"price": 126.55,
+			"description": "The Yokohama AVID ENVigor tire line includes H- and V-speed rated High Performance All-Season radials developed to meet the year-round driving needs of sports car, coupe, sedan and crossover drivers. AVID ENVigor tires are designed to combine performance, comfort and treadlife along with all-season traction, even in occasional light snow-covered roads.",
+			"title": "Avid Envigor",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "AVID_ENVIGOR",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png",
+			"sale_price_range": [115.23, 126.55],
+			"price_range": [115.23, 126.55],
+			"variants": [{
+				"sku_swatch_images": ["23641"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png"]
+			}, {
+				"sku_swatch_images": ["42089"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/42089.png"]
+			}]
+		}, {
+			"sale_price": 1100.0,
+			"price": 1100.0,
+			"description": "Have our wall charger professionally installed, ensuing all local building and electric codes met with once simple package.",
+			"title": "Corded Charger Installation",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CHARGER_INSTALLATION",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png",
+			"sale_price_range": [1100.0, 1100.0],
+			"price_range": [1100.0, 1100.0],
+			"variants": [{
+				"sku_swatch_images": ["53868"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png"]
+			}]
+		}]
+	},
+	"facet_counts": {
+		"facet_ranges": {},
+		"facet_fields": {
+			"category": [{
+				"count": 5,
+				"crumb": "/VPA_CA_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_CA_MCLASS",
+				"tree_path": "/VPA_CA_MCLASS,M-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_MCLASS/VPA_CHARING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "VPA_CA_MCLASS",
+				"cat_id": "VPA_CHARING_AND_ADAPTERS",
+				"tree_path": "/VPA_CA_MCLASS,M-Class/VPA_CHARING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_CA_XCLASS",
+				"tree_path": "/VPA_CA_XCLASS,X-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_XCLASS/VPA_CHARGING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "VPA_CA_XCLASS",
+				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
+				"tree_path": "/VPA_CA_XCLASS,X-Class/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CHARGING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "",
+				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
+				"tree_path": "/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_TA_T50",
+				"cat_name": "T50",
+				"parent": "",
+				"cat_id": "VPA_TA_T50",
+				"tree_path": "/VPA_TA_T50,T50"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_T_MCLASS",
+				"tree_path": "/VPA_T_MCLASS,M-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_MCLASS/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_MCLASS",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_MCLASS,M-Class/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_T50",
+				"cat_name": "T50",
+				"parent": "",
+				"cat_id": "VPA_T_T50",
+				"tree_path": "/VPA_T_T50,T50"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_T_XCLASS",
+				"tree_path": "/VPA_T_XCLASS,X-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_XCLASS/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_XCLASS",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_XCLASS,X-Class/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_VEHICLE_ADDONS",
+				"cat_name": "Vehicle Addons",
+				"parent": "",
+				"cat_id": "VPA_VEHICLE_ADDONS",
+				"tree_path": "/VPA_VEHICLE_ADDONS,Vehicle Addons"
+			}, {
+				"count": 4,
+				"crumb": "/VPA_VA_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_VA_MCLASS",
+				"tree_path": "/VPA_VA_MCLASS,M-Class"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_T_YOKOHAMA",
+				"cat_name": "Yokohama",
+				"parent": "",
+				"cat_id": "VPA_T_YOKOHAMA",
+				"tree_path": "/VPA_T_YOKOHAMA,Yokohama"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_T_YOKOHAMA/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_YOKOHAMA",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_YOKOHAMA,Yokohama/VPA_TIRES,Tires"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_VA_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_VA_XCLASS",
+				"tree_path": "/VPA_VA_XCLASS,X-Class"
+			}, {
+				"count": 2,
+				"crumb": "/VPA_T_MICHELIN",
+				"cat_name": "Michelin",
+				"parent": "",
+				"cat_id": "VPA_T_MICHELIN",
+				"tree_path": "/VPA_T_MICHELIN,Michelin"
+			}, {
+				"count": 2,
+				"crumb": "/VPA_T_MICHELIN/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_MICHELIN",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_MICHELIN,Michelin/VPA_TIRES,Tires"
+			}, {
+				"count": 1,
+				"crumb": "/VPA_VA_B10",
+				"cat_name": "B10",
+				"parent": "",
+				"cat_id": "VPA_VA_B10",
+				"tree_path": "/VPA_VA_B10,B10"
+			}],
+			"sizes": [],
+			"brand": [],
+			"colors": [{
+				"count": 1,
+				"name": "red"
+			}],
+			"color_groups": [],
+			"gender": [{
+				"count": 17,
+				"name": "unisex"
+			}],
+			"age_group": [{
+				"count": 17,
+				"name": "adult"
+			}],
+			"tire_size": [{
+				"count": 2,
+				"name": "215/55R16"
+			}, {
+				"count": 2,
+				"name": "225/50R16"
+			}, {
+				"count": 1,
+				"name": "205/55R16"
+			}],
+			"season": [{
+				"count": 3,
+				"name": "Winter"
+			}, {
+				"count": 2,
+				"name": "All Season"
+			}],
+			"vehicle": [{
+				"count": 3,
+				"name": "M-Class"
+			}, {
+				"count": 2,
+				"name": "X-Class"
+			}],
+			"indoor_outdoor": [{
+				"count": 1,
+				"name": "OUTDOOR"
+			}],
+			"single_dual": [{
+				"count": 1,
+				"name": "DUAL"
+			}],
+			"color": [{
+				"count": 1,
+				"name": "RED"
+			}],
+			"engine": [{
+				"count": 1,
+				"name": "V8"
+			}],
+			"profile": [{
+				"count": 1,
+				"name": "LOW"
+			}],
+			"term": [{
+				"count": 1,
+				"name": "36 MONTH"
+			}]
+		},
+		"facet_queries": {}
+	},
+	"category_map": {
+		"VPA_CHARGING_AND_ADAPTERS": "Charging and Adapters",
+		"VPA_T_YOKOHAMA": "Yokohama",
+		"VPA_TA_T50": "T50",
+		"VPA_VA_MCLASS": "M-Class",
+		"VPA_TIRES": "Tires",
+		"VPA_VA_B10": "B10",
+		"VPA_CA_XCLASS": "X-Class",
+		"VPA_VA_XCLASS": "X-Class",
+		"VPA_T_MCLASS": "M-Class",
+		"VPA_T_XCLASS": "X-Class",
+		"VPA_T_MICHELIN": "Michelin",
+		"VPA_CA_MCLASS": "M-Class",
+		"VPA_T_T50": "T50",
+		"VPA_CHARING_AND_ADAPTERS": "Charging and Adapters",
+		"VPA_VEHICLE_ADDONS": "Vehicle Addons"
+	},
+	"did_you_mean": []
+}
\ No newline at end of file
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.mock.api.js b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.mock.api.js
new file mode 100644
index 000000000..285e825dd
--- /dev/null
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.mock.api.js
@@ -0,0 +1,35 @@
+/**
+ * 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 fetchMock from 'fetch-mock/es5/client';
+import getSearchFromResponse from './MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json';
+
+function mockGetSearchForm(mock) {
+  mock.get(
+    'http://core.dxpapi.com/api/v1/core/?account_id=6226&auth_key=fcao6uq86z58xup0&domain_key=elastic_path&request_id=1239723156472&_br_uid_2=uid%3D8030319374785%3Av%3D11.8%3Ats%3D1536857546532%3Ahc%3D111&url=www.bloomique.com&ref_url=www.bloomique.com&request_type=search&rows=10&start=0&facet.limit=20&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&q=x-class&null&search_type=keyword',
+    getSearchFromResponse,
+  );
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function mockSearchResults() {
+  fetchMock.restore();
+  mockGetSearchForm(fetchMock);
+}
diff --git a/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.stories.tsx b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.stories.tsx
new file mode 100644
index 000000000..f0b5e7a3c
--- /dev/null
+++ b/components/src/BloomreachSearchResultsItems/bloomreach.searchresultsitems.main.stories.tsx
@@ -0,0 +1,54 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { MemoryRouter } from 'react-router';
+
+import BloomreachSearchResultsItemsMain from './bloomreach.searchresultsitems.main';
+
+import { mockSearchResults } from './bloomreach.searchresultsitems.main.mock.api';
+
+function handleProductFacetSelection() {}
+const props = {
+  match: {
+    isExact: true,
+    params: {
+      keywords: 'x-class',
+    }
+  },
+  location: {
+    search: null
+  }
+};
+const productLinks = {};
+
+storiesOf('BloomreachSearchResultsItemsMain', module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  ))
+  .add('BloomreachSearchResultsItemsMain', () => {
+    mockSearchResults();
+    return <BloomreachSearchResultsItemsMain
+      searchKeywordsProps={props}
+      onProductFacetSelection={handleProductFacetSelection}
+      productLinks={productLinks}
+    />;
+  });

From 9fb9dbebd944b211766cc275da0df466a66176ed Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 26 Sep 2019 14:57:14 -0700
Subject: [PATCH 75/82] update key entry for each react component

---
 .../bloomreach.searchfacetnavigation.main.tsx               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 27236476d..ddfa38257 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -210,12 +210,12 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
   renderFacetSelectors(facetKey, facetselector) {
     if (facetselector) {
-      return facetselector.map((choice) => {
+      return facetselector.map((choice, index) => {
         if (choice) {
           const name = choice.name ? choice.name : choice.cat_name;
-          const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
           const count = choice.count ? choice.count : 'n/a';
-
+          const id = choice.cat_id ? `${choice.cat_id}:${index}` : `${name}:${index}`;
+          
           if (!this.hasFacetBeenSelected(facetKey, id)) {
             return (
               <div className="list-group-item facet-value" key={id}>

From e4947ca96545a828cc991a58e1c1ca1c897be08f Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 26 Sep 2019 15:39:42 -0700
Subject: [PATCH 76/82] Place facets into storybook

---
 .../bloomreach_getKeywordSearch_response.json | 421 ++++++++++++++++++
 ...ach.searchfacetnavigation.main.stories.tsx |  41 ++
 .../types/BloomreachSearchService.d.ts        |  22 +-
 3 files changed, 472 insertions(+), 12 deletions(-)
 create mode 100644 components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
 create mode 100644 components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.stories.tsx

diff --git a/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json b/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
new file mode 100644
index 000000000..cb85da4c2
--- /dev/null
+++ b/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
@@ -0,0 +1,421 @@
+{
+	"response": {
+		"numFound": 17,
+		"start": 0,
+		"docs": [{
+			"sale_price": 35900.0,
+			"price": 35900.0,
+			"description": "Our full size electric/hybrid primum four door sedan gives you the performance of a sports car with the function of a sedan. Perfect for family needing something bigger, but still wanting to feel young at heart. The performance and reliability is such that it's been selected as the de factor electric police car by many governments. It's extended range, options give everything needed for the environmentally conscious service.",
+			"title": "X-Class Full Size Premium Sedan",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "X-Class-S",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png",
+			"sale_price_range": [35900.0, 35900.0],
+			"price_range": [35900.0, 35900.0],
+			"variants": [{
+				"sku_swatch_images": ["10002"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png"]
+			}]
+		}, {
+			"sale_price": 136.98,
+			"price": 136.98,
+			"description": "The X-Ice is Michelin's third-generation Studless Ice & Snow winter tire developed for the drivers of coupes, sedans, family vans and small crossover vehicles that are looking for ice and snow traction along with predictable handling in cold, dry and wet wintry conditions. Meeting Michelin's Green X standard* for low rolling resistance confirms the X-Ice contribution to reducing vehicle fuel consumption and emissions of CO2 gases. The X-Ice is designed to take on ice and snow while it provides lasting winter performance.",
+			"title": "X-ICE X13",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "X-ICE_X13",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png",
+			"sale_price_range": [120.78, 136.98],
+			"price_range": [120.78, 136.98],
+			"variants": [{
+				"sku_swatch_images": ["24288"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png"]
+			}, {
+				"sku_swatch_images": ["21244"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21244.png"]
+			}]
+		}, {
+			"sale_price": 145.9,
+			"price": 145.9,
+			"description": "The iceGUARD iG52c is Yokohama's Studless Ice & Snow winter tire developed for the drivers of compacts, coupes, sedans and vans looking for traction in challenging winter driving conditions. Featuring Yokohama's advanced winter tire technology, iceGUARD iG52c tires are designed to be proficient in cold temperatures on dry, wet, slushy, snow-covered and icy roads.",
+			"title": "Ice Guard IG52C",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "ICE_GUARD_IG52C",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png",
+			"sale_price_range": [143.8, 145.9],
+			"price_range": [143.8, 145.9],
+			"variants": [{
+				"sku_swatch_images": ["48757"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png"]
+			}, {
+				"sku_swatch_images": ["11611"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/11611.png"]
+			}]
+		}, {
+			"sale_price": 290.9,
+			"price": 290.9,
+			"description": "This cable organizer is a must have to ensure you can quickly and easily plug in at the end of a long day and not deal with a tangle of cables",
+			"title": "Cable Organizer",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CABLE_ORGANIZER",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png",
+			"sale_price_range": [125.0, 290.9],
+			"price_range": [125.0, 290.9],
+			"variants": [{
+				"sku_swatch_images": ["65012"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png"]
+			}, {
+				"sku_swatch_images": ["87175"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/87175.png"]
+			}, {
+				"sku_swatch_images": ["16561"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/16561.png"]
+			}, {
+				"sku_swatch_images": ["21179"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21179.png"]
+			}, {
+				"sku_swatch_images": ["56139"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/56139.png"]
+			}, {
+				"sku_swatch_images": ["31079"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/31079.png"]
+			}, {
+				"sku_swatch_images": ["19961"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/19961.png"]
+			}]
+		}, {
+			"sale_price": 134.2,
+			"price": 134.2,
+			"description": "The BluEarth Winter V905 is Yokohama's environmentally conscious Performance Winter / Snow tire developed for the drivers of sports cars, sports coupes, high-performance sedans and performance-tuned SUVs looking for high speed winter driving performance, along with confident traction and handling in dry and wet conditions.",
+			"title": "Bluearth V905",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "BLUEARTH_V905",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png",
+			"sale_price_range": [124.56, 134.2],
+			"price_range": [124.56, 134.2],
+			"variants": [{
+				"sku_swatch_images": ["43449"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png"]
+			}, {
+				"sku_swatch_images": ["45678"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/45678.png"]
+			}]
+		}, {
+			"sale_price": 550.0,
+			"price": 550.0,
+			"description": "Our corded wall charger will hook up to the utility power at a higher amperage and provide faster recharge times, available for single or two car garages",
+			"title": "Corded Wall Charger",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CORDED_CHARGER",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png",
+			"sale_price_range": [550.0, 550.0],
+			"price_range": [550.0, 550.0],
+			"variants": [{
+				"sku_swatch_images": ["52193"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png"]
+			}]
+		}, {
+			"sale_price": 259.0,
+			"price": 259.0,
+			"description": "Our universal connector will allow you to connect and change anywhere in any plug so you never have to worry about where that next charge is coming from",
+			"title": "Universal Mobile Connector",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "UNIVERSAL_MOBILE_CONNECTOR",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png",
+			"sale_price_range": [259.0, 259.0],
+			"price_range": [259.0, 259.0],
+			"variants": [{
+				"sku_swatch_images": ["67728"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png"]
+			}]
+		}, {
+			"sale_price": 395.75,
+			"price": 395.75,
+			"description": "Stream radio online or in your car w/ SiriusXM. Get 150+ streaming music, latest news, sports news & talk radio stations",
+			"title": "XM Radio",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "XM_RADIO_ADDON",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png",
+			"sale_price_range": [15.75, 395.75],
+			"price_range": [15.75, 395.75],
+			"variants": [{
+				"sku_swatch_images": ["32396"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png"]
+			}, {
+				"sku_swatch_images": ["26864"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/26864.png"]
+			}, {
+				"sku_swatch_images": ["97128"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/97128.png"]
+			}]
+		}, {
+			"sale_price": 126.55,
+			"price": 126.55,
+			"description": "The Yokohama AVID ENVigor tire line includes H- and V-speed rated High Performance All-Season radials developed to meet the year-round driving needs of sports car, coupe, sedan and crossover drivers. AVID ENVigor tires are designed to combine performance, comfort and treadlife along with all-season traction, even in occasional light snow-covered roads.",
+			"title": "Avid Envigor",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "AVID_ENVIGOR",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png",
+			"sale_price_range": [115.23, 126.55],
+			"price_range": [115.23, 126.55],
+			"variants": [{
+				"sku_swatch_images": ["23641"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png"]
+			}, {
+				"sku_swatch_images": ["42089"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/42089.png"]
+			}]
+		}, {
+			"sale_price": 1100.0,
+			"price": 1100.0,
+			"description": "Have our wall charger professionally installed, ensuing all local building and electric codes met with once simple package.",
+			"title": "Corded Charger Installation",
+			"url": "www.elasticpath.com",
+			"brand": "",
+			"pid": "CHARGER_INSTALLATION",
+			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png",
+			"sale_price_range": [1100.0, 1100.0],
+			"price_range": [1100.0, 1100.0],
+			"variants": [{
+				"sku_swatch_images": ["53868"],
+				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png"]
+			}]
+		}]
+	},
+	"facet_counts": {
+		"facet_ranges": {},
+		"facet_fields": {
+			"category": [{
+				"count": 5,
+				"crumb": "/VPA_CA_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_CA_MCLASS",
+				"tree_path": "/VPA_CA_MCLASS,M-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_MCLASS/VPA_CHARING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "VPA_CA_MCLASS",
+				"cat_id": "VPA_CHARING_AND_ADAPTERS",
+				"tree_path": "/VPA_CA_MCLASS,M-Class/VPA_CHARING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_CA_XCLASS",
+				"tree_path": "/VPA_CA_XCLASS,X-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CA_XCLASS/VPA_CHARGING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "VPA_CA_XCLASS",
+				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
+				"tree_path": "/VPA_CA_XCLASS,X-Class/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_CHARGING_AND_ADAPTERS",
+				"cat_name": "Charging and Adapters",
+				"parent": "",
+				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
+				"tree_path": "/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_TA_T50",
+				"cat_name": "T50",
+				"parent": "",
+				"cat_id": "VPA_TA_T50",
+				"tree_path": "/VPA_TA_T50,T50"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_T_MCLASS",
+				"tree_path": "/VPA_T_MCLASS,M-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_MCLASS/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_MCLASS",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_MCLASS,M-Class/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_T50",
+				"cat_name": "T50",
+				"parent": "",
+				"cat_id": "VPA_T_T50",
+				"tree_path": "/VPA_T_T50,T50"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_T_XCLASS",
+				"tree_path": "/VPA_T_XCLASS,X-Class"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_T_XCLASS/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_XCLASS",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_XCLASS,X-Class/VPA_TIRES,Tires"
+			}, {
+				"count": 5,
+				"crumb": "/VPA_VEHICLE_ADDONS",
+				"cat_name": "Vehicle Addons",
+				"parent": "",
+				"cat_id": "VPA_VEHICLE_ADDONS",
+				"tree_path": "/VPA_VEHICLE_ADDONS,Vehicle Addons"
+			}, {
+				"count": 4,
+				"crumb": "/VPA_VA_MCLASS",
+				"cat_name": "M-Class",
+				"parent": "",
+				"cat_id": "VPA_VA_MCLASS",
+				"tree_path": "/VPA_VA_MCLASS,M-Class"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_T_YOKOHAMA",
+				"cat_name": "Yokohama",
+				"parent": "",
+				"cat_id": "VPA_T_YOKOHAMA",
+				"tree_path": "/VPA_T_YOKOHAMA,Yokohama"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_T_YOKOHAMA/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_YOKOHAMA",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_YOKOHAMA,Yokohama/VPA_TIRES,Tires"
+			}, {
+				"count": 3,
+				"crumb": "/VPA_VA_XCLASS",
+				"cat_name": "X-Class",
+				"parent": "",
+				"cat_id": "VPA_VA_XCLASS",
+				"tree_path": "/VPA_VA_XCLASS,X-Class"
+			}, {
+				"count": 2,
+				"crumb": "/VPA_T_MICHELIN",
+				"cat_name": "Michelin",
+				"parent": "",
+				"cat_id": "VPA_T_MICHELIN",
+				"tree_path": "/VPA_T_MICHELIN,Michelin"
+			}, {
+				"count": 2,
+				"crumb": "/VPA_T_MICHELIN/VPA_TIRES",
+				"cat_name": "Tires",
+				"parent": "VPA_T_MICHELIN",
+				"cat_id": "VPA_TIRES",
+				"tree_path": "/VPA_T_MICHELIN,Michelin/VPA_TIRES,Tires"
+			}, {
+				"count": 1,
+				"crumb": "/VPA_VA_B10",
+				"cat_name": "B10",
+				"parent": "",
+				"cat_id": "VPA_VA_B10",
+				"tree_path": "/VPA_VA_B10,B10"
+			}],
+			"sizes": [],
+			"brand": [],
+			"colors": [{
+				"count": 1,
+				"name": "red"
+			}],
+			"color_groups": [],
+			"gender": [{
+				"count": 17,
+				"name": "unisex"
+			}],
+			"age_group": [{
+				"count": 17,
+				"name": "adult"
+			}],
+			"tire_size": [{
+				"count": 2,
+				"name": "215/55R16"
+			}, {
+				"count": 2,
+				"name": "225/50R16"
+			}, {
+				"count": 1,
+				"name": "205/55R16"
+			}],
+			"season": [{
+				"count": 3,
+				"name": "Winter"
+			}, {
+				"count": 2,
+				"name": "All Season"
+			}],
+			"vehicle": [{
+				"count": 3,
+				"name": "M-Class"
+			}, {
+				"count": 2,
+				"name": "X-Class"
+			}],
+			"indoor_outdoor": [{
+				"count": 1,
+				"name": "OUTDOOR"
+			}],
+			"single_dual": [{
+				"count": 1,
+				"name": "DUAL"
+			}],
+			"color": [{
+				"count": 1,
+				"name": "RED"
+			}],
+			"engine": [{
+				"count": 1,
+				"name": "V8"
+			}],
+			"profile": [{
+				"count": 1,
+				"name": "LOW"
+			}],
+			"term": [{
+				"count": 1,
+				"name": "36 MONTH"
+			}]
+		},
+		"facet_queries": {}
+	},
+	"category_map": {
+		"VPA_CHARGING_AND_ADAPTERS": "Charging and Adapters",
+		"VPA_T_YOKOHAMA": "Yokohama",
+		"VPA_TA_T50": "T50",
+		"VPA_VA_MCLASS": "M-Class",
+		"VPA_TIRES": "Tires",
+		"VPA_VA_B10": "B10",
+		"VPA_CA_XCLASS": "X-Class",
+		"VPA_VA_XCLASS": "X-Class",
+		"VPA_T_MCLASS": "M-Class",
+		"VPA_T_XCLASS": "X-Class",
+		"VPA_T_MICHELIN": "Michelin",
+		"VPA_CA_MCLASS": "M-Class",
+		"VPA_T_T50": "T50",
+		"VPA_CHARING_AND_ADAPTERS": "Charging and Adapters",
+		"VPA_VEHICLE_ADDONS": "Vehicle Addons"
+	},
+	"did_you_mean": []
+}
\ No newline at end of file
diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.stories.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.stories.tsx
new file mode 100644
index 000000000..933240a92
--- /dev/null
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.stories.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { MemoryRouter } from 'react-router';
+
+import getSearchFromResponse from '../BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json';
+import BloomreachSearchFacetNavigationMain from './bloomreach.searchfacetnavigation.main';
+import { BloomreachKeywordSearchLookupResponse } from '../utils/Bloomreach/types/BloomreachSearchService';
+
+function onFacetSelected() {}
+
+storiesOf('BloomreachSearchFacetNavigationMain', module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  ))
+  .add('BloomreachSearchFacetNavigationMain', () => {
+      const searchResultsModel: BloomreachKeywordSearchLookupResponse = getSearchFromResponse;
+      const facets = searchResultsModel.facet_counts ? searchResultsModel.facet_counts.facet_fields : searchResultsModel;
+      const categoryMap = searchResultsModel.category_map;
+      const searchKeywords = 'Title of All listed facets';
+      return (<BloomreachSearchFacetNavigationMain productData={facets} titleString={searchKeywords} categoryMap={categoryMap} onFacetSelected={onFacetSelected} />);
+  });
diff --git a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
index 5235b7a15..761d0e265 100644
--- a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
+++ b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
@@ -6,8 +6,6 @@ export interface BloomreachKeywordSearchLookupResponse {
 }
 
 interface CategoryMap {
-    VESTRI_BM_APPAREL:   string;
-    VESTRI_APPAREL_MENS: string;
 }
 
 interface FacetCounts {
@@ -17,16 +15,16 @@ interface FacetCounts {
 }
 
 interface FacetFields {
-    category:     Category[];
-    sizes:        AgeGroup[];
-    brand:        any[];
-    colors:       AgeGroup[];
-    color_groups: any[];
-    color:        AgeGroup[];
-    gender:       AgeGroup[];
-    material:     AgeGroup[];
-    apparel_type: AgeGroup[];
-    age_group:    AgeGroup[];
+    category?:     Category[];
+    sizes?:        AgeGroup[];
+    brand?:        any[];
+    colors?:       AgeGroup[];
+    color_groups?: any[];
+    color?:        AgeGroup[];
+    gender?:       AgeGroup[];
+    material?:     AgeGroup[];
+    apparel_type?: AgeGroup[];
+    age_group?:    AgeGroup[];
 }
 
 interface AgeGroup {

From 4ecdce35d8412b08073bfbd7f3c40f70d449331b Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Thu, 26 Sep 2019 15:54:00 -0700
Subject: [PATCH 77/82] add bloomreach.productlist.main to storybook

---
 .../bloomreach.productlist.main.stories.tsx   |  37 ++
 .../types/bloomreach.productlist.main.d.ts    |   2 +-
 .../bloomreach_getKeywordSearch_response.json | 421 ------------------
 3 files changed, 38 insertions(+), 422 deletions(-)
 create mode 100644 components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
 delete mode 100644 components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json

diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
new file mode 100644
index 000000000..4ba0420ac
--- /dev/null
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { MemoryRouter } from 'react-router';
+import getSearchFromResponse from '../BloomreachSearchResultsItems/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json';
+import { BloomreachKeywordSearchLookupResponse } from '../utils/Bloomreach/types/BloomreachSearchService';
+import BloomreachProductListMain from './bloomreach.productlist.main';
+
+storiesOf('BloomreachProductListMain', module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  ))
+  .add('BloomreachProductListMain', () => {
+      console.log('bloomreach product list main');
+      const searchResultsModel: BloomreachKeywordSearchLookupResponse = getSearchFromResponse;
+      const products = searchResultsModel.response ? searchResultsModel.response.docs : [];
+      return <BloomreachProductListMain productData={products} showCompareButton={false}/>
+});
diff --git a/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
index fdbebce15..520862e6e 100644
--- a/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
+++ b/components/src/BloomreachProductListMain/types/bloomreach.productlist.main.d.ts
@@ -1,5 +1,5 @@
 export interface BloomreachProductListMainProps {
-    productData: [],
+    productData: any[],
     showCompareButton: boolean
   }
   
diff --git a/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json b/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
deleted file mode 100644
index cb85da4c2..000000000
--- a/components/src/BloomreachSearchFacetNavigation/MockHttpResponses/GET/bloomreach_getKeywordSearch_response.json
+++ /dev/null
@@ -1,421 +0,0 @@
-{
-	"response": {
-		"numFound": 17,
-		"start": 0,
-		"docs": [{
-			"sale_price": 35900.0,
-			"price": 35900.0,
-			"description": "Our full size electric/hybrid primum four door sedan gives you the performance of a sports car with the function of a sedan. Perfect for family needing something bigger, but still wanting to feel young at heart. The performance and reliability is such that it's been selected as the de factor electric police car by many governments. It's extended range, options give everything needed for the environmentally conscious service.",
-			"title": "X-Class Full Size Premium Sedan",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "X-Class-S",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png",
-			"sale_price_range": [35900.0, 35900.0],
-			"price_range": [35900.0, 35900.0],
-			"variants": [{
-				"sku_swatch_images": ["10002"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/10002.png"]
-			}]
-		}, {
-			"sale_price": 136.98,
-			"price": 136.98,
-			"description": "The X-Ice is Michelin's third-generation Studless Ice & Snow winter tire developed for the drivers of coupes, sedans, family vans and small crossover vehicles that are looking for ice and snow traction along with predictable handling in cold, dry and wet wintry conditions. Meeting Michelin's Green X standard* for low rolling resistance confirms the X-Ice contribution to reducing vehicle fuel consumption and emissions of CO2 gases. The X-Ice is designed to take on ice and snow while it provides lasting winter performance.",
-			"title": "X-ICE X13",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "X-ICE_X13",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png",
-			"sale_price_range": [120.78, 136.98],
-			"price_range": [120.78, 136.98],
-			"variants": [{
-				"sku_swatch_images": ["24288"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/24288.png"]
-			}, {
-				"sku_swatch_images": ["21244"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21244.png"]
-			}]
-		}, {
-			"sale_price": 145.9,
-			"price": 145.9,
-			"description": "The iceGUARD iG52c is Yokohama's Studless Ice & Snow winter tire developed for the drivers of compacts, coupes, sedans and vans looking for traction in challenging winter driving conditions. Featuring Yokohama's advanced winter tire technology, iceGUARD iG52c tires are designed to be proficient in cold temperatures on dry, wet, slushy, snow-covered and icy roads.",
-			"title": "Ice Guard IG52C",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "ICE_GUARD_IG52C",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png",
-			"sale_price_range": [143.8, 145.9],
-			"price_range": [143.8, 145.9],
-			"variants": [{
-				"sku_swatch_images": ["48757"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/48757.png"]
-			}, {
-				"sku_swatch_images": ["11611"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/11611.png"]
-			}]
-		}, {
-			"sale_price": 290.9,
-			"price": 290.9,
-			"description": "This cable organizer is a must have to ensure you can quickly and easily plug in at the end of a long day and not deal with a tangle of cables",
-			"title": "Cable Organizer",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "CABLE_ORGANIZER",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png",
-			"sale_price_range": [125.0, 290.9],
-			"price_range": [125.0, 290.9],
-			"variants": [{
-				"sku_swatch_images": ["65012"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/65012.png"]
-			}, {
-				"sku_swatch_images": ["87175"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/87175.png"]
-			}, {
-				"sku_swatch_images": ["16561"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/16561.png"]
-			}, {
-				"sku_swatch_images": ["21179"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/21179.png"]
-			}, {
-				"sku_swatch_images": ["56139"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/56139.png"]
-			}, {
-				"sku_swatch_images": ["31079"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/31079.png"]
-			}, {
-				"sku_swatch_images": ["19961"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/19961.png"]
-			}]
-		}, {
-			"sale_price": 134.2,
-			"price": 134.2,
-			"description": "The BluEarth Winter V905 is Yokohama's environmentally conscious Performance Winter / Snow tire developed for the drivers of sports cars, sports coupes, high-performance sedans and performance-tuned SUVs looking for high speed winter driving performance, along with confident traction and handling in dry and wet conditions.",
-			"title": "Bluearth V905",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "BLUEARTH_V905",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png",
-			"sale_price_range": [124.56, 134.2],
-			"price_range": [124.56, 134.2],
-			"variants": [{
-				"sku_swatch_images": ["43449"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/43449.png"]
-			}, {
-				"sku_swatch_images": ["45678"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/45678.png"]
-			}]
-		}, {
-			"sale_price": 550.0,
-			"price": 550.0,
-			"description": "Our corded wall charger will hook up to the utility power at a higher amperage and provide faster recharge times, available for single or two car garages",
-			"title": "Corded Wall Charger",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "CORDED_CHARGER",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png",
-			"sale_price_range": [550.0, 550.0],
-			"price_range": [550.0, 550.0],
-			"variants": [{
-				"sku_swatch_images": ["52193"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/52193.png"]
-			}]
-		}, {
-			"sale_price": 259.0,
-			"price": 259.0,
-			"description": "Our universal connector will allow you to connect and change anywhere in any plug so you never have to worry about where that next charge is coming from",
-			"title": "Universal Mobile Connector",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "UNIVERSAL_MOBILE_CONNECTOR",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png",
-			"sale_price_range": [259.0, 259.0],
-			"price_range": [259.0, 259.0],
-			"variants": [{
-				"sku_swatch_images": ["67728"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/67728.png"]
-			}]
-		}, {
-			"sale_price": 395.75,
-			"price": 395.75,
-			"description": "Stream radio online or in your car w/ SiriusXM. Get 150+ streaming music, latest news, sports news & talk radio stations",
-			"title": "XM Radio",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "XM_RADIO_ADDON",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png",
-			"sale_price_range": [15.75, 395.75],
-			"price_range": [15.75, 395.75],
-			"variants": [{
-				"sku_swatch_images": ["32396"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/32396.png"]
-			}, {
-				"sku_swatch_images": ["26864"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/26864.png"]
-			}, {
-				"sku_swatch_images": ["97128"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/97128.png"]
-			}]
-		}, {
-			"sale_price": 126.55,
-			"price": 126.55,
-			"description": "The Yokohama AVID ENVigor tire line includes H- and V-speed rated High Performance All-Season radials developed to meet the year-round driving needs of sports car, coupe, sedan and crossover drivers. AVID ENVigor tires are designed to combine performance, comfort and treadlife along with all-season traction, even in occasional light snow-covered roads.",
-			"title": "Avid Envigor",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "AVID_ENVIGOR",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png",
-			"sale_price_range": [115.23, 126.55],
-			"price_range": [115.23, 126.55],
-			"variants": [{
-				"sku_swatch_images": ["23641"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/23641.png"]
-			}, {
-				"sku_swatch_images": ["42089"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/42089.png"]
-			}]
-		}, {
-			"sale_price": 1100.0,
-			"price": 1100.0,
-			"description": "Have our wall charger professionally installed, ensuing all local building and electric codes met with once simple package.",
-			"title": "Corded Charger Installation",
-			"url": "www.elasticpath.com",
-			"brand": "",
-			"pid": "CHARGER_INSTALLATION",
-			"thumb_image": "https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png",
-			"sale_price_range": [1100.0, 1100.0],
-			"price_range": [1100.0, 1100.0],
-			"variants": [{
-				"sku_swatch_images": ["53868"],
-				"sku_thumb_images": ["https://s3-us-west-2.amazonaws.com/elasticpath-demo-images/VESTRI_VIRTUAL/53868.png"]
-			}]
-		}]
-	},
-	"facet_counts": {
-		"facet_ranges": {},
-		"facet_fields": {
-			"category": [{
-				"count": 5,
-				"crumb": "/VPA_CA_MCLASS",
-				"cat_name": "M-Class",
-				"parent": "",
-				"cat_id": "VPA_CA_MCLASS",
-				"tree_path": "/VPA_CA_MCLASS,M-Class"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_CA_MCLASS/VPA_CHARING_AND_ADAPTERS",
-				"cat_name": "Charging and Adapters",
-				"parent": "VPA_CA_MCLASS",
-				"cat_id": "VPA_CHARING_AND_ADAPTERS",
-				"tree_path": "/VPA_CA_MCLASS,M-Class/VPA_CHARING_AND_ADAPTERS,Charging and Adapters"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_CA_XCLASS",
-				"cat_name": "X-Class",
-				"parent": "",
-				"cat_id": "VPA_CA_XCLASS",
-				"tree_path": "/VPA_CA_XCLASS,X-Class"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_CA_XCLASS/VPA_CHARGING_AND_ADAPTERS",
-				"cat_name": "Charging and Adapters",
-				"parent": "VPA_CA_XCLASS",
-				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
-				"tree_path": "/VPA_CA_XCLASS,X-Class/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_CHARGING_AND_ADAPTERS",
-				"cat_name": "Charging and Adapters",
-				"parent": "",
-				"cat_id": "VPA_CHARGING_AND_ADAPTERS",
-				"tree_path": "/VPA_CHARGING_AND_ADAPTERS,Charging and Adapters"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_TA_T50",
-				"cat_name": "T50",
-				"parent": "",
-				"cat_id": "VPA_TA_T50",
-				"tree_path": "/VPA_TA_T50,T50"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_TIRES",
-				"cat_name": "Tires",
-				"parent": "",
-				"cat_id": "VPA_TIRES",
-				"tree_path": "/VPA_TIRES,Tires"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_T_MCLASS",
-				"cat_name": "M-Class",
-				"parent": "",
-				"cat_id": "VPA_T_MCLASS",
-				"tree_path": "/VPA_T_MCLASS,M-Class"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_T_MCLASS/VPA_TIRES",
-				"cat_name": "Tires",
-				"parent": "VPA_T_MCLASS",
-				"cat_id": "VPA_TIRES",
-				"tree_path": "/VPA_T_MCLASS,M-Class/VPA_TIRES,Tires"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_T_T50",
-				"cat_name": "T50",
-				"parent": "",
-				"cat_id": "VPA_T_T50",
-				"tree_path": "/VPA_T_T50,T50"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_T_XCLASS",
-				"cat_name": "X-Class",
-				"parent": "",
-				"cat_id": "VPA_T_XCLASS",
-				"tree_path": "/VPA_T_XCLASS,X-Class"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_T_XCLASS/VPA_TIRES",
-				"cat_name": "Tires",
-				"parent": "VPA_T_XCLASS",
-				"cat_id": "VPA_TIRES",
-				"tree_path": "/VPA_T_XCLASS,X-Class/VPA_TIRES,Tires"
-			}, {
-				"count": 5,
-				"crumb": "/VPA_VEHICLE_ADDONS",
-				"cat_name": "Vehicle Addons",
-				"parent": "",
-				"cat_id": "VPA_VEHICLE_ADDONS",
-				"tree_path": "/VPA_VEHICLE_ADDONS,Vehicle Addons"
-			}, {
-				"count": 4,
-				"crumb": "/VPA_VA_MCLASS",
-				"cat_name": "M-Class",
-				"parent": "",
-				"cat_id": "VPA_VA_MCLASS",
-				"tree_path": "/VPA_VA_MCLASS,M-Class"
-			}, {
-				"count": 3,
-				"crumb": "/VPA_T_YOKOHAMA",
-				"cat_name": "Yokohama",
-				"parent": "",
-				"cat_id": "VPA_T_YOKOHAMA",
-				"tree_path": "/VPA_T_YOKOHAMA,Yokohama"
-			}, {
-				"count": 3,
-				"crumb": "/VPA_T_YOKOHAMA/VPA_TIRES",
-				"cat_name": "Tires",
-				"parent": "VPA_T_YOKOHAMA",
-				"cat_id": "VPA_TIRES",
-				"tree_path": "/VPA_T_YOKOHAMA,Yokohama/VPA_TIRES,Tires"
-			}, {
-				"count": 3,
-				"crumb": "/VPA_VA_XCLASS",
-				"cat_name": "X-Class",
-				"parent": "",
-				"cat_id": "VPA_VA_XCLASS",
-				"tree_path": "/VPA_VA_XCLASS,X-Class"
-			}, {
-				"count": 2,
-				"crumb": "/VPA_T_MICHELIN",
-				"cat_name": "Michelin",
-				"parent": "",
-				"cat_id": "VPA_T_MICHELIN",
-				"tree_path": "/VPA_T_MICHELIN,Michelin"
-			}, {
-				"count": 2,
-				"crumb": "/VPA_T_MICHELIN/VPA_TIRES",
-				"cat_name": "Tires",
-				"parent": "VPA_T_MICHELIN",
-				"cat_id": "VPA_TIRES",
-				"tree_path": "/VPA_T_MICHELIN,Michelin/VPA_TIRES,Tires"
-			}, {
-				"count": 1,
-				"crumb": "/VPA_VA_B10",
-				"cat_name": "B10",
-				"parent": "",
-				"cat_id": "VPA_VA_B10",
-				"tree_path": "/VPA_VA_B10,B10"
-			}],
-			"sizes": [],
-			"brand": [],
-			"colors": [{
-				"count": 1,
-				"name": "red"
-			}],
-			"color_groups": [],
-			"gender": [{
-				"count": 17,
-				"name": "unisex"
-			}],
-			"age_group": [{
-				"count": 17,
-				"name": "adult"
-			}],
-			"tire_size": [{
-				"count": 2,
-				"name": "215/55R16"
-			}, {
-				"count": 2,
-				"name": "225/50R16"
-			}, {
-				"count": 1,
-				"name": "205/55R16"
-			}],
-			"season": [{
-				"count": 3,
-				"name": "Winter"
-			}, {
-				"count": 2,
-				"name": "All Season"
-			}],
-			"vehicle": [{
-				"count": 3,
-				"name": "M-Class"
-			}, {
-				"count": 2,
-				"name": "X-Class"
-			}],
-			"indoor_outdoor": [{
-				"count": 1,
-				"name": "OUTDOOR"
-			}],
-			"single_dual": [{
-				"count": 1,
-				"name": "DUAL"
-			}],
-			"color": [{
-				"count": 1,
-				"name": "RED"
-			}],
-			"engine": [{
-				"count": 1,
-				"name": "V8"
-			}],
-			"profile": [{
-				"count": 1,
-				"name": "LOW"
-			}],
-			"term": [{
-				"count": 1,
-				"name": "36 MONTH"
-			}]
-		},
-		"facet_queries": {}
-	},
-	"category_map": {
-		"VPA_CHARGING_AND_ADAPTERS": "Charging and Adapters",
-		"VPA_T_YOKOHAMA": "Yokohama",
-		"VPA_TA_T50": "T50",
-		"VPA_VA_MCLASS": "M-Class",
-		"VPA_TIRES": "Tires",
-		"VPA_VA_B10": "B10",
-		"VPA_CA_XCLASS": "X-Class",
-		"VPA_VA_XCLASS": "X-Class",
-		"VPA_T_MCLASS": "M-Class",
-		"VPA_T_XCLASS": "X-Class",
-		"VPA_T_MICHELIN": "Michelin",
-		"VPA_CA_MCLASS": "M-Class",
-		"VPA_T_T50": "T50",
-		"VPA_CHARING_AND_ADAPTERS": "Charging and Adapters",
-		"VPA_VEHICLE_ADDONS": "Vehicle Addons"
-	},
-	"did_you_mean": []
-}
\ No newline at end of file

From 099d0c6a340e165caf9a14f2ee859cdc415cdc80 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 1 Oct 2019 11:14:45 -0700
Subject: [PATCH 78/82] Fix issue with parsing 'OR'

---
 .../bloomreach.searchfacetnavigation.main.tsx | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index ddfa38257..a781e37ff 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -39,16 +39,16 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
   }
 
   static turnQueryParamsIntoTree(queryParams: string) {
-    const decodedQueryParams = decodeURI(queryParams);
+    // Turns the url query parameter into object to represent state
     // Ex. ?fq=colors:"black"OR"red"&fq=category:"cat250"
     // Ex. ['colors: "black"', 'category: "cat250"']
     // Ex {colors: ["black"], category: "cat250"}
-    // TODO: Make this one large regex expression.
+    const decodedQueryParams = decodeURI(queryParams);
+    
     let filteredQueryParamsArray: string[] = [];
-
+    
     if (decodedQueryParams) {
       let filteredQueryParams: string = decodedQueryParams.replace('?', '');
-      filteredQueryParams = filteredQueryParams.replace(/['"]+/g, '');
       if (filteredQueryParams.includes('fq=')) {
         filteredQueryParamsArray = filteredQueryParams.split('fq=');
         filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
@@ -56,25 +56,25 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
         return {}
       }
     }
-
+    
     const filteredQueryParamsTree = filteredQueryParamsArray.reduce((acc, outerFacetStr:string) => {
       if (outerFacetStr) {
         const outerFacetArray = outerFacetStr.split(':');
         const category = outerFacetArray[0];
-        const loFacets = outerFacetArray[1].split('OR');
-
+        const loFacets = outerFacetArray[1].split('"OR"');
         loFacets.forEach((innerFacet) => {
+          const innerFacetWithoutQuotes = innerFacet.replace(/['"]+/g, '');
           if (acc[category] == null) {
-            acc[category] = [innerFacet];
+            acc[category] = [innerFacetWithoutQuotes];
           } else {
-            acc[category].push(innerFacet);
+            acc[category].push(innerFacetWithoutQuotes);
           }
         });
       }
 
       return acc;
     }, {});
-
+    
     return filteredQueryParamsTree;
   }
 
@@ -214,11 +214,12 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
         if (choice) {
           const name = choice.name ? choice.name : choice.cat_name;
           const count = choice.count ? choice.count : 'n/a';
-          const id = choice.cat_id ? `${choice.cat_id}:${index}` : `${name}:${index}`;
-          
+          const domKey = choice.cat_id ? `${choice.cat_id}:${index}` : `${name}:${index}`;
+          const id = choice.cat_id ? `${choice.cat_id}` : `${name}`;
+
           if (!this.hasFacetBeenSelected(facetKey, id)) {
             return (
-              <div className="list-group-item facet-value" key={id}>
+              <div className="list-group-item facet-value" key={domKey}>
                 <button type="button" className="form-check-label choice" onClick={() => this.handleFacetSelection(facetKey, id)}>
                   <span className="checkmark choice" />
                   {`${this.generateFacetName(facetKey, name, choice)}`}
@@ -231,7 +232,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
           }
 
           return (
-            <div className="list-group-item facet-value" key={id}>
+            <div className="list-group-item facet-value" key={domKey}>
               <button type="button" className="form-check-label chosen" onClick={() => this.handleFacetSelection(facetKey, id)}>
                 <span className="checkmark chosen" />
                 {`${this.generateFacetName(facetKey, name, choice)}`}

From 3decff388e9604c6fb4c24e9b9cc1285ab4fdc22 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 1 Oct 2019 16:20:12 -0700
Subject: [PATCH 79/82] fix linting issues

---
 .../bloomreach.searchfacetnavigation.main.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index a781e37ff..036f5df08 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -44,9 +44,9 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     // Ex. ['colors: "black"', 'category: "cat250"']
     // Ex {colors: ["black"], category: "cat250"}
     const decodedQueryParams = decodeURI(queryParams);
-    
+
     let filteredQueryParamsArray: string[] = [];
-    
+
     if (decodedQueryParams) {
       let filteredQueryParams: string = decodedQueryParams.replace('?', '');
       if (filteredQueryParams.includes('fq=')) {

From f2c8be0f5917dd7f0a1368e45eedd53291dbf823 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Tue, 1 Oct 2019 16:22:05 -0700
Subject: [PATCH 80/82] Fix linter errors

---
 .../bloomreach.searchfacetnavigation.main.tsx             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
index 036f5df08..966899de6 100644
--- a/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
+++ b/components/src/BloomreachSearchFacetNavigation/bloomreach.searchfacetnavigation.main.tsx
@@ -48,15 +48,15 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
     let filteredQueryParamsArray: string[] = [];
 
     if (decodedQueryParams) {
-      let filteredQueryParams: string = decodedQueryParams.replace('?', '');
+      const filteredQueryParams: string = decodedQueryParams.replace('?', '');
       if (filteredQueryParams.includes('fq=')) {
         filteredQueryParamsArray = filteredQueryParams.split('fq=');
         filteredQueryParamsArray = filteredQueryParamsArray.map(params => params.replace('&', ''));
       } else {
-        return {}
+        return {};
       }
     }
-    
+
     const filteredQueryParamsTree = filteredQueryParamsArray.reduce((acc, outerFacetStr:string) => {
       if (outerFacetStr) {
         const outerFacetArray = outerFacetStr.split(':');
@@ -74,7 +74,7 @@ class BloomreachSearchFacetNavigationMain extends React.Component<BloomreachSear
 
       return acc;
     }, {});
-    
+
     return filteredQueryParamsTree;
   }
 

From a9c446db293aff429424bf0eacb1a2e6ed2d4047 Mon Sep 17 00:00:00 2001
From: Alvin <alvin.chan@elasticpath.com>
Date: Wed, 2 Oct 2019 11:03:17 -0700
Subject: [PATCH 81/82] Change naming of configs and the places that use them

---
 app/src/containers/SearchResultsPage.tsx      |  2 +-
 app/src/ep.config.json                        | 33 ++++++++++---------
 components/src/AppHeader/appheader.main.tsx   |  4 +--
 .../Bloomreach/BloomreachSearchService.ts     |  8 ++---
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/app/src/containers/SearchResultsPage.tsx b/app/src/containers/SearchResultsPage.tsx
index 9579cb9af..b6cc9ab6a 100644
--- a/app/src/containers/SearchResultsPage.tsx
+++ b/app/src/containers/SearchResultsPage.tsx
@@ -41,7 +41,7 @@ function SearchResultsPage(props: RouteComponentProps) {
     productCategory: '/category',
   };
 
-  if (Config.bloomreachSearch.enable) {
+  if (Config.bloomreach.keywordSearch.enable) {
     return (
       <div>
         {/* eslint-disable-next-line react/destructuring-assignment,react/prop-types */}
diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index 7c80a0fd1..f9718345e 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -95,9 +95,8 @@
     "pageId": "<PAGE_ID>",
     "applicationId": "<APP_ID>"
   },
-  "bloomreachSearch": {
-    "enable": false,
-    "config": {
+  "bloomreach": {
+    "env": {
       "baseUri": "",
       "accountId": "",
       "authKey": "",
@@ -105,19 +104,21 @@
       "requestId": "",
       "brUID2":"",
       "url": "",
-      "refurl": "",
-      "suggestionConfig": {
-        "baseUri": "",
-        "requestType": ""
-      },
-      "keywordSearchConfig": {
-        "requestType": "",
-        "rows": "",
-        "start": "",
-        "facetLimit": "",
-        "fl": "",
-        "searchType": ""
-      }
+      "refurl": ""
+    },
+    "keywordSearch": {
+      "enable": true,
+      "requestType": "",
+      "rows": "",
+      "start": "",
+      "facetLimit": "",
+      "fl": "",
+      "searchType": ""
+    },
+    "suggestions": {
+      "enable": true,
+      "baseUri": "",
+      "requestType": ""
     }
   },
   "GDPR": {
diff --git a/components/src/AppHeader/appheader.main.tsx b/components/src/AppHeader/appheader.main.tsx
index d1c519219..e75283076 100644
--- a/components/src/AppHeader/appheader.main.tsx
+++ b/components/src/AppHeader/appheader.main.tsx
@@ -256,7 +256,7 @@ class AppHeaderMain extends React.Component<AppHeaderMainProps, AppHeaderMainSta
 
           <div className="icons-header-container">
             <div className="search-container">
-              {Config.bloomreachSearch.enable ? (
+              {Config.bloomreach.suggestions.enable ? (
                 <BloomreachAppHeaderSearchMain isMobileView={false} onSearchPage={onSearchPage} />
               ) : (
                 <AppHeaderSearchMain isMobileView={false} onSearchPage={onSearchPage} />
@@ -333,7 +333,7 @@ class AppHeaderMain extends React.Component<AppHeaderMainProps, AppHeaderMainSta
 
         <div className="collapsable-container collapse collapsed">
           <div className="search-container">
-            {Config.bloomreachSearch.enable ? (
+            {Config.bloomreach.suggestions.enable ? (
               <BloomreachAppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />
             ) : (
               <AppHeaderSearchMain isMobileView isFocused={isSearchFocused} onSearchPage={onSearchPage} />
diff --git a/components/src/utils/Bloomreach/BloomreachSearchService.ts b/components/src/utils/Bloomreach/BloomreachSearchService.ts
index ca7bc63b1..c14644e4f 100644
--- a/components/src/utils/Bloomreach/BloomreachSearchService.ts
+++ b/components/src/utils/Bloomreach/BloomreachSearchService.ts
@@ -24,7 +24,7 @@ import { searchLookup } from '../CortexLookup';
 
 import { getConfig } from '../ConfigProvider';
 
-function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch.config.baseUri) {
+function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreach.env.baseUri) {
   const {
     accountId,
     authKey,
@@ -33,7 +33,7 @@ function generateBaseBloomreachUrl(baseUri = getConfig().config.bloomreachSearch
     brUID2,
     url,
     refurl,
-  } = getConfig().config.bloomreachSearch.config;
+  } = getConfig().config.bloomreach.env;
   return `${baseUri}${accountId}&${authKey}&${domainKey}&${requestId}&${brUID2}&${url}&${refurl}`;
 }
 
@@ -47,7 +47,7 @@ export function bloomreachKeywordSearchLookup<T>(searchKeyword, searchQueryParam
     facetLimit,
     fl,
     searchType,
-  } = getConfig().config.bloomreachSearch.config.keywordSearchConfig;
+  } = getConfig().config.bloomreach.keywordSearch;
   const q = `q=${searchKeyword.keywords}`;
 
   const fq = searchQueryParams ? `${searchQueryParams}`.replace('?', '') : null;
@@ -78,7 +78,7 @@ export function bloomreachSuggestionSearch<T>(keyword): Promise<T> {
   const {
     baseUri,
     requestType,
-  } = getConfig().config.bloomreachSearch.config.suggestionConfig;
+  } = getConfig().config.bloomreach.suggestions;
 
   const baseUrl = generateBaseBloomreachUrl(baseUri);
   const q = `q=${keyword}`;

From 808afe2e0a1c3d2cfc181a32f556e577947ce84f Mon Sep 17 00:00:00 2001
From: aChanEP <Alvin.chan@elasticpath.com>
Date: Fri, 4 Oct 2019 12:39:55 -0700
Subject: [PATCH 82/82] Feature/bloomreach integration mlt (#433)

* Able to get mlt products showing up in products display page

* use async await pattern

* Adjust the name of mlt function

* get rid of prop types

* fix typescript errors

* Move state and props into new file

* Able to place bloomreach product recommendations into storybook

* Add product recommendation configs

* add a new line

* adjust files to use new configurations properly

* Change the naming of the component

* change the padding of the title

* Fix the linking to product recommendations

* revert settings to false
---
 app/src/ep.config.json                        |  12 +-
 app/src/localization/en-CA.json               |   3 +-
 app/src/localization/fr-FR.json               |   3 +-
 .../bloomreach.productlist.main.stories.tsx   |   1 -
 .../GET/cortex_itemLookup_response.json       | 529 ++++++++++++++++++
 ...ch.productrecommendations.main.stories.tsx |  34 ++
 ...bloomreach.productrecommendations.main.tsx | 108 ++++
 ...loomreach.productrecommendations.main.d.ts |   9 +
 .../productdisplayitem.main.tsx               |  11 +-
 .../productrecommendations.main.less          |   3 +-
 .../Bloomreach/BloomreachSearchService.ts     |  36 ++
 .../types/BloomreachSearchService.d.ts        |  56 +-
 12 files changed, 772 insertions(+), 33 deletions(-)
 create mode 100644 components/src/BloomreachProductRecommendationsDisplayMain/MockHttpResponses/GET/cortex_itemLookup_response.json
 create mode 100644 components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.stories.tsx
 create mode 100644 components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.tsx
 create mode 100644 components/src/BloomreachProductRecommendationsDisplayMain/types/bloomreach.productrecommendations.main.d.ts

diff --git a/app/src/ep.config.json b/app/src/ep.config.json
index f9718345e..932ef1bae 100644
--- a/app/src/ep.config.json
+++ b/app/src/ep.config.json
@@ -107,7 +107,7 @@
       "refurl": ""
     },
     "keywordSearch": {
-      "enable": true,
+      "enable": false,
       "requestType": "",
       "rows": "",
       "start": "",
@@ -116,9 +116,17 @@
       "searchType": ""
     },
     "suggestions": {
-      "enable": true,
+      "enable": false,
       "baseUri": "",
       "requestType": ""
+    },
+    "moreLikeThis": {
+      "enable": true,
+      "requestType": "",
+      "rows": "",
+      "start": "",
+      "facetLimit": "",
+      "fl": ""
     }
   },
   "GDPR": {
diff --git a/app/src/localization/en-CA.json b/app/src/localization/en-CA.json
index 3546d5648..09ce99454 100644
--- a/app/src/localization/en-CA.json
+++ b/app/src/localization/en-CA.json
@@ -325,5 +325,6 @@
   "app-version": "App version",
   "components-version": "Components version",
   "barcode-scanner": "Barcode scanner",
-  "scan-barcode": "Scan Barcode"
+  "scan-barcode": "Scan Barcode",
+  "more-like-this": "More Like This"
 }
diff --git a/app/src/localization/fr-FR.json b/app/src/localization/fr-FR.json
index 7bf9e6534..152c2aaf6 100644
--- a/app/src/localization/fr-FR.json
+++ b/app/src/localization/fr-FR.json
@@ -326,5 +326,6 @@
   "app-version": "A-p-p- -v-e-r-s-i-o-n",
   "components-version": "C-o-m-p-o-n-e-n-t-s- -v-e-r-s-i-o-n",
   "barcode-scanner": "B-a-r-c-o-d-e- -s-c-a-n-n-e-r",
-  "scan-barcode": "S-c-a-n- -B-a-r-c-o-d-e"
+  "scan-barcode": "S-c-a-n- -B-a-r-c-o-d-e",
+  "more-like-this": "M-O-R-E- -L-I-K-E- -T-H-I-S"
 }
diff --git a/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx b/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
index 4ba0420ac..6ca174107 100644
--- a/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
+++ b/components/src/BloomreachProductListMain/bloomreach.productlist.main.stories.tsx
@@ -30,7 +30,6 @@ storiesOf('BloomreachProductListMain', module)
     <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
   ))
   .add('BloomreachProductListMain', () => {
-      console.log('bloomreach product list main');
       const searchResultsModel: BloomreachKeywordSearchLookupResponse = getSearchFromResponse;
       const products = searchResultsModel.response ? searchResultsModel.response.docs : [];
       return <BloomreachProductListMain productData={products} showCompareButton={false}/>
diff --git a/components/src/BloomreachProductRecommendationsDisplayMain/MockHttpResponses/GET/cortex_itemLookup_response.json b/components/src/BloomreachProductRecommendationsDisplayMain/MockHttpResponses/GET/cortex_itemLookup_response.json
new file mode 100644
index 000000000..bfbbc7f88
--- /dev/null
+++ b/components/src/BloomreachProductRecommendationsDisplayMain/MockHttpResponses/GET/cortex_itemLookup_response.json
@@ -0,0 +1,529 @@
+{
+	"self": {
+		"type": "items.item",
+		"uri": "/items/vestri_b2c/qgqvhjjsgezdina=?zoom=addtocartform,addtowishlistform,availability,code,definition,definition:assets:element,definition:components,definition:components:element,definition:components:element:code,definition:components:element:standaloneitem,definition:components:element:standaloneitem:availability,definition:components:element:standaloneitem:code,definition:components:element:standaloneitem:definition,definition:options:element,definition:options:element:selector:choice,definition:options:element:selector:choice:description,definition:options:element:selector:choice:selectaction,definition:options:element:selector:choice:selector,definition:options:element:selector:chosen,definition:options:element:selector:chosen:description,definition:options:element:selector:chosen:selectaction,definition:options:element:selector:chosen:selector,definition:options:element:value,price,rate,recommendations,recommendations:crosssell,recommendations:crosssell:element:availability,recommendations:crosssell:element:code,recommendations:crosssell:element:definition,recommendations:crosssell:element:price,recommendations:recommendation,recommendations:recommendation:element:availability,recommendations:recommendation:element:code,recommendations:recommendation:element:definition,recommendations:recommendation:element:price,recommendations:replacement,recommendations:replacement:element:availability,recommendations:replacement:element:code,recommendations:replacement:element:definition,recommendations:replacement:element:price,recommendations:upsell,recommendations:upsell:element:availability,recommendations:upsell:element:code,recommendations:upsell:element:definition,recommendations:upsell:element:price,recommendations:warranty,recommendations:warranty:element:availability,recommendations:warranty:element:code,recommendations:warranty:element:definition,recommendations:warranty:element:price",
+		"href": "https://vestri-us.epdemos.com/cortex/items/vestri_b2c/qgqvhjjsgezdina=?zoom=addtocartform,addtowishlistform,availability,code,definition,definition:assets:element,definition:components,definition:components:element,definition:components:element:code,definition:components:element:standaloneitem,definition:components:element:standaloneitem:availability,definition:components:element:standaloneitem:code,definition:components:element:standaloneitem:definition,definition:options:element,definition:options:element:selector:choice,definition:options:element:selector:choice:description,definition:options:element:selector:choice:selectaction,definition:options:element:selector:choice:selector,definition:options:element:selector:chosen,definition:options:element:selector:chosen:description,definition:options:element:selector:chosen:selectaction,definition:options:element:selector:chosen:selector,definition:options:element:value,price,rate,recommendations,recommendations:crosssell,recommendations:crosssell:element:availability,recommendations:crosssell:element:code,recommendations:crosssell:element:definition,recommendations:crosssell:element:price,recommendations:recommendation,recommendations:recommendation:element:availability,recommendations:recommendation:element:code,recommendations:recommendation:element:definition,recommendations:recommendation:element:price,recommendations:replacement,recommendations:replacement:element:availability,recommendations:replacement:element:code,recommendations:replacement:element:definition,recommendations:replacement:element:price,recommendations:upsell,recommendations:upsell:element:availability,recommendations:upsell:element:code,recommendations:upsell:element:definition,recommendations:upsell:element:price,recommendations:warranty,recommendations:warranty:element:availability,recommendations:warranty:element:code,recommendations:warranty:element:definition,recommendations:warranty:element:price"
+	},
+	"messages": [],
+	"links": [{
+		"rel": "availability",
+		"rev": "item",
+		"type": "availabilities.availability-for-item",
+		"uri": "/availabilities/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/availabilities/items/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "addtocartform",
+		"type": "carts.add-to-default-cart-form",
+		"uri": "/carts/items/vestri_b2c/qgqvhjjsgezdina=/form",
+		"href": "https://vestri-us.epdemos.com/cortex/carts/items/vestri_b2c/qgqvhjjsgezdina=/form"
+	}, {
+		"rel": "cartmemberships",
+		"type": "carts.read-cart-memberships",
+		"uri": "/carts/memberships/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/carts/memberships/items/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "definition",
+		"rev": "item",
+		"type": "itemdefinitions.item-definition",
+		"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "code",
+		"rev": "item",
+		"type": "items.code-for-item",
+		"uri": "/items/code/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/items/code/items/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "offer",
+		"type": "offers.offer",
+		"uri": "/offers/vestri_b2c/qgqvbkkyfveugrk7laytg=",
+		"href": "https://vestri-us.epdemos.com/cortex/offers/vestri_b2c/qgqvbkkyfveugrk7laytg="
+	}, {
+		"rel": "price",
+		"rev": "item",
+		"type": "prices.price-for-item",
+		"uri": "/prices/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/prices/items/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "appliedpromotions",
+		"rev": "item",
+		"type": "promotions.applied-promotions-for-item",
+		"uri": "/promotions/items/vestri_b2c/qgqvhjjsgezdina=/applied",
+		"href": "https://vestri-us.epdemos.com/cortex/promotions/items/vestri_b2c/qgqvhjjsgezdina=/applied"
+	}, {
+		"rel": "recommendations",
+		"type": "recommendations.item-recommendation-groups",
+		"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina="
+	}, {
+		"rel": "addtowishlistform",
+		"type": "wishlists.add-item-to-wishlist-form",
+		"uri": "/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form",
+		"href": "https://vestri-us.epdemos.com/cortex/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form"
+	}, {
+		"rel": "wishlistmemberships",
+		"type": "wishlists.read-wishlist-memberships",
+		"uri": "/wishlists/memberships/items/vestri_b2c/qgqvhjjsgezdina=",
+		"href": "https://vestri-us.epdemos.com/cortex/wishlists/memberships/items/vestri_b2c/qgqvhjjsgezdina="
+	}],
+	"_addtocartform": [{
+		"self": {
+			"type": "carts.add-to-default-cart-form",
+			"uri": "/carts/items/vestri_b2c/qgqvhjjsgezdina=/form",
+			"href": "https://vestri-us.epdemos.com/cortex/carts/items/vestri_b2c/qgqvhjjsgezdina=/form"
+		},
+		"messages": [],
+		"links": [{
+			"rel": "addtodefaultcartaction",
+			"type": "carts.add-to-default-cart-form",
+			"uri": "/carts/items/vestri_b2c/qgqvhjjsgezdina=/form",
+			"href": "https://vestri-us.epdemos.com/cortex/carts/items/vestri_b2c/qgqvhjjsgezdina=/form"
+		}],
+		"configuration": {},
+		"quantity": 0
+	}],
+	"_addtowishlistform": [{
+		"self": {
+			"type": "wishlists.add-item-to-wishlist-form",
+			"uri": "/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form",
+			"href": "https://vestri-us.epdemos.com/cortex/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form"
+		},
+		"messages": [],
+		"links": [{
+			"rel": "addtodefaultwishlistaction",
+			"type": "wishlists.add-item-to-wishlist-form",
+			"uri": "/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form",
+			"href": "https://vestri-us.epdemos.com/cortex/wishlists/items/vestri_b2c/qgqvhjjsgezdina=/form"
+		}]
+	}],
+	"_availability": [{
+		"self": {
+			"type": "availabilities.availability-for-item",
+			"uri": "/availabilities/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/availabilities/items/vestri_b2c/qgqvhjjsgezdina="
+		},
+		"messages": [],
+		"links": [{
+			"rel": "item",
+			"rev": "availability",
+			"type": "items.item",
+			"uri": "/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/items/vestri_b2c/qgqvhjjsgezdina="
+		}],
+		"state": "AVAILABLE"
+	}],
+	"_code": [{
+		"self": {
+			"type": "items.code-for-item",
+			"uri": "/items/code/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/items/code/items/vestri_b2c/qgqvhjjsgezdina="
+		},
+		"messages": [],
+		"links": [{
+			"rel": "item",
+			"rev": "code",
+			"type": "items.item",
+			"uri": "/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/items/vestri_b2c/qgqvhjjsgezdina="
+		}],
+		"code": "21244"
+	}],
+	"_definition": [{
+		"self": {
+			"type": "itemdefinitions.item-definition",
+			"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina="
+		},
+		"messages": [],
+		"links": [{
+			"rel": "options",
+			"rev": "definition",
+			"type": "itemdefinitions.item-definition-options",
+			"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options",
+			"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options"
+		}, {
+			"rel": "item",
+			"rev": "definition",
+			"type": "items.item",
+			"uri": "/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/items/vestri_b2c/qgqvhjjsgezdina="
+		}, {
+			"rel": "fromprice",
+			"rev": "definition",
+			"type": "prices.price-for-itemdefinition",
+			"uri": "/prices/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/prices/itemdefinitions/vestri_b2c/qgqvhjjsgezdina="
+		}],
+		"_options": [{
+			"_element": [{
+				"self": {
+					"type": "itemdefinitions.item-definition-option",
+					"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+					"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+				},
+				"messages": [],
+				"links": [{
+					"rel": "value",
+					"rev": "option",
+					"type": "itemdefinitions.item-definition-option-value",
+					"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm=",
+					"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm="
+				}, {
+					"rel": "list",
+					"type": "itemdefinitions.item-definition-options",
+					"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options",
+					"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options"
+				}, {
+					"rel": "selector",
+					"rev": "option",
+					"type": "itemselections.item-option-selector",
+					"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+					"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+				}],
+				"_selector": [{
+					"_choice": [{
+						"self": {
+							"type": "itemselections.item-option-selector-choice",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+						},
+						"messages": [],
+						"links": [{
+							"rel": "description",
+							"rev": "choice",
+							"type": "itemdefinitions.item-definition-option-value",
+							"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm="
+						}, {
+							"rel": "selectaction",
+							"rev": "choice",
+							"type": "itemselections.item-option-selector-choice",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+						}, {
+							"rel": "selector",
+							"type": "itemselections.item-option-selector",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+						}],
+						"_description": [{
+							"self": {
+								"type": "itemdefinitions.item-definition-option-value",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm="
+							},
+							"messages": [],
+							"links": [{
+								"rel": "option",
+								"rev": "value",
+								"type": "itemdefinitions.item-definition-option",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+							}],
+							"display-name": "215/55R16",
+							"name": "VPA_TIRE_215_55R16"
+						}],
+						"_selectaction": [{
+							"self": {
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+							},
+							"messages": [],
+							"links": [{
+								"rel": "description",
+								"rev": "choice",
+								"type": "itemdefinitions.item-definition-option-value",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsge2v6njvkiytm="
+							}, {
+								"rel": "selectaction",
+								"rev": "choice",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+							}, {
+								"rel": "selector",
+								"type": "itemselections.item-option-selector",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+							}]
+						}],
+						"_selector": [{
+							"self": {
+								"type": "itemselections.item-option-selector",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+							},
+							"messages": [],
+							"links": [{
+								"rel": "chosen",
+								"rev": "selector",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+							}, {
+								"rel": "choice",
+								"rev": "selector",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+							}, {
+								"rel": "option",
+								"rev": "selector",
+								"type": "itemdefinitions.item-definition-option",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+							}],
+							"name": "option-value-selector",
+							"selection-rule": "1"
+						}]
+					}],
+					"_chosen": [{
+						"self": {
+							"type": "itemselections.item-option-selector-choice",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+						},
+						"messages": [],
+						"links": [{
+							"rel": "description",
+							"rev": "choice",
+							"type": "itemdefinitions.item-definition-option-value",
+							"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm="
+						}, {
+							"rel": "selectaction",
+							"rev": "choice",
+							"type": "itemselections.item-option-selector-choice",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+						}, {
+							"rel": "selector",
+							"type": "itemselections.item-option-selector",
+							"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+							"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+						}],
+						"_description": [{
+							"self": {
+								"type": "itemdefinitions.item-definition-option-value",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm="
+							},
+							"messages": [],
+							"links": [{
+								"rel": "option",
+								"rev": "value",
+								"type": "itemdefinitions.item-definition-option",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+							}],
+							"display-name": "225/50R16",
+							"name": "VPA_TIRE_225_50R16"
+						}],
+						"_selectaction": [{
+							"self": {
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+							},
+							"messages": [],
+							"links": [{
+								"rel": "description",
+								"rev": "choice",
+								"type": "itemdefinitions.item-definition-option-value",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm="
+							}, {
+								"rel": "selectaction",
+								"rev": "choice",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+							}, {
+								"rel": "selector",
+								"type": "itemselections.item-option-selector",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+							}]
+						}],
+						"_selector": [{
+							"self": {
+								"type": "itemselections.item-option-selector",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector"
+							},
+							"messages": [],
+							"links": [{
+								"rel": "chosen",
+								"rev": "selector",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsgi2v6njqkiytm="
+							}, {
+								"rel": "choice",
+								"rev": "selector",
+								"type": "itemselections.item-option-selector-choice",
+								"uri": "/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemselections/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/selector/kziecx2ujfjekxzsge2v6njvkiytm="
+							}, {
+								"rel": "option",
+								"rev": "selector",
+								"type": "itemdefinitions.item-definition-option",
+								"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+								"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+							}],
+							"name": "option-value-selector",
+							"selection-rule": "1"
+						}]
+					}]
+				}],
+				"_value": [{
+					"self": {
+						"type": "itemdefinitions.item-definition-option-value",
+						"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm=",
+						"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=/values/kziecx2ujfjekxzsgi2v6njqkiytm="
+					},
+					"messages": [],
+					"links": [{
+						"rel": "option",
+						"rev": "value",
+						"type": "itemdefinitions.item-definition-option",
+						"uri": "/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek=",
+						"href": "https://vestri-us.epdemos.com/cortex/itemdefinitions/vestri_b2c/qgqvhjjsgezdina=/options/kziecx2ujfjekx2tjfnek="
+					}],
+					"display-name": "225/50R16",
+					"name": "VPA_TIRE_225_50R16"
+				}],
+				"display-name": "Tire Size",
+				"name": "VPA_TIRE_SIZE"
+			}]
+		}],
+		"details": [{
+			"display-name": "Image Name Sku",
+			"display-value": "X-ICE X13",
+			"name": "IMAGE_NAME_S",
+			"value": "X-ICE X13"
+		}, {
+			"display-name": "Description",
+			"display-value": "The X-Ice is Michelin's third-generation Studless Ice & Snow winter tire developed for the drivers of coupes, sedans, family vans and small crossover vehicles that are looking for ice and snow traction along with predictable handling in cold, dry and wet wintry conditions. Meeting Michelin's Green X standard* for low rolling resistance confirms the X-Ice contribution to reducing vehicle fuel consumption and emissions of CO2 gases. The X-Ice is designed to take on ice and snow while it provides lasting winter performance.",
+			"name": "DESCRIPTION",
+			"value": "The X-Ice is Michelin's third-generation Studless Ice & Snow winter tire developed for the drivers of coupes, sedans, family vans and small crossover vehicles that are looking for ice and snow traction along with predictable handling in cold, dry and wet wintry conditions. Meeting Michelin's Green X standard* for low rolling resistance confirms the X-Ice contribution to reducing vehicle fuel consumption and emissions of CO2 gases. The X-Ice is designed to take on ice and snow while it provides lasting winter performance."
+		}, {
+			"display-name": "Tag",
+			"display-value": "VPA_T_MCLASS",
+			"name": "tag",
+			"value": "VPA_T_MCLASS"
+		}],
+		"display-name": "X-ICE X13"
+	}],
+	"_price": [{
+		"self": {
+			"type": "prices.price-for-item",
+			"uri": "/prices/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/prices/items/vestri_b2c/qgqvhjjsgezdina="
+		},
+		"messages": [],
+		"links": [{
+			"rel": "item",
+			"rev": "price",
+			"type": "items.item",
+			"uri": "/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/items/vestri_b2c/qgqvhjjsgezdina="
+		}],
+		"list-price": [{
+			"amount": 164.38,
+			"currency": "CAD",
+			"display": "$164.38"
+		}],
+		"purchase-price": [{
+			"amount": 164.38,
+			"currency": "CAD",
+			"display": "$164.38"
+		}]
+	}],
+	"_recommendations": [{
+		"self": {
+			"type": "recommendations.item-recommendation-groups",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina="
+		},
+		"messages": [],
+		"links": [{
+			"rel": "accessory",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/accessory",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/accessory"
+		}, {
+			"rel": "crosssell",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/crosssell",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/crosssell"
+		}, {
+			"rel": "recommendation",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/recommendation",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/recommendation"
+		}, {
+			"rel": "replacement",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/replacement",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/replacement"
+		}, {
+			"rel": "upsell",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/upsell",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/upsell"
+		}, {
+			"rel": "warranty",
+			"type": "recommendations.item-recommendation-group",
+			"uri": "/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/warranty",
+			"href": "https://vestri-us.epdemos.com/cortex/recommendations/items/vestri_b2c/qgqvhjjsgezdina=/warranty"
+		}],
+		"_crosssell": [{
+			"pagination": {
+				"current": 1,
+				"page-size": 5,
+				"pages": 1,
+				"results": 0,
+				"results-on-page": 0
+			}
+		}],
+		"_recommendation": [{
+			"pagination": {
+				"current": 1,
+				"page-size": 5,
+				"pages": 1,
+				"results": 0,
+				"results-on-page": 0
+			}
+		}],
+		"_replacement": [{
+			"pagination": {
+				"current": 1,
+				"page-size": 5,
+				"pages": 1,
+				"results": 0,
+				"results-on-page": 0
+			}
+		}],
+		"_upsell": [{
+			"pagination": {
+				"current": 1,
+				"page-size": 5,
+				"pages": 1,
+				"results": 0,
+				"results-on-page": 0
+			}
+		}],
+		"_warranty": [{
+			"pagination": {
+				"current": 1,
+				"page-size": 5,
+				"pages": 1,
+				"results": 0,
+				"results-on-page": 0
+			}
+		}]
+	}]
+}
\ No newline at end of file
diff --git a/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.stories.tsx b/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.stories.tsx
new file mode 100644
index 000000000..7817fc031
--- /dev/null
+++ b/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.stories.tsx
@@ -0,0 +1,34 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { MemoryRouter } from 'react-router';
+import itemLookupResponse from './MockHttpResponses/GET/cortex_itemLookup_response.json';
+
+import BloomreachProductRecommendationsDisplayMain from './bloomreach.productrecommendations.main';
+
+storiesOf('BloomreachProductRecommendationsDisplayMain', module)
+  .addDecorator(story => (
+    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  ))
+  .add('BloomreachProductRecommendationsDisplayMain', () => {
+      return (<BloomreachProductRecommendationsDisplayMain cortexProductData={itemLookupResponse}/>); 
+    });
diff --git a/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.tsx b/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.tsx
new file mode 100644
index 000000000..c5571d19f
--- /dev/null
+++ b/components/src/BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main.tsx
@@ -0,0 +1,108 @@
+/**
+ * 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 { withRouter } from 'react-router';
+import intl from 'react-intl-universal';
+import ProductListItemMain from '../ProductListItem/productlistitem.main';
+import { bloomreachMltSearch } from '../utils/Bloomreach/BloomreachSearchService';
+import { BloomreachMltResponse } from '../utils/Bloomreach/types/BloomreachSearchService';
+import '../ProductRecommendations/productrecommendations.main.less';
+import { BloomreachProductRecommendationsDisplayMainProps, BloomreachProductRecommendationsDisplayMainState } from './types/bloomreach.productrecommendations.main';
+
+class BloomreachProductRecommendationsDisplayMain extends React.Component<BloomreachProductRecommendationsDisplayMainProps, BloomreachProductRecommendationsDisplayMainState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxItemsInView: 4,
+      productData: [],
+    };
+  }
+
+  componentDidMount() {
+    const { productData } = this.state;
+
+    if (productData.length === 0) {
+      this.fetchBloomreachRecommendedProducts();
+    }
+  }
+
+  componentWillReceiveProps() {
+    const { productData } = this.state;
+
+    if (productData.length === 0) {
+      this.fetchBloomreachRecommendedProducts();
+    }
+  }
+
+  async fetchBloomreachRecommendedProducts() {
+    const { cortexProductData } = this.props;
+    const sku = cortexProductData._code[0].code;
+
+    const res: BloomreachMltResponse = await bloomreachMltSearch(sku);
+
+    this.setState({
+      productData: res.response ? res.response.docs : [],
+    });
+  }
+
+  renderProductAssocitationView(productData, maxItemsInView) {
+    const data = [];
+    const { itemDetailLink } = this.props;
+    productData.forEach((element, index) => {
+      if (index < maxItemsInView && element.pid) {
+        const cortexSku = element.variants[0].sku_swatch_images[0];
+        data.push(
+          <div className="category-item-container card" key={`_${Math.random().toString(36).substr(2, 9)}`}>
+            <ProductListItemMain productId={cortexSku} itemDetailLink={itemDetailLink} />
+          </div>,
+        );
+      }
+    });
+    return data;
+  }
+
+  render() {
+    const data = [];
+    const { maxItemsInView, productData } = this.state;
+    if (productData && productData.length > 0) {
+      const htmlFor = 'Recommendations';
+      data.push(
+        <div className="display" key={htmlFor}>
+          <label className="control-label" htmlFor={htmlFor}>
+            {intl.get('more-like-this')}
+          </label>
+          <div className="card-deck">
+            {this.renderProductAssocitationView(productData, maxItemsInView)}
+          </div>
+        </div>,
+      );
+    }
+    return (
+      <div className="product-recomentations-component" data-region="categoryBrowseRegion" key="categoryBrowseRegion">
+        {data.length > 0 ? <hr /> : ''}
+        {data}
+      </div>
+    );
+  }
+}
+
+export default withRouter(BloomreachProductRecommendationsDisplayMain);
diff --git a/components/src/BloomreachProductRecommendationsDisplayMain/types/bloomreach.productrecommendations.main.d.ts b/components/src/BloomreachProductRecommendationsDisplayMain/types/bloomreach.productrecommendations.main.d.ts
new file mode 100644
index 000000000..027a87b72
--- /dev/null
+++ b/components/src/BloomreachProductRecommendationsDisplayMain/types/bloomreach.productrecommendations.main.d.ts
@@ -0,0 +1,9 @@
+export interface BloomreachProductRecommendationsDisplayMainProps {
+    cortexProductData: any,
+    itemDetailLink: any
+  }
+
+export interface BloomreachProductRecommendationsDisplayMainState {
+    maxItemsInView: number,
+    productData: any
+}
diff --git a/components/src/ProductDisplayItem/productdisplayitem.main.tsx b/components/src/ProductDisplayItem/productdisplayitem.main.tsx
index 196933fbe..d84af9504 100644
--- a/components/src/ProductDisplayItem/productdisplayitem.main.tsx
+++ b/components/src/ProductDisplayItem/productdisplayitem.main.tsx
@@ -27,6 +27,7 @@ import { login } from '../utils/AuthService';
 import { itemLookup, cortexFetchItemLookupForm } from '../utils/CortexLookup';
 import imgMissingHorizontal from '../../../app/src/images/img_missing_horizontal@2x.png';
 import ProductRecommendationsDisplayMain from '../ProductRecommendations/productrecommendations.main';
+import BloomreachProductRecommendationsDisplayMain from '../BloomreachProductRecommendationsDisplayMain/bloomreach.productrecommendations.main';
 import IndiRecommendationsDisplayMain from '../IndiRecommendations/indirecommendations.main';
 import BundleConstituentsDisplayMain from '../BundleConstituents/bundleconstituents.main';
 import { cortexFetch } from '../utils/Cortex';
@@ -122,6 +123,14 @@ class ProductDisplayItemMain extends React.Component<ProductDisplayItemMainProps
     return (localStorage.getItem(`${config.cortexApi.scope}_oAuthRole`) === 'REGISTERED');
   }
 
+  static RelatedProducts(productData) {
+    const itemDetailLink = '/itemdetail';
+    if (Config.bloomreach.moreLikeThis.enable) {
+      return <BloomreachProductRecommendationsDisplayMain cortexProductData={productData} itemDetailLink={itemDetailLink} />;
+    }
+    return <ProductRecommendationsDisplayMain productData={productData} itemDetailLink={itemDetailLink} />;
+  }
+
   static defaultProps = {
     imageUrl: undefined,
     dataSet: undefined,
@@ -773,7 +782,7 @@ class ProductDisplayItemMain extends React.Component<ProductDisplayItemMainProps
             </div>
           </div>
           <BundleConstituentsDisplayMain productData={productData} itemDetailLink={itemDetailLink} />
-          <ProductRecommendationsDisplayMain productData={productData} itemDetailLink={itemDetailLink} />
+          {ProductDisplayItemMain.RelatedProducts(productData)}
           <IndiRecommendationsDisplayMain render={['carousel', 'product']} configuration={Config.indi} keywords={productData._code[0].code} />
         </div>
       );
diff --git a/components/src/ProductRecommendations/productrecommendations.main.less b/components/src/ProductRecommendations/productrecommendations.main.less
index 7109a6a20..a3d6681d8 100644
--- a/components/src/ProductRecommendations/productrecommendations.main.less
+++ b/components/src/ProductRecommendations/productrecommendations.main.less
@@ -27,7 +27,8 @@
   .control-label {
     font-size: 18px;
     font-weight: 600;
-    padding: 20px 0px;
+    padding-top: 20px;
+    padding-bottom: 70px
   }
 
   .card-deck {
diff --git a/components/src/utils/Bloomreach/BloomreachSearchService.ts b/components/src/utils/Bloomreach/BloomreachSearchService.ts
index c14644e4f..2e73e4bff 100644
--- a/components/src/utils/Bloomreach/BloomreachSearchService.ts
+++ b/components/src/utils/Bloomreach/BloomreachSearchService.ts
@@ -103,3 +103,39 @@ export function bloomreachSuggestionSearch<T>(keyword): Promise<T> {
       });
   }));
 }
+
+export function bloomreachMltSearch<T>(sku): Promise<T> {
+  const baseUrl = generateBaseBloomreachUrl();
+  const {
+    requestType,
+    rows,
+    start,
+    facetLimit,
+    fl,
+  } = getConfig().config.bloomreach.moreLikeThis;
+
+  return new Promise(((resolve, reject) => {
+    searchLookup(sku).then((searchRes) => {
+      const productIDCode = searchRes._element[0]._code[0].code;
+      const pid = `pid=${productIDCode}`;
+      const searchUrl = `${baseUrl}&${requestType}&${rows}&${start}&${facetLimit}&${fl}&${pid}`;
+
+      bloomreachFetch(searchUrl, {})
+        .then((res) => {
+          if (res.status >= 500) {
+            reject(res);
+          }
+          return res;
+        })
+        .then(res => res.json())
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+        // eslint-disable-next-line no-console
+          console.error(error.message);
+          reject(error);
+        });
+    });
+  }));
+}
diff --git a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
index 761d0e265..fd0441a6e 100644
--- a/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
+++ b/components/src/utils/Bloomreach/types/BloomreachSearchService.d.ts
@@ -5,6 +5,36 @@ export interface BloomreachKeywordSearchLookupResponse {
     did_you_mean: any[];
 }
 
+export interface BloomreachSuggestion {
+    q: string,
+    dq: string,
+}
+
+export interface BloomreachSearchSuggestionResponse {
+    responseHeader: {
+      status: number;
+      QTime: number;
+    }
+    response: {
+      q: string;
+      suggestions: BloomreachSuggestion[];
+      numFound: number;
+      products: [{
+        url: string;
+        // eslint-disable-next-line
+        sale_price: number;
+        pid: string;
+        // eslint-disable-next-line
+        thumb_image: string;
+        title: string;
+      }];
+    };
+  }
+
+export interface BloomreachMltResponse {
+    response: Response;
+}
+
 interface CategoryMap {
 }
 
@@ -68,29 +98,3 @@ interface Variant {
     sku_swatch_images: string[];
     sku_thumb_images:  string[];
 }
-
-export interface BloomreachSuggestion {
-    q: string,
-    dq: string,
-}
-
-export interface BloomreachSearchSuggestionResponse {
-    responseHeader: {
-      status: number;
-      QTime: number;
-    }
-    response: {
-      q: string;
-      suggestions: BloomreachSuggestion[];
-      numFound: number;
-      products: [{
-        url: string;
-        // eslint-disable-next-line
-        sale_price: number;
-        pid: string;
-        // eslint-disable-next-line
-        thumb_image: string;
-        title: string;
-      }];
-    };
-  }