CORE-829 Add login gate

src/app/components/NavBar/index.tsx

@@ -151,6 +151,13 @@ const LoggedOutState: FunctionComponent<{currentPath: string}> = ({currentPath})
   </Styled.Link>}
 </FormattedMessage>;
 
+// tslint:disable-next-line:variable-name
+export const ConnectedLoginButton = connect(
+  (state: AppState) => ({
+    currentPath: selectNavigation.pathname(state),
+  })
+)(LoggedOutState);
+
 interface NavigationBarProps {
   user?: User;
   loggedOut: boolean;

src/app/content/components/Content.tsx

@@ -28,6 +28,7 @@ import {
 } from './constants';
 import ContentPane from './ContentPane';
 import ContentWarning from './ContentWarning';
+import LoginGate from './LoginGate';
 import LabsCTA from './LabsCall';
 import NudgeStudyTools from './NudgeStudyTools';
 import Page from './Page';
@@ -100,14 +101,16 @@ const Content = ({mobileExpanded, book}: {mobileExpanded: boolean; book: Book})
           <ConfirmationToastProvider>
             <Navigation />
             <ContentPane>
-              <Topbar />
-              <ContentNotifications mobileExpanded={mobileExpanded} />
-              <ContentWarning book={book} />
-              <Page>
-                <PrevNextBar />
-                <LabsCTA />
-                <BuyBook book={book} />
-              </Page>
+              <LoginGate book={book}>
+                <Topbar />
+                <ContentNotifications mobileExpanded={mobileExpanded} />
+                <ContentWarning book={book} />
+                <Page>
+                  <PrevNextBar />
+                  <LabsCTA />
+                  <BuyBook book={book} />
+                </Page>
+              </LoginGate>
               <Attribution />
               <Footer />
             </ContentPane>

src/app/content/components/LoginGate.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import LoginGate from './LoginGate';
+import renderer from 'react-test-renderer';
+import { book as archiveBook } from '../../../test/mocks/archiveLoader';
+import { mockCmsBook } from '../../../test/mocks/osWebLoader';
+import { formatBookData } from '../utils';
+import TestContainer from '../../../test/TestContainer';
+
+const dummyBook = {
+  ...formatBookData(archiveBook, mockCmsBook),
+  require_login_message_text: 'some warning text',
+};
+
+describe('LoginGate', () => {
+  it('renders when not authenticated', () => {
+    const component = renderer.create(<TestContainer>
+      <LoginGate book={dummyBook}>
+      </LoginGate>
+    </TestContainer>);
+
+    expect(component.root.findByType('a').props.href).toBe('/accounts/login?r=/');
+  });
+});

src/app/content/components/LoginGate.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Book } from '../types';
+import { hasOSWebData } from '../guards';
+import { ConnectedLoginButton } from '../../components/NavBar';
+import { user } from '../../auth/selectors';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components/macro';
+
+// tslint:disable-next-line:variable-name
+const WarningDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 1.8rem;
+  padding: 8rem 1.5rem;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 60rem;
+
+    a {
+      place-self: center;
+    }
+  }
+`;
+
+export default function LoginGate({
+  book,
+  children,
+}: React.PropsWithChildren<{ book: Book }>) {
+  const authenticated = !!useSelector(user);
+
+  if (
+    authenticated ||
+    !hasOSWebData(book) ||
+    !book.require_login_message_text
+  ) {
+    return <>{children}</>;
+  }
+  return (
+    <WarningDiv>
+      <div>
+        {book.require_login_message_text}
+        <ConnectedLoginButton />
+      </div>
+    </WarningDiv>
+  );
+}

src/app/content/hooks/locationChange.spec.ts

@@ -215,6 +215,7 @@ describe('contentRouteHookBody', () => {
       promote_image: null,
       publish_date: '2012-06-21',
       content_warning_text: '',
+      require_login_message_text: '',
       id: 72,
     };
 

src/app/content/types.ts

@@ -86,6 +86,7 @@ export interface BookWithOSWebData extends VersionedArchiveBookWithConfig {
     }
   };
   content_warning_text: string | null;
+  require_login_message_text: string | null;
   publish_date: string;
   amazon_link: string;
   polish_site_link: string;

src/app/content/utils.ts

@@ -106,6 +106,7 @@ export const formatBookData = <O extends OSWebBook | undefined>(
   return {
     ...pickArchiveFields(archiveBook),
     content_warning_text: osWebBook.content_warning_text,
+    require_login_message_text: osWebBook.require_login_message_text,
     amazon_link: osWebBook.amazon_link,
     polish_site_link: osWebBook.polish_site_link,
     authors: osWebBook.authors,

src/app/content/utils/seoUtils.spec.data.ts

@@ -76,6 +76,7 @@ export const mockOsWebBook: OSWebBook = {
   amazon_link: '',
   polish_site_link: '',
   content_warning_text: '',
+  require_login_message_text: '',
   id: 72,
 };
 

src/gateways/createOSWebLoader.ts

@@ -22,6 +22,7 @@ export interface OSWebBook {
   amazon_link: string;
   polish_site_link: string;
   content_warning_text: string | null;
+  require_login_message_text: string | null;
   id: number;
 }
 
@@ -44,6 +45,7 @@ export const fields = [
   'book_subjects',
   'book_categories',
   'content_warning_text',
+  // Should query require_login_message_text but it is not available yet
   'id',
 ].join(',');
 

src/test/fixtures/apps/cms/api/v2/pages/%3Ftype%3Dbooks.Book%26fields%3Dcnx_id%2Cauthors%2Cpublish_date%2Ccover_color%2Camazon_link%2Cbook_state%2Cpromote_image%2Cbook_subjects%2Cbook_categories%2Ccontent_warning_text%2Cid%26slug%3Dbook-slug-1

@@ -17,6 +17,7 @@
             "publish_date": "2012-06-21",
             "book_state": "live",
             "content_warning_text": "sensitive material is covered",
+            "require_login_message_text": "you have to log in",
             "id": 72
         }
     ]

src/test/mocks/osWebLoader.ts

@@ -15,6 +15,7 @@ export const mockCmsBook: OSWebBook = {
   promote_image: null,
   publish_date: '2012-06-21',
   content_warning_text: '',
+  require_login_message_text: '',
   id: 72,
 };