@mjhls/mjh-framework 1.0.935 → 1.0.937

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/View.js +381 -30
  3. package/dist/esm/View.js +383 -32
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # mjh-framework v. 1.0.935
1
+ # mjh-framework v. 1.0.937
2
2
 
3
3
  [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
4
4
 
package/dist/cjs/View.js CHANGED
@@ -351,9 +351,9 @@ var ISI = function ISI(props) {
351
351
  );
352
352
  };
353
353
 
354
- 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";
355
- 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" };
356
- styleInject_es.styleInject(css);
354
+ 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";
355
+ 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" };
356
+ styleInject_es.styleInject(css$1);
357
357
 
358
358
  var RelatedArticle = function RelatedArticle(_ref) {
359
359
  var articles = _ref.articles,
@@ -367,15 +367,15 @@ var RelatedArticle = function RelatedArticle(_ref) {
367
367
  }
368
368
  return React__default['default'].createElement(
369
369
  'div',
370
- { className: styles.mediaContainer },
370
+ { className: styles$1.mediaContainer },
371
371
  articles.map(function (article, index) {
372
372
  if (article && article.url && article.url.current) {
373
373
  return React__default['default'].createElement(
374
374
  'div',
375
- { id: 'related-card', key: index, className: styles.mediaCard },
375
+ { id: 'related-card', key: index, className: styles$1.mediaCard },
376
376
  React__default['default'].createElement(
377
377
  'a',
378
- { className: styles.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
378
+ { className: styles$1.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
379
379
  article.thumbnail ? React__default['default'].createElement('img', {
380
380
  style: { objectFit: 'cover', objectPosition: 'center' },
381
381
  src: article.thumbnail && urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 }),
@@ -388,13 +388,13 @@ var RelatedArticle = function RelatedArticle(_ref) {
388
388
  ),
389
389
  React__default['default'].createElement(
390
390
  'div',
391
- { className: styles.mediaBody },
391
+ { className: styles$1.mediaBody },
392
392
  React__default['default'].createElement(
393
393
  'a',
394
394
  { href: '/view/' + (article.url ? article.url.current : '') },
395
395
  React__default['default'].createElement(
396
396
  'div',
397
- { className: styles.cardTitle },
397
+ { className: styles$1.cardTitle },
398
398
  article.title
399
399
  )
400
400
  )
@@ -450,7 +450,349 @@ var getSocialShareDisableFlag = function getSocialShareDisableFlag(article) {
450
450
  return showSocialShare;
451
451
  };
452
452
 
453
- var Article = React.forwardRef(function (props, ref) {
453
+ 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}";
454
+ 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" };
455
+ styleInject_es.styleInject(css);
456
+
457
+ var _this$2 = undefined;
458
+
459
+ var Recommended = function Recommended(props) {
460
+ var article = props.article,
461
+ client = props.client,
462
+ _props$index = props.index,
463
+ index = _props$index === undefined ? 0 : _props$index,
464
+ cpModificationRequired = props.cpModificationRequired;
465
+
466
+ var _useState = React.useState(false),
467
+ _useState2 = slicedToArray._slicedToArray(_useState, 2),
468
+ segmentLoaded = _useState2[0],
469
+ setSegmentLoaded = _useState2[1];
470
+
471
+ var _useState3 = React.useState([]),
472
+ _useState4 = slicedToArray._slicedToArray(_useState3, 2),
473
+ articles = _useState4[0],
474
+ setArticles = _useState4[1];
475
+
476
+ var _useState5 = React.useState(false),
477
+ _useState6 = slicedToArray._slicedToArray(_useState5, 2),
478
+ loaded = _useState6[0],
479
+ setLoaded = _useState6[1];
480
+
481
+ var starting = index * 5;
482
+ var contentMapping = {
483
+ videos: 'video',
484
+ articles: 'article',
485
+ podcasts: 'podcast'
486
+ };
487
+
488
+ var mainCategories = article.content_placement.filter(function (cp) {
489
+ return cp.usedForRecommendations === true;
490
+ }).map(function (cp) {
491
+ return cp.name;
492
+ }).sort();
493
+
494
+ React.useEffect(function () {
495
+ try {
496
+ if (!segmentLoaded) {
497
+ return;
498
+ }
499
+ if (mainCategories.length > 0) {
500
+ //console.log(mainCategories)
501
+ analytics.track('Article Category Viewed', {
502
+ categories: stringify._JSON$stringify(mainCategories)
503
+ });
504
+ }
505
+ var anonymousId = analytics.user().anonymousId();
506
+ // get users traits
507
+ var getSegmentProfile = function () {
508
+ var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee() {
509
+ var response, data, addTaxonomyName, favoriteCategories, articlesQuery, videosQuery, podcastQuery, params, _ref2, _ref3, _articles, videos, podcasts;
510
+
511
+ return asyncToGenerator.regenerator.wrap(function _callee$(_context) {
512
+ while (1) {
513
+ switch (_context.prev = _context.next) {
514
+ case 0:
515
+ _context.next = 2;
516
+ return fetch('/api/getSegmentProfile', {
517
+ method: 'POST',
518
+ body: stringify._JSON$stringify({ anonymousId: anonymousId })
519
+ });
520
+
521
+ case 2:
522
+ response = _context.sent;
523
+ _context.next = 5;
524
+ return response.json();
525
+
526
+ case 5:
527
+ data = _context.sent;
528
+
529
+ if (!(data && data.traits && data.traits.favorite_article_category)) {
530
+ _context.next = 21;
531
+ break;
532
+ }
533
+
534
+ //console.log('%csegment user profile', 'font-size:1.5rem;color:#000000;padding:1rem;background-color:yellow;', data.traits)
535
+
536
+ addTaxonomyName = function addTaxonomyName(taxArr) {
537
+ if (!taxArr) return '';
538
+ var query = ' && ( ';
539
+ taxArr.forEach(function (item, index) {
540
+ if (index === 0) {
541
+ query = query + ('name == \'' + item + '\'');
542
+ } else {
543
+ query = query + (' || name == \'' + item + '\'');
544
+ }
545
+ });
546
+
547
+ query = query + ' )';
548
+
549
+ console.log(query);
550
+
551
+ return query;
552
+ };
553
+
554
+ favoriteCategories = JSON.parse(data.traits.favorite_article_category);
555
+ // grab 3 articles from sanity different from the one currently being read
556
+
557
+ 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\' ' + addTaxonomyName(favoriteCategories) + ']._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 }';
558
+ 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\' ' + addTaxonomyName(favoriteCategories) + ' ]._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 }';
559
+ 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\' ' + addTaxonomyName(favoriteCategories) + ']._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 }';
560
+ params = {
561
+ id: article._id
562
+ };
563
+ _context.next = 15;
564
+ return asyncToGenerator._Promise.all([client.fetch(articlesQuery, params), client.fetch(videosQuery, params), client.fetch(podcastQuery, params)]);
565
+
566
+ case 15:
567
+ _ref2 = _context.sent;
568
+ _ref3 = slicedToArray._slicedToArray(_ref2, 3);
569
+ _articles = _ref3[0];
570
+ videos = _ref3[1];
571
+ podcasts = _ref3[2];
572
+
573
+ if (_articles) {
574
+ if (videos[0] && _articles[2]) {
575
+ _articles[2] = videos[0];
576
+ }
577
+ if (videos[1] && _articles[4]) {
578
+ _articles[4] = videos[1];
579
+ }
580
+ if (podcasts[0] && _articles[3]) {
581
+ _articles[3] = podcasts[0];
582
+ }
583
+ setArticles(_articles);
584
+ }
585
+
586
+ case 21:
587
+ case 'end':
588
+ return _context.stop();
589
+ }
590
+ }
591
+ }, _callee, _this$2);
592
+ }));
593
+
594
+ return function getSegmentProfile() {
595
+ return _ref.apply(this, arguments);
596
+ };
597
+ }();
598
+
599
+ getSegmentProfile();
600
+ } catch (err) {
601
+ console.log(err);
602
+ }
603
+ }, [segmentLoaded]);
604
+
605
+ React.useEffect(function () {
606
+ if (articles && articles.length > 0) {
607
+ setLoaded(true);
608
+ }
609
+ }, [articles]);
610
+
611
+ React.useEffect(function () {
612
+ try {
613
+ analytics.ready(function () {
614
+ setSegmentLoaded(function () {
615
+ return true;
616
+ });
617
+ });
618
+ } catch (err) {
619
+ console.log(err);
620
+ }
621
+ }, []);
622
+
623
+ return React__default['default'].createElement(
624
+ 'div',
625
+ { id: 'recommended' },
626
+ loaded ? React__default['default'].createElement(
627
+ React__default['default'].Fragment,
628
+ null,
629
+ React__default['default'].createElement(
630
+ 'h4',
631
+ { className: styles.recommendTitle },
632
+ 'Recommended For You'
633
+ ),
634
+ React__default['default'].createElement(
635
+ 'div',
636
+ { className: styles.recommendContainer, id: 'recommendedContent' },
637
+ articles.map(function (article, index) {
638
+ if (index === 0) {
639
+ return React__default['default'].createElement(
640
+ 'div',
641
+ { key: article._id + ('-' + index), className: styles.recommendTop },
642
+ React__default['default'].createElement(
643
+ 'div',
644
+ { className: styles.recommendTopImg },
645
+ React__default['default'].createElement(
646
+ 'a',
647
+ { href: '/view/' + article.url.current },
648
+ React__default['default'].createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 306, imageWidth: 544 }) })
649
+ )
650
+ ),
651
+ React__default['default'].createElement(
652
+ 'div',
653
+ { className: styles.recommendTopBody },
654
+ React__default['default'].createElement(
655
+ 'div',
656
+ { className: styles.topTitle },
657
+ article.title
658
+ ),
659
+ React__default['default'].createElement(
660
+ 'p',
661
+ { className: styles.topBody },
662
+ article.summary
663
+ ),
664
+ React__default['default'].createElement(
665
+ 'a',
666
+ { href: '/view/' + article.url.current, className: styles.topLink },
667
+ '>> ',
668
+ 'Read Article'
669
+ )
670
+ )
671
+ );
672
+ } else {
673
+ return React__default['default'].createElement(
674
+ 'div',
675
+ { key: article._id + ('-' + index), className: styles.smContainer },
676
+ React__default['default'].createElement(
677
+ 'div',
678
+ { className: styles.category },
679
+ contentMapping[article.contentCategory.name.toLowerCase()] ? contentMapping[article.contentCategory.name.toLowerCase()] : article.contentCategory.name
680
+ ),
681
+ React__default['default'].createElement(
682
+ 'a',
683
+ { href: '/view/' + article.url.current },
684
+ React__default['default'].createElement(
685
+ 'div',
686
+ { className: styles.smImage },
687
+ React__default['default'].createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 270, imageWidth: 480 }) })
688
+ ),
689
+ React__default['default'].createElement(
690
+ 'div',
691
+ { className: styles.title },
692
+ article.title
693
+ )
694
+ )
695
+ );
696
+ }
697
+ })
698
+ )
699
+ ) : React__default['default'].createElement(
700
+ 'section',
701
+ { id: 'related-content-section', className: 'my-1' },
702
+ (article.relatedArticle || RelevantTopics()) && React__default['default'].createElement(
703
+ 'p',
704
+ { className: 'mb-0' },
705
+ React__default['default'].createElement(
706
+ 'b',
707
+ null,
708
+ 'Related Content:'
709
+ )
710
+ ),
711
+ React__default['default'].createElement(RelevantTopics, { article: article, cpModificationRequired: cpModificationRequired, Settings: props.Settings }),
712
+ React__default['default'].createElement(
713
+ 'div',
714
+ { className: 'pt-2' },
715
+ React__default['default'].createElement(RelatedArticle, {
716
+ articles: article.relatedArticle,
717
+ client: client,
718
+ fallbackImage: props.Settings.logo,
719
+ showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
720
+ })
721
+ )
722
+ )
723
+ );
724
+ };
725
+
726
+ var RelevantTopics = function RelevantTopics(props) {
727
+ var article = props.article,
728
+ cpModificationRequired = props.cpModificationRequired;
729
+ var content_placement = article.content_placement,
730
+ documentGroupMapping = article.documentGroupMapping,
731
+ issueGroup = article.issueGroup;
732
+
733
+ if (content_placement && content_placement.length > 0 || documentGroupMapping && documentGroupMapping.length > 0) {
734
+ var relatedLinks = [];
735
+ if (documentGroupMapping && documentGroupMapping.length > 0) {
736
+ documentGroupMapping.forEach(function (documentGroup) {
737
+ if (documentGroup.isShow === false || documentGroup.excludeRelatedContents) {
738
+ return null;
739
+ }
740
+ if (documentGroup.parent) {
741
+ relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{
742
+ label: documentGroup.name,
743
+ href: cpModificationRequired ? getDocumentGroupUrl(documentGroup) : documentGroup.parent.identifier && documentGroup.parent.identifier.current && !documentGroup.path.includes('/') ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path
744
+ }]);
745
+ }
746
+ });
747
+ }
748
+ if (content_placement && content_placement.length > 0) {
749
+ content_placement.filter(function (item) {
750
+ return item.path !== 'news';
751
+ }).forEach(function (cp) {
752
+ if (cp.excludeRelatedContents) {
753
+ return null;
754
+ }
755
+ var cp_url = cpModificationRequired ? getTargeting.getContentPlacementUrl(cp) : cp.path;
756
+ var href = '/' + cp_url;
757
+ relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{ label: cp.name, href: href }]);
758
+ });
759
+ }
760
+ if (issueGroup && issueGroup.name && issueGroup.identifier && issueGroup.identifier.current && issueGroup.parent && issueGroup.parent.identifier && issueGroup.parent.identifier.current) {
761
+ var _props$Settings$issue = props.Settings.issueMapping,
762
+ issueMapping = _props$Settings$issue === undefined ? '/publications' : _props$Settings$issue;
763
+
764
+ relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{ label: issueGroup.name, href: issueMapping + '/' + issueGroup.parent.identifier.current + '/' + issueGroup.identifier.current }]);
765
+ }
766
+ if (relatedLinks && relatedLinks.length > 0) {
767
+ return React__default['default'].createElement(
768
+ 'div',
769
+ null,
770
+ relatedLinks.map(function (relatedLink, index) {
771
+ if (relatedLink && relatedLink.href && relatedLink.label) {
772
+ return React__default['default'].createElement(
773
+ 'span',
774
+ { key: relatedLink.label, className: 'related-link' },
775
+ React__default['default'].createElement(
776
+ 'a',
777
+ { className: 'related-links', style: { color: 'blue' }, href: relatedLink.href },
778
+ relatedLink.label
779
+ ),
780
+ React__default['default'].createElement(
781
+ 'style',
782
+ { jsx: 'true' },
783
+ '\n .related-link:not(:first-child):before {\n content: \' | \';\n }\n '
784
+ )
785
+ );
786
+ }
787
+ })
788
+ );
789
+ }
790
+ return null;
791
+ }
792
+ return null;
793
+ };
794
+
795
+ var Article = React__default['default'].memo(React.forwardRef(function (props, ref) {
454
796
  var onVote = function () {
455
797
  var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee(nodeKey, selectedChoice) {
456
798
  var response, result;
@@ -563,7 +905,9 @@ var Article = React.forwardRef(function (props, ref) {
563
905
  disqusConfig = props.disqusConfig,
564
906
  showDisqus = props.showDisqus,
565
907
  _props$downloadCitati = props.downloadCitation,
566
- downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati;
908
+ downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati,
909
+ _props$useSegmentReco = props.useSegmentRecommendedArticles,
910
+ useSegmentRecommendedArticles = _props$useSegmentReco === undefined ? false : _props$useSegmentReco;
567
911
  var sliderData = props.sliderData;
568
912
 
569
913
 
@@ -796,27 +1140,31 @@ var Article = React.forwardRef(function (props, ref) {
796
1140
 
797
1141
  var RelatedContent = function RelatedContent() {
798
1142
  return React__default['default'].createElement(
799
- 'section',
800
- { id: 'related-content-section', className: 'my-1' },
801
- (article.relatedArticle || RelevantTopics()) && React__default['default'].createElement(
802
- 'p',
803
- { className: 'mb-0' },
1143
+ 'div',
1144
+ null,
1145
+ useSegmentRecommendedArticles ? React__default['default'].createElement(Recommended, { client: client, article: article, index: props.index, Settings: props.Settings, showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage, cpModificationRequired: cpModificationRequired }) : React__default['default'].createElement(
1146
+ 'section',
1147
+ { id: 'related-content-section', className: 'my-1' },
1148
+ (article.relatedArticle || RelevantTopics()) && React__default['default'].createElement(
1149
+ 'p',
1150
+ { className: 'mb-0' },
1151
+ React__default['default'].createElement(
1152
+ 'b',
1153
+ null,
1154
+ 'Related Content:'
1155
+ )
1156
+ ),
1157
+ React__default['default'].createElement(RelevantTopics, null),
804
1158
  React__default['default'].createElement(
805
- 'b',
806
- null,
807
- 'Related Content:'
1159
+ 'div',
1160
+ { className: 'pt-2' },
1161
+ React__default['default'].createElement(RelatedArticle, {
1162
+ articles: article.relatedArticle,
1163
+ client: client,
1164
+ fallbackImage: props.Settings.logo,
1165
+ showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
1166
+ })
808
1167
  )
809
- ),
810
- React__default['default'].createElement(RelevantTopics, null),
811
- React__default['default'].createElement(
812
- 'div',
813
- { className: 'pt-2' },
814
- React__default['default'].createElement(RelatedArticle, {
815
- articles: article.relatedArticle,
816
- client: client,
817
- fallbackImage: props.Settings.logo,
818
- showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
819
- })
820
1168
  )
821
1169
  );
822
1170
  };
@@ -1427,6 +1775,8 @@ var Article = React.forwardRef(function (props, ref) {
1427
1775
  } else {
1428
1776
  return detail();
1429
1777
  }
1778
+ }), function (prevProps, nextProps) {
1779
+ return prevProps.article === nextProps.article;
1430
1780
  });
1431
1781
 
1432
1782
  var _this$1 = undefined;
@@ -1711,7 +2061,8 @@ var ArticleQueue = function ArticleQueue(props) {
1711
2061
  active: active === article._id
1712
2062
  // Passing queueData to check for single article
1713
2063
  , queueData: queueData,
1714
- showRelatedArticles: showRelatedArticles
2064
+ showRelatedArticles: showRelatedArticles,
2065
+ index: index
1715
2066
  }))
1716
2067
  );
1717
2068
  })
package/dist/esm/View.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-958ef5fc.js';
1
+ import { _ as _asyncToGenerator, r as regenerator, a as _Promise } from './asyncToGenerator-958ef5fc.js';
2
2
  import { _ as _extends, a as _Object$assign } from './extends-6d8e3924.js';
3
3
  import { a as _getIterator, _ as _slicedToArray } from './slicedToArray-6ebcbfea.js';
4
4
  import React__default, { useState, useRef, useEffect, forwardRef } from 'react';
@@ -18,7 +18,7 @@ import SocialShare from './SocialShare.js';
18
18
  import { r as renderAuthor, g as getSerializers } from './index-6dc67bdb.js';
19
19
  import DFPAdSlot from './AdSlot.js';
20
20
  import { S as SeriesSlider } from './SeriesSlider-45adb8dc.js';
21
- import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-42f9b439.js';
21
+ import { a as getContentPlacementUrl, g as getTargeting } from './getTargeting-42f9b439.js';
22
22
  import getKeywords from './getKeywords.js';
23
23
  import urlFor from './urlFor.js';
24
24
  import { u as urlForFile } from './urlForFile-b69adffc.js';
@@ -340,9 +340,9 @@ var ISI = function ISI(props) {
340
340
  );
341
341
  };
342
342
 
343
- 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";
344
- 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" };
345
- styleInject(css);
343
+ 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";
344
+ 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" };
345
+ styleInject(css$1);
346
346
 
347
347
  var RelatedArticle = function RelatedArticle(_ref) {
348
348
  var articles = _ref.articles,
@@ -356,15 +356,15 @@ var RelatedArticle = function RelatedArticle(_ref) {
356
356
  }
357
357
  return React__default.createElement(
358
358
  'div',
359
- { className: styles.mediaContainer },
359
+ { className: styles$1.mediaContainer },
360
360
  articles.map(function (article, index) {
361
361
  if (article && article.url && article.url.current) {
362
362
  return React__default.createElement(
363
363
  'div',
364
- { id: 'related-card', key: index, className: styles.mediaCard },
364
+ { id: 'related-card', key: index, className: styles$1.mediaCard },
365
365
  React__default.createElement(
366
366
  'a',
367
- { className: styles.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
367
+ { className: styles$1.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
368
368
  article.thumbnail ? React__default.createElement('img', {
369
369
  style: { objectFit: 'cover', objectPosition: 'center' },
370
370
  src: article.thumbnail && urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 }),
@@ -377,13 +377,13 @@ var RelatedArticle = function RelatedArticle(_ref) {
377
377
  ),
378
378
  React__default.createElement(
379
379
  'div',
380
- { className: styles.mediaBody },
380
+ { className: styles$1.mediaBody },
381
381
  React__default.createElement(
382
382
  'a',
383
383
  { href: '/view/' + (article.url ? article.url.current : '') },
384
384
  React__default.createElement(
385
385
  'div',
386
- { className: styles.cardTitle },
386
+ { className: styles$1.cardTitle },
387
387
  article.title
388
388
  )
389
389
  )
@@ -439,7 +439,349 @@ var getSocialShareDisableFlag = function getSocialShareDisableFlag(article) {
439
439
  return showSocialShare;
440
440
  };
441
441
 
442
- var Article = forwardRef(function (props, ref) {
442
+ 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}";
443
+ 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" };
444
+ styleInject(css);
445
+
446
+ var _this$2 = undefined;
447
+
448
+ var Recommended = function Recommended(props) {
449
+ var article = props.article,
450
+ client = props.client,
451
+ _props$index = props.index,
452
+ index = _props$index === undefined ? 0 : _props$index,
453
+ cpModificationRequired = props.cpModificationRequired;
454
+
455
+ var _useState = useState(false),
456
+ _useState2 = _slicedToArray(_useState, 2),
457
+ segmentLoaded = _useState2[0],
458
+ setSegmentLoaded = _useState2[1];
459
+
460
+ var _useState3 = useState([]),
461
+ _useState4 = _slicedToArray(_useState3, 2),
462
+ articles = _useState4[0],
463
+ setArticles = _useState4[1];
464
+
465
+ var _useState5 = useState(false),
466
+ _useState6 = _slicedToArray(_useState5, 2),
467
+ loaded = _useState6[0],
468
+ setLoaded = _useState6[1];
469
+
470
+ var starting = index * 5;
471
+ var contentMapping = {
472
+ videos: 'video',
473
+ articles: 'article',
474
+ podcasts: 'podcast'
475
+ };
476
+
477
+ var mainCategories = article.content_placement.filter(function (cp) {
478
+ return cp.usedForRecommendations === true;
479
+ }).map(function (cp) {
480
+ return cp.name;
481
+ }).sort();
482
+
483
+ useEffect(function () {
484
+ try {
485
+ if (!segmentLoaded) {
486
+ return;
487
+ }
488
+ if (mainCategories.length > 0) {
489
+ //console.log(mainCategories)
490
+ analytics.track('Article Category Viewed', {
491
+ categories: _JSON$stringify(mainCategories)
492
+ });
493
+ }
494
+ var anonymousId = analytics.user().anonymousId();
495
+ // get users traits
496
+ var getSegmentProfile = function () {
497
+ var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
498
+ var response, data, addTaxonomyName, favoriteCategories, articlesQuery, videosQuery, podcastQuery, params, _ref2, _ref3, _articles, videos, podcasts;
499
+
500
+ return regenerator.wrap(function _callee$(_context) {
501
+ while (1) {
502
+ switch (_context.prev = _context.next) {
503
+ case 0:
504
+ _context.next = 2;
505
+ return fetch('/api/getSegmentProfile', {
506
+ method: 'POST',
507
+ body: _JSON$stringify({ anonymousId: anonymousId })
508
+ });
509
+
510
+ case 2:
511
+ response = _context.sent;
512
+ _context.next = 5;
513
+ return response.json();
514
+
515
+ case 5:
516
+ data = _context.sent;
517
+
518
+ if (!(data && data.traits && data.traits.favorite_article_category)) {
519
+ _context.next = 21;
520
+ break;
521
+ }
522
+
523
+ //console.log('%csegment user profile', 'font-size:1.5rem;color:#000000;padding:1rem;background-color:yellow;', data.traits)
524
+
525
+ addTaxonomyName = function addTaxonomyName(taxArr) {
526
+ if (!taxArr) return '';
527
+ var query = ' && ( ';
528
+ taxArr.forEach(function (item, index) {
529
+ if (index === 0) {
530
+ query = query + ('name == \'' + item + '\'');
531
+ } else {
532
+ query = query + (' || name == \'' + item + '\'');
533
+ }
534
+ });
535
+
536
+ query = query + ' )';
537
+
538
+ console.log(query);
539
+
540
+ return query;
541
+ };
542
+
543
+ favoriteCategories = JSON.parse(data.traits.favorite_article_category);
544
+ // grab 3 articles from sanity different from the one currently being read
545
+
546
+ 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\' ' + addTaxonomyName(favoriteCategories) + ']._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 }';
547
+ 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\' ' + addTaxonomyName(favoriteCategories) + ' ]._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 }';
548
+ 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\' ' + addTaxonomyName(favoriteCategories) + ']._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 }';
549
+ params = {
550
+ id: article._id
551
+ };
552
+ _context.next = 15;
553
+ return _Promise.all([client.fetch(articlesQuery, params), client.fetch(videosQuery, params), client.fetch(podcastQuery, params)]);
554
+
555
+ case 15:
556
+ _ref2 = _context.sent;
557
+ _ref3 = _slicedToArray(_ref2, 3);
558
+ _articles = _ref3[0];
559
+ videos = _ref3[1];
560
+ podcasts = _ref3[2];
561
+
562
+ if (_articles) {
563
+ if (videos[0] && _articles[2]) {
564
+ _articles[2] = videos[0];
565
+ }
566
+ if (videos[1] && _articles[4]) {
567
+ _articles[4] = videos[1];
568
+ }
569
+ if (podcasts[0] && _articles[3]) {
570
+ _articles[3] = podcasts[0];
571
+ }
572
+ setArticles(_articles);
573
+ }
574
+
575
+ case 21:
576
+ case 'end':
577
+ return _context.stop();
578
+ }
579
+ }
580
+ }, _callee, _this$2);
581
+ }));
582
+
583
+ return function getSegmentProfile() {
584
+ return _ref.apply(this, arguments);
585
+ };
586
+ }();
587
+
588
+ getSegmentProfile();
589
+ } catch (err) {
590
+ console.log(err);
591
+ }
592
+ }, [segmentLoaded]);
593
+
594
+ useEffect(function () {
595
+ if (articles && articles.length > 0) {
596
+ setLoaded(true);
597
+ }
598
+ }, [articles]);
599
+
600
+ useEffect(function () {
601
+ try {
602
+ analytics.ready(function () {
603
+ setSegmentLoaded(function () {
604
+ return true;
605
+ });
606
+ });
607
+ } catch (err) {
608
+ console.log(err);
609
+ }
610
+ }, []);
611
+
612
+ return React__default.createElement(
613
+ 'div',
614
+ { id: 'recommended' },
615
+ loaded ? React__default.createElement(
616
+ React__default.Fragment,
617
+ null,
618
+ React__default.createElement(
619
+ 'h4',
620
+ { className: styles.recommendTitle },
621
+ 'Recommended For You'
622
+ ),
623
+ React__default.createElement(
624
+ 'div',
625
+ { className: styles.recommendContainer, id: 'recommendedContent' },
626
+ articles.map(function (article, index) {
627
+ if (index === 0) {
628
+ return React__default.createElement(
629
+ 'div',
630
+ { key: article._id + ('-' + index), className: styles.recommendTop },
631
+ React__default.createElement(
632
+ 'div',
633
+ { className: styles.recommendTopImg },
634
+ React__default.createElement(
635
+ 'a',
636
+ { href: '/view/' + article.url.current },
637
+ React__default.createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 306, imageWidth: 544 }) })
638
+ )
639
+ ),
640
+ React__default.createElement(
641
+ 'div',
642
+ { className: styles.recommendTopBody },
643
+ React__default.createElement(
644
+ 'div',
645
+ { className: styles.topTitle },
646
+ article.title
647
+ ),
648
+ React__default.createElement(
649
+ 'p',
650
+ { className: styles.topBody },
651
+ article.summary
652
+ ),
653
+ React__default.createElement(
654
+ 'a',
655
+ { href: '/view/' + article.url.current, className: styles.topLink },
656
+ '>> ',
657
+ 'Read Article'
658
+ )
659
+ )
660
+ );
661
+ } else {
662
+ return React__default.createElement(
663
+ 'div',
664
+ { key: article._id + ('-' + index), className: styles.smContainer },
665
+ React__default.createElement(
666
+ 'div',
667
+ { className: styles.category },
668
+ contentMapping[article.contentCategory.name.toLowerCase()] ? contentMapping[article.contentCategory.name.toLowerCase()] : article.contentCategory.name
669
+ ),
670
+ React__default.createElement(
671
+ 'a',
672
+ { href: '/view/' + article.url.current },
673
+ React__default.createElement(
674
+ 'div',
675
+ { className: styles.smImage },
676
+ React__default.createElement('img', { src: urlFor({ source: article.thumbnail, client: client, imageHeight: 270, imageWidth: 480 }) })
677
+ ),
678
+ React__default.createElement(
679
+ 'div',
680
+ { className: styles.title },
681
+ article.title
682
+ )
683
+ )
684
+ );
685
+ }
686
+ })
687
+ )
688
+ ) : React__default.createElement(
689
+ 'section',
690
+ { id: 'related-content-section', className: 'my-1' },
691
+ (article.relatedArticle || RelevantTopics()) && React__default.createElement(
692
+ 'p',
693
+ { className: 'mb-0' },
694
+ React__default.createElement(
695
+ 'b',
696
+ null,
697
+ 'Related Content:'
698
+ )
699
+ ),
700
+ React__default.createElement(RelevantTopics, { article: article, cpModificationRequired: cpModificationRequired, Settings: props.Settings }),
701
+ React__default.createElement(
702
+ 'div',
703
+ { className: 'pt-2' },
704
+ React__default.createElement(RelatedArticle, {
705
+ articles: article.relatedArticle,
706
+ client: client,
707
+ fallbackImage: props.Settings.logo,
708
+ showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
709
+ })
710
+ )
711
+ )
712
+ );
713
+ };
714
+
715
+ var RelevantTopics = function RelevantTopics(props) {
716
+ var article = props.article,
717
+ cpModificationRequired = props.cpModificationRequired;
718
+ var content_placement = article.content_placement,
719
+ documentGroupMapping = article.documentGroupMapping,
720
+ issueGroup = article.issueGroup;
721
+
722
+ if (content_placement && content_placement.length > 0 || documentGroupMapping && documentGroupMapping.length > 0) {
723
+ var relatedLinks = [];
724
+ if (documentGroupMapping && documentGroupMapping.length > 0) {
725
+ documentGroupMapping.forEach(function (documentGroup) {
726
+ if (documentGroup.isShow === false || documentGroup.excludeRelatedContents) {
727
+ return null;
728
+ }
729
+ if (documentGroup.parent) {
730
+ relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{
731
+ label: documentGroup.name,
732
+ href: cpModificationRequired ? getDocumentGroupUrl(documentGroup) : documentGroup.parent.identifier && documentGroup.parent.identifier.current && !documentGroup.path.includes('/') ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path
733
+ }]);
734
+ }
735
+ });
736
+ }
737
+ if (content_placement && content_placement.length > 0) {
738
+ content_placement.filter(function (item) {
739
+ return item.path !== 'news';
740
+ }).forEach(function (cp) {
741
+ if (cp.excludeRelatedContents) {
742
+ return null;
743
+ }
744
+ var cp_url = cpModificationRequired ? getContentPlacementUrl(cp) : cp.path;
745
+ var href = '/' + cp_url;
746
+ relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: cp.name, href: href }]);
747
+ });
748
+ }
749
+ if (issueGroup && issueGroup.name && issueGroup.identifier && issueGroup.identifier.current && issueGroup.parent && issueGroup.parent.identifier && issueGroup.parent.identifier.current) {
750
+ var _props$Settings$issue = props.Settings.issueMapping,
751
+ issueMapping = _props$Settings$issue === undefined ? '/publications' : _props$Settings$issue;
752
+
753
+ relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: issueGroup.name, href: issueMapping + '/' + issueGroup.parent.identifier.current + '/' + issueGroup.identifier.current }]);
754
+ }
755
+ if (relatedLinks && relatedLinks.length > 0) {
756
+ return React__default.createElement(
757
+ 'div',
758
+ null,
759
+ relatedLinks.map(function (relatedLink, index) {
760
+ if (relatedLink && relatedLink.href && relatedLink.label) {
761
+ return React__default.createElement(
762
+ 'span',
763
+ { key: relatedLink.label, className: 'related-link' },
764
+ React__default.createElement(
765
+ 'a',
766
+ { className: 'related-links', style: { color: 'blue' }, href: relatedLink.href },
767
+ relatedLink.label
768
+ ),
769
+ React__default.createElement(
770
+ 'style',
771
+ { jsx: 'true' },
772
+ '\n .related-link:not(:first-child):before {\n content: \' | \';\n }\n '
773
+ )
774
+ );
775
+ }
776
+ })
777
+ );
778
+ }
779
+ return null;
780
+ }
781
+ return null;
782
+ };
783
+
784
+ var Article = React__default.memo(forwardRef(function (props, ref) {
443
785
  var onVote = function () {
444
786
  var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(nodeKey, selectedChoice) {
445
787
  var response, result;
@@ -552,7 +894,9 @@ var Article = forwardRef(function (props, ref) {
552
894
  disqusConfig = props.disqusConfig,
553
895
  showDisqus = props.showDisqus,
554
896
  _props$downloadCitati = props.downloadCitation,
555
- downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati;
897
+ downloadCitation = _props$downloadCitati === undefined ? false : _props$downloadCitati,
898
+ _props$useSegmentReco = props.useSegmentRecommendedArticles,
899
+ useSegmentRecommendedArticles = _props$useSegmentReco === undefined ? false : _props$useSegmentReco;
556
900
  var sliderData = props.sliderData;
557
901
 
558
902
 
@@ -785,27 +1129,31 @@ var Article = forwardRef(function (props, ref) {
785
1129
 
786
1130
  var RelatedContent = function RelatedContent() {
787
1131
  return React__default.createElement(
788
- 'section',
789
- { id: 'related-content-section', className: 'my-1' },
790
- (article.relatedArticle || RelevantTopics()) && React__default.createElement(
791
- 'p',
792
- { className: 'mb-0' },
1132
+ 'div',
1133
+ null,
1134
+ useSegmentRecommendedArticles ? React__default.createElement(Recommended, { client: client, article: article, index: props.index, Settings: props.Settings, showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage, cpModificationRequired: cpModificationRequired }) : React__default.createElement(
1135
+ 'section',
1136
+ { id: 'related-content-section', className: 'my-1' },
1137
+ (article.relatedArticle || RelevantTopics()) && React__default.createElement(
1138
+ 'p',
1139
+ { className: 'mb-0' },
1140
+ React__default.createElement(
1141
+ 'b',
1142
+ null,
1143
+ 'Related Content:'
1144
+ )
1145
+ ),
1146
+ React__default.createElement(RelevantTopics, null),
793
1147
  React__default.createElement(
794
- 'b',
795
- null,
796
- 'Related Content:'
1148
+ 'div',
1149
+ { className: 'pt-2' },
1150
+ React__default.createElement(RelatedArticle, {
1151
+ articles: article.relatedArticle,
1152
+ client: client,
1153
+ fallbackImage: props.Settings.logo,
1154
+ showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
1155
+ })
797
1156
  )
798
- ),
799
- React__default.createElement(RelevantTopics, null),
800
- React__default.createElement(
801
- 'div',
802
- { className: 'pt-2' },
803
- React__default.createElement(RelatedArticle, {
804
- articles: article.relatedArticle,
805
- client: client,
806
- fallbackImage: props.Settings.logo,
807
- showRelatedArticleFallbackImage: props.showRelatedArticleFallbackImage
808
- })
809
1157
  )
810
1158
  );
811
1159
  };
@@ -1416,6 +1764,8 @@ var Article = forwardRef(function (props, ref) {
1416
1764
  } else {
1417
1765
  return detail();
1418
1766
  }
1767
+ }), function (prevProps, nextProps) {
1768
+ return prevProps.article === nextProps.article;
1419
1769
  });
1420
1770
 
1421
1771
  var _this$1 = undefined;
@@ -1700,7 +2050,8 @@ var ArticleQueue = function ArticleQueue(props) {
1700
2050
  active: active === article._id
1701
2051
  // Passing queueData to check for single article
1702
2052
  , queueData: queueData,
1703
- showRelatedArticles: showRelatedArticles
2053
+ showRelatedArticles: showRelatedArticles,
2054
+ index: index
1704
2055
  }))
1705
2056
  );
1706
2057
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.935",
3
+ "version": "1.0.937",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",