Feature/bloomreach integration mlt

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": {

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"
 }

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"
 }

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}/>

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}/>); 
+    });

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);

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
+}

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>
       );

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 {

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);
+        });
+    });
+  }));
+}

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;
-      }];
-    };
-  }