feat(TMG-2609): rendering commenting componenet based on Auth cookies decisions

packages/article-comments/__tests__/web/shared.web.test.js

@@ -25,6 +25,7 @@ const renderComments = ({
       url="dummy-article-url"
       isCommentEnabled
       domainSpecificUrl={domainSpecificUrl}
+      hasCommentingEntitlement
     />
   );
 
@@ -141,6 +142,7 @@ it("Render comments label, when comments are loaded", () => {
       url="dummy-article-url"
       isCommentEnabled
       domainSpecificUrl="https://www.thetimes.co.uk"
+      hasCommentingEntitlement
     />
   );
 
@@ -173,6 +175,7 @@ describe("window listeners added", () => {
         url="dummy-article-url"
         isCommentEnabled
         domainSpecificUrl="https://www.thetimes.co.uk"
+        hasCommentingEntitlement
       />
     );
     expect(Object.keys(listeners)).toMatchSnapshot();

packages/article-comments/src/article-comments.js

@@ -1,46 +1,27 @@
 /* eslint-env browser */
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import UserState from "@times-components/user-state";
 import Comments from "./comments";
 import DisabledComments from "./disabled-comments";
 import JoinTheConversationDialog from "./join-the-conversation-dialog";
-import UserEntitlementState from "./user-entitlement-state";
 
 const ArticleComments = ({
   articleId,
   isEnabled,
   isReadOnly,
   commentingConfig,
-  isCommentEnabled,
   storefrontConfig,
   domainSpecificUrl,
-  isEntitlementFeatureEnabled
-}) => {
-  const [userEntitlementData, setUserEntitlementData] = useState(undefined);
-
-  useEffect(
-    () => {
-      const fetchUserEntitlements = async () => {
-        const response = await fetch("/api/get-user-entitlements");
-        const data = await response.json();
-        setUserEntitlementData(data);
-      };
-
-      if (typeof window !== "undefined" && isEntitlementFeatureEnabled) {
-        fetchUserEntitlements();
-      }
-    },
-    [isEntitlementFeatureEnabled]
-  );
-
-  return isEnabled && isCommentEnabled ? (
+  hasCommentingEntitlement
+}) =>
+  isEnabled ? (
     <>
       <UserState state={UserState.showJoinTheConversationDialog}>
         <JoinTheConversationDialog storefrontConfig={storefrontConfig} />
       </UserState>
-      {!isEntitlementFeatureEnabled ? (
+      {hasCommentingEntitlement && (
         <UserState state={UserState.showCommentingModule}>
           <Comments
             articleId={articleId}
@@ -49,21 +30,11 @@ const ArticleComments = ({
             domainSpecificUrl={domainSpecificUrl}
           />
         </UserState>
-      ) : (
-        <UserEntitlementState userEntitlementData={userEntitlementData}>
-          <Comments
-            articleId={articleId}
-            isReadOnly={isReadOnly}
-            commentingConfig={commentingConfig}
-            domainSpecificUrl={domainSpecificUrl}
-          />
-        </UserEntitlementState>
       )}
     </>
   ) : (
     <DisabledComments />
   );
-};
 
 ArticleComments.propTypes = {
   articleId: PropTypes.string.isRequired,
@@ -73,14 +44,12 @@ ArticleComments.propTypes = {
     account: PropTypes.string.isRequired
   }).isRequired,
   storefrontConfig: PropTypes.string.isRequired,
-  isCommentEnabled: PropTypes.bool,
   domainSpecificUrl: PropTypes.string.isRequired,
-  isEntitlementFeatureEnabled: PropTypes.bool.isRequired
+  hasCommentingEntitlement: PropTypes.bool.isRequired
 };
 
 ArticleComments.defaultProps = {
-  isReadOnly: false,
-  isCommentEnabled: true
+  isReadOnly: false
 };
 
 export default ArticleComments;

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

@@ -48,7 +48,7 @@ const ArticleExtras = ({
   storefrontConfig,
   breadcrumbs,
   domainSpecificUrl,
-  isEntitlementFeatureEnabled
+  hasCommentingEntitlement
 }) => {
   const renderBreadcrumb = ({ showBorder } = { showBorder: false }) => {
     if (breadcrumbs && breadcrumbs.length > 0) {
@@ -150,7 +150,7 @@ const ArticleExtras = ({
         isCommentEnabled={isCommentEnabled}
         storefrontConfig={storefrontConfig}
         domainSpecificUrl={domainSpecificUrl}
-        isEntitlementFeatureEnabled={isEntitlementFeatureEnabled}
+        hasCommentingEntitlement={hasCommentingEntitlement}
       />
     </UserState>
   );
@@ -178,7 +178,7 @@ ArticleExtras.propTypes = {
   storefrontConfig: PropTypes.string.isRequired,
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({})),
   domainSpecificUrl: PropTypes.string.isRequired,
-  isEntitlementFeatureEnabled: PropTypes.bool.isRequired
+  hasCommentingEntitlement: PropTypes.bool.isRequired
 };
 
 ArticleExtras.defaultProps = {

packages/article-skeleton/src/article-skeleton.js

@@ -90,7 +90,7 @@ const ArticleSkeleton = ({
     isSavingEnabled,
     isSharingEnabled,
     isCommentEnabled,
-    isEntitlementFeatureEnabled
+    hasCommentingEntitlement
   } = article;
 
   const [showVerifyEmailBanner, setShowEmailVerifyBanner] = useState(false);
@@ -452,7 +452,7 @@ const ArticleSkeleton = ({
                       storefrontConfig={storefrontConfig}
                       breadcrumbs={breadcrumbs}
                       domainSpecificUrl={domainSpecificUrl}
-                      isEntitlementFeatureEnabled={isEntitlementFeatureEnabled}
+                      hasCommentingEntitlement={hasCommentingEntitlement}
                     />
                   )}
                 </LazyLoad>

packages/card/__tests__/web/__snapshots__/card-loading-style.test.js.snap

@@ -648,4 +648,4 @@ exports[`2. card with reversed loading state 1`] = `
     </div>
   </StyledComponent>
 </Animations__FadeIn>
-`;
+`;

packages/card/__tests__/web/__snapshots__/card.web.test.js.snap

@@ -1781,4 +1781,4 @@ exports[`15. card should re-render when loading state changes 2`] = `
     </div>
   </div>
 </div>
-`;
+`;

packages/ssr/src/client/article.js

@@ -20,7 +20,7 @@ if (window.nuk && window.nuk.ssr && window.nuk.article) {
     commentingFlag = true,
     showAudioPlayer,
     storefrontConfig,
-    isEntitlementFeatureEnabled
+    hasCommentingEntitlement
   } = window.nuk.article;
 
   const { getCookieValue } = window.nuk;
@@ -43,7 +43,7 @@ if (window.nuk && window.nuk.ssr && window.nuk.article) {
     commentingFlag,
     showAudioPlayer,
     storefrontConfig,
-    isEntitlementFeatureEnabled
+    hasCommentingEntitlement
   };
 
   const clientOptions = {

packages/ssr/src/component/article.js

@@ -37,7 +37,7 @@ module.exports = (client, analyticsStream, data, helmetContext) => {
     commentingFlag,
     showAudioPlayer,
     storefrontConfig,
-    isEntitlementFeatureEnabled
+    hasCommentingEntitlement
   } = data;
 
   return React.createElement(
@@ -87,7 +87,7 @@ module.exports = (client, analyticsStream, data, helmetContext) => {
                 isSavingEnabled: sharingSavingFlag,
                 isSharingEnabled: sharingSavingFlag,
                 isCommentEnabled: commentingFlag,
-                isEntitlementFeatureEnabled,
+                hasCommentingEntitlement,
                 isPreview
               },
               error,

packages/ssr/src/server/article.js

@@ -29,7 +29,7 @@ module.exports = (
     commentingFlag = true,
     showAudioPlayer,
     storefrontConfig,
-    isEntitlementFeatureEnabled = false
+    hasCommentingEntitlement = false
   },
   userState
 ) => {
@@ -86,7 +86,7 @@ module.exports = (
       commentingFlag,
       showAudioPlayer,
       storefrontConfig,
-      isEntitlementFeatureEnabled
+      hasCommentingEntitlement
     },
     name: "article"
   };