DCN-112 - Add promo product for Magento integration

package.json

@@ -15,7 +15,7 @@
     "@chevtek/react-spinners": "^1.0.5",
     "google-maps-react": "^2.0.2",
     "immutable": "^3.8.2",
-    "kentico-cloud-delivery": "^5.1.0",
+    "kentico-cloud-delivery": "^5.7.2",
     "lodash": "^4.17.11",
     "qs": "^6.5.2",
     "react": "^16.4.2",

src/Client.js

@@ -22,7 +22,7 @@ import { HostedVideo } from './Models/hosted_video';
 import { Office } from './Models/office';
 import { Tweet } from './Models/tweet';
 
-const projectId = '';
+const projectId = '471f9f4c-4f97-009b-a0b8-79db2558e63f';
 const previewApiKey = '';
 
 // configure type resolvers

src/Components/MagentoProductPromo.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+const MagentoProductPromo = props => {
+  const value =
+    props.product && props.product.value && JSON.parse(props.product.value);
+
+  if (!value) {
+    return null;
+  }
+
+  const imageLink = value.previewUrl ? (
+    <img alt={value.title} src={value.previewUrl} title={value.title} />
+  ) : (
+    <div style={{ height: '257.15px' }} className="placeholder-tile-image">
+      {this.props.t('noTeaserValue')}
+    </div>
+  );
+
+  const storeFrontUrl = `https://demo1-m2.mage.direct/${value.urlKey}.html`;
+
+  return (
+    <div className="row">
+      <h2>Featured product</h2>
+      <div className="col-md-6 col-lg-4">
+        <div className="product-tile">
+          <h1 className="product-heading">{value.title}</h1>
+          <figure className="product-tile-image">{imageLink}</figure>
+          <div className="product-tile-info">
+            <a className="btn btn-secondary" href={storeFrontUrl}>
+              See more details
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MagentoProductPromo;

src/Models/article.js

@@ -50,6 +50,9 @@ export class Article extends ContentItem {
         if (fieldName === 'metadata__og_image') {
           return 'metadataOgImage';
         }
+        if (fieldName === 'promo_for_magento_product') {
+          return 'promoForMagentoProduct';
+        }
         if (fieldName === 'related_articles') {
           return 'relatedArticles';
         }

src/Pages/Article.js

@@ -5,6 +5,7 @@ import { ArticleStore } from '../Stores/Article';
 import RichTextElement from '../Components/RichTextElement';
 import { dateFormats } from '../Utilities/LanguageCodes';
 import Metadata from '../Components/Metadata';
+import MagentoProductPromo from '../Components/MagentoProductPromo';
 import { translate } from 'react-translate';
 
 let getState = props => {
@@ -124,6 +125,7 @@ class Article extends Component {
             </div>
           </div>
           <div className="row">{bodyCopyElement}</div>
+          <MagentoProductPromo product={article.promoForMagentoProduct} />
         </article>
       </div>
     );

src/Stores/Article.js

@@ -49,7 +49,8 @@ class Article {
         'metadata__twitter_site',
         'metadata__twitter_creator',
         'metadata__twitter_description',
-        'metadata__twitter_image'
+        'metadata__twitter_image',
+        'promo_for_magento_product'
       ]);
 
     if (language) {