Feat(TMG-2380): added share and save entitlement

packages/article-extras/__tests__/web/__snapshots__/article-extras.test.js.snap

@@ -10,9 +10,6 @@ Array [
       <ArticleTopics />
     </nav>
   </div>,
-  <div>
-    <div />
-  </div>,
   <div
     id="related-articles"
   >
@@ -98,9 +95,6 @@ Array [
       <ArticleTopics />
     </nav>
   </div>,
-  <div>
-    <div />
-  </div>,
   <div
     id="related-articles"
   >
@@ -154,9 +148,6 @@ Array [
       <ArticleTopics />
     </nav>
   </div>,
-  <div>
-    <div />
-  </div>,
   <div
     id="related-articles"
   >

packages/article-extras/src/article-extras.js

@@ -38,12 +38,12 @@ const ArticleExtras = ({
   relatedArticlesVisible,
   commentingConfig,
   topics,
-  isSharingSavingEnabled,
   isCommentEnabled,
   storefrontConfig,
   breadcrumbs,
   domainSpecificUrl,
-  isEntitlementFeatureEnabled
+  isEntitlementFeatureEnabled,
+  isSharingSavingEntitlementEnabled
 }) => {
   const renderBreadcrumb = ({ showBorder } = { showBorder: false }) => {
     if (breadcrumbs && breadcrumbs.length > 0) {
@@ -90,6 +90,7 @@ const ArticleExtras = ({
       </PromotedContentContainer>
     </>
   );
+
   return (
     <UserState
       state={UserState.showArticleExtras}
@@ -98,26 +99,27 @@ const ArticleExtras = ({
       <div style={clearingStyle} />
       {renderBreadcrumb({ showBorder: topics && topics.length > 0 })}
       <ArticleTopics topics={topics} />
-      {isSharingSavingEnabled && (
-        <UserState state={UserState.showSaveAndShareBar}>
-          <MessageContext.Consumer>
-            {({ showMessage }) => (
-              <ShareAndSaveContainer showBottomBorder={!relatedArticleSlice}>
-                <SaveAndShareBar
-                  articleId={articleId}
-                  articleHeadline={articleHeadline}
-                  articleUrl={articleUrl}
-                  onCopyLink={() => showMessage("Article link copied")}
-                  onSaveToMyArticles={() => {}}
-                  onShareOnEmail={() => {}}
-                  savingEnabled={savingEnabled}
-                  sharingEnabled={sharingEnabled}
-                />
-              </ShareAndSaveContainer>
-            )}
-          </MessageContext.Consumer>
-        </UserState>
-      )}
+      <MessageContext.Consumer>
+        {({ showMessage }) => (
+          <ShareAndSaveContainer
+            showBottomBorder={!relatedArticleSlice}
+            isSharingSavingEntitlementEnabled={
+              isSharingSavingEntitlementEnabled
+            }
+          >
+            <SaveAndShareBar
+              articleId={articleId}
+              articleHeadline={articleHeadline}
+              articleUrl={articleUrl}
+              onCopyLink={() => showMessage("Article link copied")}
+              onSaveToMyArticles={() => {}}
+              onShareOnEmail={() => {}}
+              savingEnabled={savingEnabled}
+              sharingEnabled={sharingEnabled}
+            />
+          </ShareAndSaveContainer>
+        )}
+      </MessageContext.Consumer>
       {sponsoredArticlesAndRelatedArticles(true, false)}
       <ArticleComments
         articleId={articleId}
@@ -148,18 +150,17 @@ ArticleExtras.propTypes = {
   topics: PropTypes.arrayOf(PropTypes.shape({})),
   savingEnabled: PropTypes.bool.isRequired,
   sharingEnabled: PropTypes.bool.isRequired,
-  isSharingSavingEnabled: PropTypes.bool,
   isCommentEnabled: PropTypes.bool,
   storefrontConfig: PropTypes.string.isRequired,
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({})),
   domainSpecificUrl: PropTypes.string.isRequired,
-  isEntitlementFeatureEnabled: PropTypes.bool.isRequired
+  isEntitlementFeatureEnabled: PropTypes.bool.isRequired,
+  isSharingSavingEntitlementEnabled: PropTypes.bool.isRequired
 };
 
 ArticleExtras.defaultProps = {
   relatedArticleSlice: null,
   topics: null,
-  isSharingSavingEnabled: true,
   isCommentEnabled: true,
   breadcrumbs: []
 };

packages/article-extras/src/share-save-entitlement-state.js

@@ -0,0 +1,53 @@
+/* eslint-env browser */
+import PropTypes from "prop-types";
+
+const ShareSaveEntitlementState = ({ shareSaveEntitlementData, children }) => {
+  const FP_CODE_SHARE_AND_SAVE = "fp-753";
+
+  const featureDecisions =
+    (shareSaveEntitlementData &&
+      shareSaveEntitlementData.user &&
+      shareSaveEntitlementData.user.subscriptions &&
+      shareSaveEntitlementData.user.subscriptions[0] &&
+      shareSaveEntitlementData.user.subscriptions[0].featureDecisions) ||
+    [];
+
+  const isShareSaveEntitlementEnabled =
+    featureDecisions &&
+    featureDecisions.some(
+      decision =>
+        decision.code === FP_CODE_SHARE_AND_SAVE && decision.outcomeAsBoolean
+    );
+
+  if (
+    shareSaveEntitlementData === undefined ||
+    !isShareSaveEntitlementEnabled
+  ) {
+    return null;
+  }
+
+  return children;
+};
+
+const FeatureDecisionPropTypes = PropTypes.shape({
+  code: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  outcome: PropTypes.string.isRequired,
+  outcomeAsBoolean: PropTypes.bool.isRequired
+});
+
+const SubscriptionPropTypes = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  featureDecisions: PropTypes.arrayOf(FeatureDecisionPropTypes).isRequired
+});
+
+const UserPropTypes = PropTypes.shape({
+  cpn: PropTypes.string.isRequired,
+  subscriptions: PropTypes.arrayOf(SubscriptionPropTypes).isRequired
+});
+
+ShareSaveEntitlementState.PropTypes = PropTypes.shape({
+  user: UserPropTypes.isRequired
+});
+
+export default ShareSaveEntitlementState;

packages/article-extras/src/styles/responsive.js

@@ -2,12 +2,15 @@
 import styled from "styled-components";
 import { breakpoints, colours } from "@times-components/ts-styleguide";
 
-export const ShareAndSaveContainer = styled.div`
+export const ShareAndSaveContainer =
+  styled.div<{ isSharingSavingEntitlementEnabled: boolean }>
+  `
   border-top-color: ${colours.functional.keyline};
   border-top-style: solid;
   border-top-width: 1px;
   width: 56.2%;
   margin: 0 auto;
+  display: ${({isSharingSavingEntitlementEnabled}) => (isSharingSavingEntitlementEnabled ? "flex" : "none")};
 
   @media (max-width: ${breakpoints.huge}px) {
     display: none;

packages/article-in-depth/__tests__/web/__snapshots__/semantic.web.test.js.snap

@@ -333,153 +333,6 @@ exports[`1. a full article 1`] = `
           Topic
         </a>
       </nav>
-      <button>
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          height={14}
-          viewBox="0 0 16 16"
-          width={14}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="f816b9d168e3b4f52b448a8e0e73065a"
-          />
-        </svg>
-        Share
-      </button>
-      <h3>
-        Share this article
-      </h3>
-      <button>
-        <svg
-          height={12}
-          viewBox="0 0 14 14"
-          width={12}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="41814072799e1ba683d6814fad95e914"
-          />
-        </svg>
-      </button>
-      <a
-        data-testid="email-share"
-        href=""
-        target="_blank"
-        title="Share by email"
-      >
-        <svg
-          aria-label=""
-          height={16}
-          role="img"
-          title="Share by email"
-          viewBox="0 0 22 16"
-          width={22}
-        >
-          <title>
-            Share by email
-          </title>
-          <g>
-            <path
-              d="7662b27a9a5411e756afc5097a4eb94d"
-            />
-          </g>
-        </svg>
-        <span>
-          Email
-        </span>
-      </a>
-      <a
-        data-testid="share-twitter"
-        href="https://twitter.com/intent/tweet?text=https://url.io"
-        target="_blank"
-        title="Share on Twitter"
-      >
-        <svg
-          aria-label=""
-          height={16}
-          role="img"
-          title="Share on Twitter"
-          viewBox="0 0 24 24"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            Share on Twitter
-          </title>
-          <g
-            clipPath="url(#clip0_2702_211136)"
-          >
-            <path
-              d="e7781feea17d63d57f67e7eaa876efac"
-            />
-          </g>
-          <defs>
-            <clipPath>
-              <rect
-                height="24"
-                width="24"
-              />
-            </clipPath>
-          </defs>
-        </svg>
-        <span>
-          Twitter
-        </span>
-      </a>
-      <a
-        data-testid="share-facebook"
-        href="https://www.facebook.com/sharer/sharer.php?u=https://url.io"
-        target="_blank"
-        title="Share on Facebook"
-      >
-        <svg
-          aria-label=""
-          height={18}
-          role="img"
-          title="Share on Facebook"
-          viewBox="14 10 10.592460632324219 20.397258758544922"
-          width={9}
-        >
-          <title>
-            Share on Facebook
-          </title>
-          <g>
-            <path
-              d="8f9b8bbdce60b96352628d3dbf6e37a0"
-            />
-          </g>
-        </svg>
-        <span>
-          Facebook
-        </span>
-      </a>
-      <a
-        data-testid="copy-to-clickboard"
-        href="https://www.facebook.com/sharer/sharer.php?u=https://url.io"
-        target="_blank"
-        title="Copy link to clipboard"
-      >
-        <svg
-          aria-label=""
-          height={16}
-          role="img"
-          title="Copy link to clipboard"
-          viewBox="0 0 15 15"
-          width={15}
-        >
-          <title>
-            Copy link to clipboard
-          </title>
-          <path
-            d="f65af77b7574644b0c2e60934732135f"
-          />
-        </svg>
-        <span>
-          Link
-        </span>
-      </a>
       <span>
         PROMOTED CONTENT
       </span>