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

Author: aChanEP

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/MockHttpResponses/GET/cortex_itemLookup_response.json

@@ -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.stories.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/bloomreach.productrecommendations.main.tsx

@@ -0,0 +1,9 @@
+export interface BloomreachProductRecommendationsDisplayMainProps {
+    cortexProductData: any,
+    itemDetailLink: any
+  }
+
+export interface BloomreachProductRecommendationsDisplayMainState {
+    maxItemsInView: number,
+    productData: any
+}

components/src/BloomreachProductRecommendationsDisplayMain/types/bloomreach.productrecommendations.main.d.ts

@@ -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/ProductDisplayItem/productdisplayitem.main.tsx

@@ -27,7 +27,8 @@
   .control-label {
     font-size: 18px;
     font-weight: 600;
-    padding: 20px 0px;
+    padding-top: 20px;
+    padding-bottom: 70px
   }
 
   .card-deck {