@mjhls/mjh-framework 1.0.933 → 1.0.935-segment-test

package/dist/esm/View.js

@@ -1,4 +1,4 @@
-import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-958ef5fc.js';
+import { _ as _asyncToGenerator, r as regenerator, a as _Promise } from './asyncToGenerator-958ef5fc.js';
 import { _ as _extends, a as _Object$assign } from './extends-6d8e3924.js';
 import { a as _getIterator, _ as _slicedToArray } from './slicedToArray-6ebcbfea.js';
 import React__default, { useState, useRef, useEffect, forwardRef } from 'react';
@@ -15,10 +15,10 @@ import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import { V as VisibilitySensor } from './visibility-sensor-72fd8f8b.js';
 import SocialShare from './SocialShare.js';
-import { r as renderAuthor, g as getSerializers } from './index-2eb00bbf.js';
+import { r as renderAuthor, g as getSerializers } from './index-6dc67bdb.js';
 import DFPAdSlot from './AdSlot.js';
 import { S as SeriesSlider } from './SeriesSlider-45adb8dc.js';
-import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-42f9b439.js';
+import { a as getContentPlacementUrl, g as getTargeting } from './getTargeting-42f9b439.js';
 import getKeywords from './getKeywords.js';
 import urlFor from './urlFor.js';
 import { u as urlForFile } from './urlForFile-b69adffc.js';
@@ -340,9 +340,9 @@ var ISI = function ISI(props) {
   );
 };
 
-var css = ".RelatedArticles-module_mediaContainer__10h9k {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  margin: 0 -1rem;\n}\n.RelatedArticles-module_mediaCard__3wQbn {\n  margin: 0 1rem 1rem;\n  width: calc(33% - 1rem);\n  display: column;\n  flex-direction: row;\n  margin-bottom: 0.75rem;\n  padding-bottom: 0.75rem;\n  border-bottom: none;\n}\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\n  border-bottom: none;\n}\n.RelatedArticles-module_cardTitle__3P-Ib {\n  font-weight: bold;\n  color: #252525;\n  margin-bottom: 0.25rem;\n  font-size: 15px;\n}\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\n  color: #000;\n  font-weight: bold;\n}\n.RelatedArticles-module_cardDate__1wOR5 {\n  color: var(--dark);\n  display: block;\n  background: #fff !important;\n  margin-bottom: 0;\n}\n.RelatedArticles-module_imgWrapper__5Jx_4 {\n  display: block;\n  text-align: center;\n  margin-bottom: 0.5rem;\n}\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\n  height: 135px;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n@media screen and (max-width: 1064px) {\n}\n@media screen and (max-width: 968px) {\n  .RelatedArticles-module_mediaContainer__10h9k {\n    flex-wrap: wrap;\n  }\n  .RelatedArticles-module_imgWrapper__5Jx_4 {\n    display: none;\n  }\n  .RelatedArticles-module_mediaCard__3wQbn {\n    width: 100%;\n    margin-bottom: 0.5rem;\n    padding: 0;\n  }\n  .RelatedArticles-module_cardTitle__3P-Ib {\n    font-size: 0.75rem;\n    margin-bottom: 0;\n  }\n}\n";
-var styles = { "mediaContainer": "RelatedArticles-module_mediaContainer__10h9k", "mediaCard": "RelatedArticles-module_mediaCard__3wQbn", "cardTitle": "RelatedArticles-module_cardTitle__3P-Ib", "authorListing": "RelatedArticles-module_authorListing__1EFg4", "text-muted": "RelatedArticles-module_text-muted__3b0zX", "cardDate": "RelatedArticles-module_cardDate__1wOR5", "imgWrapper": "RelatedArticles-module_imgWrapper__5Jx_4" };
-styleInject(css);
+var css$1 = ".RelatedArticles-module_mediaContainer__10h9k {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  margin: 0 -1rem;\n}\n.RelatedArticles-module_mediaCard__3wQbn {\n  margin: 0 1rem 1rem;\n  width: calc(33% - 1rem);\n  display: column;\n  flex-direction: row;\n  margin-bottom: 0.75rem;\n  padding-bottom: 0.75rem;\n  border-bottom: none;\n}\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\n  border-bottom: none;\n}\n.RelatedArticles-module_cardTitle__3P-Ib {\n  font-weight: bold;\n  color: #252525;\n  margin-bottom: 0.25rem;\n  font-size: 15px;\n}\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\n  color: #000;\n  font-weight: bold;\n}\n.RelatedArticles-module_cardDate__1wOR5 {\n  color: var(--dark);\n  display: block;\n  background: #fff !important;\n  margin-bottom: 0;\n}\n.RelatedArticles-module_imgWrapper__5Jx_4 {\n  display: block;\n  text-align: center;\n  margin-bottom: 0.5rem;\n}\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\n  height: 135px;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n@media screen and (max-width: 1064px) {\n}\n@media screen and (max-width: 968px) {\n  .RelatedArticles-module_mediaContainer__10h9k {\n    flex-wrap: wrap;\n  }\n  .RelatedArticles-module_imgWrapper__5Jx_4 {\n    display: none;\n  }\n  .RelatedArticles-module_mediaCard__3wQbn {\n    width: 100%;\n    margin-bottom: 0.5rem;\n    padding: 0;\n  }\n  .RelatedArticles-module_cardTitle__3P-Ib {\n    font-size: 0.75rem;\n    margin-bottom: 0;\n  }\n}\n";
+var styles$1 = { "mediaContainer": "RelatedArticles-module_mediaContainer__10h9k", "mediaCard": "RelatedArticles-module_mediaCard__3wQbn", "cardTitle": "RelatedArticles-module_cardTitle__3P-Ib", "authorListing": "RelatedArticles-module_authorListing__1EFg4", "text-muted": "RelatedArticles-module_text-muted__3b0zX", "cardDate": "RelatedArticles-module_cardDate__1wOR5", "imgWrapper": "RelatedArticles-module_imgWrapper__5Jx_4" };
+styleInject(css$1);
 
 var RelatedArticle = function RelatedArticle(_ref) {
   var articles = _ref.articles,
@@ -356,15 +356,15 @@ var RelatedArticle = function RelatedArticle(_ref) {
   }
   return React__default.createElement(
     'div',
-    { className: styles.mediaContainer },
+    { className: styles$1.mediaContainer },
     articles.map(function (article, index) {
       if (article && article.url && article.url.current) {
         return React__default.createElement(
           'div',
-          { id: 'related-card', key: index, className: styles.mediaCard },
+          { id: 'related-card', key: index, className: styles$1.mediaCard },
           React__default.createElement(
             'a',
-            { className: styles.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
+            { className: styles$1.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
             article.thumbnail ? React__default.createElement('img', {
               style: { objectFit: 'cover', objectPosition: 'center' },
               src: article.thumbnail && urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 }),
@@ -377,13 +377,13 @@ var RelatedArticle = function RelatedArticle(_ref) {
           ),
           React__default.createElement(
             'div',
-            { className: styles.mediaBody },
+            { className: styles$1.mediaBody },
             React__default.createElement(
               'a',
               { href: '/view/' + (article.url ? article.url.current : '') },
               React__default.createElement(
                 'div',
-                { className: styles.cardTitle },
+                { className: styles$1.cardTitle },
                 article.title
               )
             )
@@ -439,7 +439,336 @@ var getSocialShareDisableFlag = function getSocialShareDisableFlag(article) {
   return showSocialShare;
 };
 
-var Article = forwardRef(function (props, ref) {
+var css = ".RecommendedArticles-module_recommendTitle__2kUji {\n  border-bottom: 2px solid var(--secondary-blue);\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: #0d335a;\n  padding: 0.5rem;\n}\n.RecommendedArticles-module_recommendContainer__sZukI {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: 0 -0.5rem;\n}\n.RecommendedArticles-module_recommendTop__1_yqw {\n  margin: 0.5rem;\n  width: 100%;\n  flex-basis: 100%;\n  display: flex;\n\n}\n.RecommendedArticles-module_recommendTopImg__1b9gu {\n  min-width: 55%;\n  width: 55%;\n  height: 100%;\n}\n.RecommendedArticles-module_recommendTopImg__1b9gu img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.RecommendedArticles-module_recommendTopBody__-13FI {\n  margin-left: 1rem;\n  line-height: 1.3;\n  color: #121212;\n  display: flex;\n  flex-direction: column;\n}\n.RecommendedArticles-module_topTitle__2EafN {\n  font-size: 25px;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n.RecommendedArticles-module_topBody__2_VNi {\n  font-size: 19px;\n  margin-bottom: 0.5rem;\n}\n.RecommendedArticles-module_topLink__2RnXu {\n  font-size: 19px;\n  color: rgb(43, 43, 151);\n  text-decoration: underline;\n  margin-top: auto;\n}\n.RecommendedArticles-module_smContainer__4byBO {\n  width: calc(25% - 1rem);\n  margin: 0 0.5rem;\n}\n.RecommendedArticles-module_smImage__TYZGY img {\n  width: 100%;\n}\n.RecommendedArticles-module_title__3q1ud {\n  margin-top: 1rem;\n  line-height: 1.2;\n  color: #121212;\n}\n.RecommendedArticles-module_category__2jRto {\n  text-transform: uppercase;\n  font-size: 16px;\n  letter-spacing: 2px;\n  margin: 0.25rem 0;\n}\n\n/* media query */\n\n@media screen and (max-width: 1399px) {\n  .RecommendedArticles-module_topTitle__2EafN {\n    font-size: 21px;\n  }\n  .RecommendedArticles-module_topBody__2_VNi {\n    font-size: 15px;\n  }\n}\n@media screen and (max-width: 1191px) {\n  .RecommendedArticles-module_topTitle__2EafN {\n    font-size: 23px;\n  }\n  .RecommendedArticles-module_topBody__2_VNi,\n  .RecommendedArticles-module_topLink__2RnXu {\n    font-size: 17px;\n  }\n}\n@media screen and (max-width: 968px) {\n  .RecommendedArticles-module_topTitle__2EafN {\n    font-size: 18px;\n  }\n  .RecommendedArticles-module_topBody__2_VNi,\n  .RecommendedArticles-module_topLink__2RnXu {\n    font-size: 15px;\n  }\n}\n@media screen and (max-width: 768px) {\n  .RecommendedArticles-module_recommendTop__1_yqw {\n    flex-direction: column;\n  }\n  .RecommendedArticles-module_recommendTopImg__1b9gu,\n  .RecommendedArticles-module_recommendTopBody__-13FI {\n    width: 100%;\n    margin: 0;\n  }\n  .RecommendedArticles-module_recommendTopBody__-13FI {\n    margin-bottom: 1rem;\n  }\n  .RecommendedArticles-module_smContainer__4byBO {\n    width: calc(50% - 1rem);\n  }\n}";
+var styles = { "recommendTitle": "RecommendedArticles-module_recommendTitle__2kUji", "recommendContainer": "RecommendedArticles-module_recommendContainer__sZukI", "recommendTop": "RecommendedArticles-module_recommendTop__1_yqw", "recommendTopImg": "RecommendedArticles-module_recommendTopImg__1b9gu", "recommendTopBody": "RecommendedArticles-module_recommendTopBody__-13FI", "topTitle": "RecommendedArticles-module_topTitle__2EafN", "topBody": "RecommendedArticles-module_topBody__2_VNi", "topLink": "RecommendedArticles-module_topLink__2RnXu", "smContainer": "RecommendedArticles-module_smContainer__4byBO", "smImage": "RecommendedArticles-module_smImage__TYZGY", "title": "RecommendedArticles-module_title__3q1ud", "category": "RecommendedArticles-module_category__2jRto" };
+styleInject(css);
+
+var _this$2 = undefined;
+
+var Recommended = function Recommended(props) {
+  var article = props.article,
+      client = props.client,
+      _props$index = props.index,
+      index = _props$index === undefined ? 0 : _props$index,
+      cpModificationRequired = props.cpModificationRequired;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      segmentLoaded = _useState2[0],
+      setSegmentLoaded = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      articles = _useState4[0],
+      setArticles = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loaded = _useState6[0],
+      setLoaded = _useState6[1];
+
+  var starting = index * 5;
+  var contentMapping = {
+    videos: 'video',
+    articles: 'article',
+    podcasts: 'podcast'
+  };
+
+  var mainCategories = article.content_placement.filter(function (cp) {
+    return cp.usedForRecommendations === true;
+  }).map(function (cp) {
+    return cp.name;
+  }).sort();
+
+  useEffect(function () {
+    try {
+      if (!segmentLoaded) {
+        return;
+      }
+      if (mainCategories.length > 0) {
+        //console.log(mainCategories)
+        analytics.track('Article Category Viewed', {
+          categories: _JSON$stringify(mainCategories)
+        });
+      }
+      var anonymousId = analytics.user().anonymousId();
+      // get users traits
+      var getSegmentProfile = function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+          var response, data, favoriteCategories, articlesQuery, videosQuery, podcastQuery, params, _ref2, _ref3, _articles, videos, podcasts;
+
+          return regenerator.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return fetch('/api/getSegmentProfile', {
+                    method: 'POST',
+                    body: _JSON$stringify({ anonymousId: anonymousId })
+                  });
+
+                case 2:
+                  response = _context.sent;
+                  _context.next = 5;
+                  return response.json();
+
+                case 5:
+                  data = _context.sent;
+
+                  if (!(data && data.traits && data.traits.favorite_article_category)) {
+                    _context.next = 20;
+                    break;
+                  }
+
+                  //console.log('%csegment user profile', 'font-size:1.5rem;color:#000000;padding:1rem;background-color:yellow;', data.traits)
+                  favoriteCategories = JSON.parse(data.traits.favorite_article_category);
+                  // grab 3 articles from sanity different from the one currently being read
+
+                  articlesQuery = '*[_type == \'article\'\n          && !(_id in path("drafts.**"))\n          && defined(title)\n          && defined(url)\n          && is_visible\n          && references(*[_type == \'contentCategory\' && name == \'Articles\']._id)\n          && references(*[_type == \'taxonomy\' ' + favoriteCategories.map(function (cat) {
+                    return ' && name == \'' + cat + '\' ';
+                  }) + ']._id)\n          && defined(published)\n          && _id != $id\n          && dateTime(published) <= dateTime(now())] | order(published desc) [' + starting + '...' + (starting + 5) + '] {\n            ...,\n            title,\n            thumbnail,\n            url,\n            contentCategory->,\n            published,\n          }';
+                  videosQuery = '*[_type == \'article\'\n          && !(_id in path("drafts.**"))\n          && defined(title)\n          && defined(url)\n          && is_visible\n          && references(*[_type == \'contentCategory\' && name == \'Videos\']._id)\n          && references(*[_type == \'taxonomy\' ' + favoriteCategories.map(function (cat) {
+                    return ' && name == \'' + cat + '\' ';
+                  }) + ']._id)\n          && defined(published)\n          && _id != $id\n          && dateTime(published) <= dateTime(now())] | order(published desc) [' + starting + '...' + (starting + 1) + '] {\n            ...,\n            title,\n            thumbnail,\n            url,\n            contentCategory->,\n            published,\n          }';
+                  podcastQuery = '*[_type == \'article\'\n          && !(_id in path("drafts.**"))\n          && defined(title)\n          && defined(url)\n          && is_visible\n          && references(*[_type == \'contentCategory\' && name == \'Podcasts\']._id)\n          && references(*[_type == \'taxonomy\' ' + favoriteCategories.map(function (cat) {
+                    return ' && name == \'' + cat + '\' ';
+                  }) + ']._id)\n          && defined(published)\n          && _id != $id\n          && dateTime(published) <= dateTime(now())] | order(published desc) [' + starting + '...' + (starting + 2) + '] {\n            ...,\n            title,\n            thumbnail,\n            url,\n            contentCategory->,\n            published,\n          }';
+                  params = {
+                    id: article._id
+                  };
+                  _context.next = 14;
+                  return _Promise.all([client.fetch(articlesQuery, params), client.fetch(videosQuery, params), client.fetch(podcastQuery, params)]);
+
+                case 14:
+                  _ref2 = _context.sent;
+                  _ref3 = _slicedToArray(_ref2, 3);
+                  _articles = _ref3[0];
+                  videos = _ref3[1];
+                  podcasts = _ref3[2];
+
+                  if (_articles) {
+                    if (videos[0] && _articles[2]) {
+                      _articles[2] = videos[0];
+                    }
+                    if (videos[1] && _articles[4]) {
+                      _articles[4] = videos[1];
+                    }
+                    if (podcasts[0] && _articles[3]) {
+                      _articles[3] = podcasts[0];
+                    }
+                    setArticles(_articles);
+                  }
+
+                case 20:
+                case 'end':
+                  return _context.stop();
+              }
+            }
+          }, _callee, _this$2);
+        }));
+
+        return function getSegmentProfile() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+
+      getSegmentProfile();
+    } catch (err) {
+      console.log(err);
+    }
+  }, [segmentLoaded]);
+
+  useEffect(function () {
+    if (articles && articles.length > 0) {
+      setLoaded(true);
+    }
+  }, [articles]);
+
+  useEffect(function () {
+    try {
+      analytics.ready(function () {
+        setSegmentLoaded(function () {
+          return true;
+        });
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  }, []);
+
+  return React__default.createElement(
+    'div',
+    { id: 'recommended' },
+    loaded ? React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        'h4',
+        { className: styles.recommendTitle },
+        'Recommended For You'
+      ),
+      React__default.createElement(
+        'div',
+        { className: styles.recommendContainer, id: 'recommendedContent' },
+        articles.map(function (article, index) {
+          if (index === 0) {
+            return React__default.createElement(
+              'div',
+              { key: article._id + ('-' + index), className: styles.recommendTop },
+              React__default.createElement(
+                'div',
+                { className: styles.recommendTopImg },
+                React__default.createElement(
+                  'a',
+                  { href: '/view/' + article.url.current },
+                  React__default.createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 306, imageWidth: 544 }) })
+                )
+              ),
+              React__default.createElement(
+                'div',
+                { className: styles.recommendTopBody },
+                React__default.createElement(
+                  'div',
+                  { className: styles.topTitle },
+                  article.title
+                ),
+                React__default.createElement(
+                  'p',
+                  { className: styles.topBody },
+                  article.summary
+                ),
+                React__default.createElement(
+                  'a',
+                  { href: '/view/' + article.url.current, className: styles.topLink },
+                  '>> ',
+                  'Read Article'
+                )
+              )
+            );
+          } else {
+            return React__default.createElement(
+              'div',
+              { key: article._id + ('-' + index), className: styles.smContainer },
+              React__default.createElement(
+                'div',
+                { className: styles.category },
+                contentMapping[article.contentCategory.name.toLowerCase()] ? contentMapping[article.contentCategory.name.toLowerCase()] : article.contentCategory.name
+              ),
+              React__default.createElement(
+                'a',
+                { href: '/view/' + article.url.current },
+                React__default.createElement(
+                  'div',
+                  { className: styles.smImage },
+                  React__default.createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 270, imageWidth: 480 }) })
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: styles.title },
+                  article.title
+                )
+              )
+            );
+          }
+        })
+      )
+    ) : React__default.createElement(
+      'section',
+      { id: 'related-content-section', className: 'my-1' },
+      (article.relatedArticle || RelevantTopics()) && React__default.createElement(
+        'p',
+        { className: 'mb-0' },
+        React__default.createElement(
+          'b',
+          null,
+          'Related Content:'
+        )
+      ),
+      React__default.createElement(RelevantTopics, { article: article, cpModificationRequired: cpModificationRequired, Settings: props.Settings }),
+      React__default.createElement(
+        'div',
+        { className: 'pt-2' },
+        React__default.createElement(RelatedArticle, {
+          articles: article.relatedArticle,
+          client: client,
+          fallbackImage: props.Settings.logo,
+          showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
+        })
+      )
+    )
+  );
+};
+
+var RelevantTopics = function RelevantTopics(props) {
+  var article = props.article,
+      cpModificationRequired = props.cpModificationRequired;
+  var content_placement = article.content_placement,
+      documentGroupMapping = article.documentGroupMapping,
+      issueGroup = article.issueGroup;
+
+  if (content_placement && content_placement.length > 0 || documentGroupMapping && documentGroupMapping.length > 0) {
+    var relatedLinks = [];
+    if (documentGroupMapping && documentGroupMapping.length > 0) {
+      documentGroupMapping.forEach(function (documentGroup) {
+        if (documentGroup.isShow === false || documentGroup.excludeRelatedContents) {
+          return null;
+        }
+        if (documentGroup.parent) {
+          relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{
+            label: documentGroup.name,
+            href: cpModificationRequired ? getDocumentGroupUrl(documentGroup) : documentGroup.parent.identifier && documentGroup.parent.identifier.current && !documentGroup.path.includes('/') ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path
+          }]);
+        }
+      });
+    }
+    if (content_placement && content_placement.length > 0) {
+      content_placement.filter(function (item) {
+        return item.path !== 'news';
+      }).forEach(function (cp) {
+        if (cp.excludeRelatedContents) {
+          return null;
+        }
+        var cp_url = cpModificationRequired ? getContentPlacementUrl(cp) : cp.path;
+        var href = '/' + cp_url;
+        relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: cp.name, href: href }]);
+      });
+    }
+    if (issueGroup && issueGroup.name && issueGroup.identifier && issueGroup.identifier.current && issueGroup.parent && issueGroup.parent.identifier && issueGroup.parent.identifier.current) {
+      var _props$Settings$issue = props.Settings.issueMapping,
+          issueMapping = _props$Settings$issue === undefined ? '/publications' : _props$Settings$issue;
+
+      relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: issueGroup.name, href: issueMapping + '/' + issueGroup.parent.identifier.current + '/' + issueGroup.identifier.current }]);
+    }
+    if (relatedLinks && relatedLinks.length > 0) {
+      return React__default.createElement(
+        'div',
+        null,
+        relatedLinks.map(function (relatedLink, index) {
+          if (relatedLink && relatedLink.href && relatedLink.label) {
+            return React__default.createElement(
+              'span',
+              { key: relatedLink.label, className: 'related-link' },
+              React__default.createElement(
+                'a',
+                { className: 'related-links', style: { color: 'blue' }, href: relatedLink.href },
+                relatedLink.label
+              ),
+              React__default.createElement(
+                'style',
+                { jsx: 'true' },
+                '\n                      .related-link:not(:first-child):before {\n                        content: \' | \';\n                      }\n                    '
+              )
+            );
+          }
+        })
+      );
+    }
+    return null;
+  }
+  return null;
+};
+
+var Article = React__default.memo(forwardRef(function (props, ref) {
   var onVote = function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(nodeKey, selectedChoice) {
       var response, result;
@@ -552,7 +881,9 @@ var Article = forwardRef(function (props, ref) {
       disqusConfig = props.disqusConfig,
       showDisqus = props.showDisqus,
       _props$downloadCitati = props.downloadCitation,
-      downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati;
+      downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati,
+      _props$useSegmentReco = props.useSegmentRecommendedArticles,
+      useSegmentRecommendedArticles = _props$useSegmentReco === undefined ? false : _props$useSegmentReco;
   var sliderData = props.sliderData;
 
 
@@ -785,27 +1116,31 @@ var Article = forwardRef(function (props, ref) {
 
   var RelatedContent = function RelatedContent() {
     return React__default.createElement(
-      'section',
-      { id: 'related-content-section', className: 'my-1' },
-      (article.relatedArticle || RelevantTopics()) && React__default.createElement(
-        'p',
-        { className: 'mb-0' },
+      'div',
+      null,
+      useSegmentRecommendedArticles ? React__default.createElement(Recommended, { client: client, article: article, index: props.index, Settings: props.Settings, showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage, cpModificationRequired: cpModificationRequired }) : React__default.createElement(
+        'section',
+        { id: 'related-content-section', className: 'my-1' },
+        (article.relatedArticle || RelevantTopics()) && React__default.createElement(
+          'p',
+          { className: 'mb-0' },
+          React__default.createElement(
+            'b',
+            null,
+            'Related Content:'
+          )
+        ),
+        React__default.createElement(RelevantTopics, null),
         React__default.createElement(
-          'b',
-          null,
-          'Related Content:'
+          'div',
+          { className: 'pt-2' },
+          React__default.createElement(RelatedArticle, {
+            articles: article.relatedArticle,
+            client: client,
+            fallbackImage: props.Settings.logo,
+            showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
+          })
         )
-      ),
-      React__default.createElement(RelevantTopics, null),
-      React__default.createElement(
-        'div',
-        { className: 'pt-2' },
-        React__default.createElement(RelatedArticle, {
-          articles: article.relatedArticle,
-          client: client,
-          fallbackImage: props.Settings.logo,
-          showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
-        })
       )
     );
   };
@@ -1416,6 +1751,8 @@ var Article = forwardRef(function (props, ref) {
   } else {
     return detail();
   }
+}), function (prevProps, nextProps) {
+  return prevProps.article === nextProps.article;
 });
 
 var _this$1 = undefined;
@@ -1700,7 +2037,8 @@ var ArticleQueue = function ArticleQueue(props) {
           active: active === article._id
           // Passing queueData to check for single article
           , queueData: queueData,
-          showRelatedArticles: showRelatedArticles
+          showRelatedArticles: showRelatedArticles,
+          index: index
         }))
       );
     })

package/dist/esm/getQuery.js

@@ -7,8 +7,9 @@ var getQuery = function getQuery(type) {
   //Site level conditions should start with && (logical AND), and site level params should end with , (comma) in order to execute query
 
   switch (type) {
+    // quiz video series and slideshow 
     case 'related':
-      return '*[\n                _type == "article"\n                && defined(title)\n                && defined(url)\n                && !(_id in path("drafts.**"))\n                && is_visible == true\n                && defined(published) \n                && dateTime(published) <= dateTime(now())\n                && passwordLock!=true\n                && taxonomyMapping[]._ref in $taxonomy\n                && taxonomyMapping[].disableAds != \'true\'\n                && contentCategory->.name != \'Poll\'\n                && contentCategory->.name != \'Slideshows\'\n                && contentCategory->.disableAds != \'true\'\n                && ExcludeFromInfiniteScroll !=true\n                && url.current != $url\n                && !defined(body[].videos)\n                ' + conditions + '\n              ]| order(published desc)[' + (articleCount ? articleCount : '$index') + ']{\n                  ' + params + '\n                  title,\n                  published,\n                  summary,\n                  thumbnail,\n                  fieldAbstract,\n                  ...,\n                  passwordLock,\n                  password,\n                  "authorDetails": authorMapping[]->{ displayName, url, profileImage, biography, showSocialShare },\n                  body[] {\n                    ...,\n                    asset->,\n                    images[]{\n                      ...,\n                      asset->\n                    },\n                    content[]{\n                      ...,\n                      asset->\n                    },\n                    videos[]{\n                      ...,\n                      thumbnail{\n                        _type,\n                        asset->\n                      }\n                    },\n                    response[]{\n                      ...,\n                      asset->\n                    },\n                    quizzes[]{\n                      ...,\n                      answer[]{\n                        ...,\n                        asset->\n                      },\n                      question[]{\n                        ...,\n                        asset->\n                      }\n                    },\n                    poster {\n                      _type,\n                      asset->\n                    },\n                    slides[]{\n                      ...,\n                      slideshowImage{\n                      ...,\n                      asset->\n                      }\n                    },\n                    upload_doc {\n                      _type,\n                      asset->\n                    },\n                    uploadAudio {\n                      _type,\n                      asset->\n                    }\n                  },\n                  \'category\':contentCategory->{\n                    name,\n                    disableAds\n                  },\n                  \'content_placement\': taxonomyMapping[]-> {\n                    _id,\n                    \'ancestor\': parent->parent->identifier,\n                    \'parent\': parent->identifier,\n                    \'name\': name,\n                    \'path\': identifier,\n                    disableAds,\n                    showSocialShare\n                  },\n                  documentGroup-> {\n                    name,\n                    thumbnail,\n                    parent->{...,parent->},\n                    isShow,\n                    showSocialShare,\n                    \'path\': identifier.current,\n                    adTargetingURL,\n                    hideSeriesSlider\n                  },\n                  documentGroupMapping[]-> {\n                    _id,\n                    name,\n                    thumbnail,\n                    parent->{...,parent->},\n                    isShow,\n                    showSocialShare,\n                    \'path\': identifier.current,\n                    adTargetingURL,\n                    hideSeriesSlider\n                  },\n                  \'issue\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.issueGroup._ref][0] {\n                    name,\n                    \'path\': identifier.current,\n                    show_download_ris_button,\n                    \'publication\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.parent._ref][0] {\n                      name,\n                      \'path\': identifier.current,\n                      show_download_ris_button,\n                    },\n                    \'url\' : pdf.asset-> url,\n                    \'pdf\': pdf.asset->,\n                    isbn_issn,\n                    abbreviatedJournal,\n                  }\n                }';
+      return '*[\n                _type == "article"\n                && defined(title)\n                && defined(url)\n                && !(_id in path("drafts.**"))\n                && is_visible == true\n                && defined(published) \n                && dateTime(published) <= dateTime(now())\n                && passwordLock!=true\n                && taxonomyMapping[]._ref in $taxonomy\n                && taxonomyMapping[].disableAds != \'true\'\n                && contentCategory->.name != \'Poll\'\n                && contentCategory->.name != \'Slideshows\'\n                && contentCategory->.disableAds != \'true\'\n                && ExcludeFromInfiniteScroll !=true\n                && url.current != $url\n                && !defined(body[].videos)\n                && !defined(body[].quizzes)\n                && !defined(body[].slides)\n                && !defined(body[].articles)\n                ' + conditions + '\n              ]| order(published desc)[' + (articleCount ? articleCount : '$index') + ']{\n                  ' + params + '\n                  title,\n                  published,\n                  summary,\n                  thumbnail,\n                  fieldAbstract,\n                  ...,\n                  passwordLock,\n                  password,\n                  "authorDetails": authorMapping[]->{ displayName, url, profileImage, biography, showSocialShare },\n                  body[] {\n                    ...,\n                    asset->,\n                    images[]{\n                      ...,\n                      asset->\n                    },\n                    content[]{\n                      ...,\n                      asset->\n                    },\n                    videos[]{\n                      ...,\n                      thumbnail{\n                        _type,\n                        asset->\n                      }\n                    },\n                    response[]{\n                      ...,\n                      asset->\n                    },\n                    quizzes[]{\n                      ...,\n                      answer[]{\n                        ...,\n                        asset->\n                      },\n                      question[]{\n                        ...,\n                        asset->\n                      }\n                    },\n                    poster {\n                      _type,\n                      asset->\n                    },\n                    slides[]{\n                      ...,\n                      slideshowImage{\n                      ...,\n                      asset->\n                      }\n                    },\n                    upload_doc {\n                      _type,\n                      asset->\n                    },\n                    uploadAudio {\n                      _type,\n                      asset->\n                    }\n                  },\n                  \'category\':contentCategory->{\n                    name,\n                    disableAds\n                  },\n                  \'content_placement\': taxonomyMapping[]-> {\n                    _id,\n                    \'ancestor\': parent->parent->identifier,\n                    \'parent\': parent->identifier,\n                    \'name\': name,\n                    \'path\': identifier,\n                    disableAds,\n                    showSocialShare\n                  },\n                  documentGroup-> {\n                    name,\n                    thumbnail,\n                    parent->{...,parent->},\n                    isShow,\n                    showSocialShare,\n                    \'path\': identifier.current,\n                    adTargetingURL,\n                    hideSeriesSlider\n                  },\n                  documentGroupMapping[]-> {\n                    _id,\n                    name,\n                    thumbnail,\n                    parent->{...,parent->},\n                    isShow,\n                    showSocialShare,\n                    \'path\': identifier.current,\n                    adTargetingURL,\n                    hideSeriesSlider\n                  },\n                  \'issue\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.issueGroup._ref][0] {\n                    name,\n                    \'path\': identifier.current,\n                    show_download_ris_button,\n                    \'publication\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.parent._ref][0] {\n                      name,\n                      \'path\': identifier.current,\n                      show_download_ris_button,\n                    },\n                    \'url\' : pdf.asset-> url,\n                    \'pdf\': pdf.asset->,\n                    isbn_issn,\n                    abbreviatedJournal,\n                  }\n                }';
     case 'article':
       return '*[\n                        _type == "article"\n                        && !(_id in path("drafts.**"))\n                        && defined(title)\n                        && defined(url)\n                        && is_visible != false\n                        && url.current == $url\n                        ' + conditions + '\n                      ][0]{\n                          ' + params + '\n                          title,\n                          published,\n                          summary,\n                          thumbnail,\n                          fieldAbstract,\n                          ...,\n                          passwordLock,\n                          password,\n                          issueGroup-> { _id, name, identifier, parent-> },\n                          "authorDetails": authorMapping[]->{ displayName, url, profileImage, biography, showSocialShare },\n                          body[] {\n                            ...,\n                            asset->,\n                            images[]{\n                              ...,\n                              asset->\n                            },\n                            content[]{\n                              ...,\n                              asset->\n                            },\n                            videos[]{\n                              ...,\n                              thumbnail{\n                                _type,\n                                asset->\n                              }\n                            },\n                            response[]{\n                              ...,\n                              asset->\n                            },\n                            quizzes[]{\n                              ...,\n                              answer[]{\n                                ...,\n                                asset->\n                              },\n                              question[]{\n                                ...,\n                                asset->\n                              }\n                            },\n                            poster {\n                              _type,\n                              asset->\n                            },\n                            slides[]{\n                              ...,\n                              slideshowImage{\n                              ...,\n                              asset->\n                              }\n                            },\n                            upload_doc {\n                              _type,\n                              asset->\n                            },\n                            uploadAudio {\n                              _type,\n                              asset->\n                            },\n                            medias[]{\n                              ...,\n                              upload_doc {\n                                _type,\n                                asset-> \n                              },\n                              poster {\n                                _type,\n                                asset-> \n                              }\n                            },\n                            articles[]{\n                              ...,\n                              thumbnail{\n                                ...,\n                                asset-> \n                              },\n                              "authorDetails": authorMapping[]->{ displayName, url, profileImage, biography, showSocialShare },\n                              text[]{\n                                ...,\n                                upload_doc {\n                                  _type,\n                                  asset->\n                                },\n                                uploadAudio {\n                                  _type,\n                                  asset->\n                                },\n                              }\n                            }\n                          },\n                          \'content_placement\': taxonomyMapping[]-> {\n                            ...,\n                            \'ancestor\': parent->parent->identifier,\n                            \'parent\': parent->identifier,\n                            \'name\': name,\n                            \'path\': identifier,\n                            showSocialShare\n                          },\n                          documentGroup-> {\n                            _id,\n                            name,\n                            thumbnail,\n                            parent->{...,parent->},\n                            isShow,\n                            isSeries,\n                            excludeRelatedContents,\n                            showSocialShare,\n                            \'path\': identifier.current,\n                            adTargetingURL,\n                            hideSeriesSlider\n                          },\n                          documentGroupMapping[]-> {\n                            _id,\n                            name,\n                            thumbnail,\n                            parent->{...,parent->},\n                            isShow,\n                            showSocialShare,\n                            excludeRelatedContents,\n                            \'path\': identifier.current,\n                            hideSeriesSlider\n                          },\n                          \'category\':contentCategory->{\n                            name,\n                            disableAds\n                          },\n                          \'issue\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.issueGroup._ref][0] {\n                            name,\n                            volume,\n                            year,\n                            \'issueNumber\': number,\n                            \'articleSource\': source,\n                            \'path\': identifier.current,\n                            show_download_ris_button,\n                            \'publication\' : *[_type == \'publication\' && !(_id in path("drafts.**")) && is_visible == true && _id == ^.parent._ref][0] {\n                              name,\n                              \'path\': identifier.current,\n                              show_download_ris_button,\n                            },\n                            \'url\' : pdf.asset-> url,\n                            \'pdf\': pdf.asset->,\n                            isbn_issn,\n                            abbreviatedJournal,\n                          }\n\n                        }';
     case 'publication':

package/dist/esm/getSerializers.js

@@ -1,6 +1,6 @@
 import './extends-6d8e3924.js';
 import 'react';
-export { g as default } from './index-2eb00bbf.js';
+export { g as default } from './index-6dc67bdb.js';
 import './BlockContent-1e73bd2c.js';
 import './entities-6d9154b4.js';
 import './_commonjsHelpers-0c4b6f40.js';

package/dist/esm/{index-2eb00bbf.js → index-6dc67bdb.js}

@@ -2929,6 +2929,7 @@ var Video = function Video(_ref) {
       return React__default.createElement(
         'div',
         { className: 'brightcove-playlist', style: { position: 'relative', display: 'block', margin: '0px auto' } },
+        React__default.createElement('div', { 'data-experience': experienceID }),
         isPollingTime ? React__default.createElement(PopupPollModal
         // eslint-disable-next-line react/jsx-indent-props
         , { pollItems: pollItems

package/dist/esm/index.js

@@ -86,7 +86,7 @@ export { default as VerticalHero } from './VerticalHero.js';
 export { default as YahooHero } from './YahooHero.js';
 export { default as GridHero } from './GridHero.js';
 export { default as ConferenceArticleCard } from './ConferenceArticleCard.js';
-export { g as getSerializers } from './index-2eb00bbf.js';
+export { g as getSerializers } from './index-6dc67bdb.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as KMTracker } from './KMTracker.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.933",
+  "version": "1.0.935-segment-test",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",