SFR-1969: Add "Read Online" functionality for UP items

CHANGELOG.md

@@ -8,6 +8,7 @@
 - SFR-2033: Verify the external NYPL header links of DRB App
 - Update PR template with new Jira link
 - Add error page for /read links with invalid source
+- Implement "Read Online" for UP items
 
 ## [0.18.1]
 

package.json

@@ -17,7 +17,7 @@
     "@chakra-ui/react": "2.5.4",
     "@newrelic/next": "^0.7.0",
     "@nypl/design-system-react-components": "3.1.1",
-    "@nypl/web-reader": "4.3.4",
+    "@nypl/web-reader": "4.3.5",
     "@types/node": "^16.11.6",
     "css-loader": "^7.1.1",
     "dotenv": "^16.0.3",
@@ -28,7 +28,7 @@
     "next": "^13.5.6",
     "next-transpile-modules": "^7.0.0",
     "react": "^18.2.0",
-    "react-cookie": "^4.1.1",
+    "react-cookie": "7.1.4",
     "redux": "4.0.1",
     "sass": "^1.62.1",
     "typescript": "^4.1.3"

src/components/EditionCard/EditionCard.test.tsx

@@ -8,6 +8,7 @@ import {
   upEdition,
 } from "~/src/__tests__/fixtures/EditionCardFixture";
 import { NYPL_SESSION_ID } from "~/src/constants/auth";
+import { Cookies, CookiesProvider } from "react-cookie";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -124,8 +125,13 @@ describe("Edition with EDD", () => {
 
   test("Shows EDD Request button when user is logged in", () => {
     // Set cookie before rendering the component
-    document.cookie = `${NYPL_SESSION_ID}="randomvalue"`;
-    render(<EditionCard edition={eddEdition} title={"title"}></EditionCard>);
+    const cookies = new Cookies();
+    cookies.set(NYPL_SESSION_ID, "randomvalue");
+    render(
+      <CookiesProvider cookies={cookies}>
+        <EditionCard edition={eddEdition} title={"title"} />
+      </CookiesProvider>
+    );
 
     expect(
       screen.getByRole("link", { name: "Request scan for title" })
@@ -151,7 +157,6 @@ describe("Edition with EDD", () => {
 
 describe("Edition with UP", () => {
   test("Shows Login button when user is not logged in", () => {
-    document.cookie = `${NYPL_SESSION_ID}=""`;
     render(<EditionCard edition={upEdition} title={"title"}></EditionCard>);
     expect(
       screen.getByRole("link", { name: "title Log in to read online" })
@@ -171,8 +176,13 @@ describe("Edition with UP", () => {
   });
   test("Shows Read Online and Download buttons when user is logged in", () => {
     // Set cookie before rendering the component
-    document.cookie = `${NYPL_SESSION_ID}="randomvalue"`;
-    render(<EditionCard edition={upEdition} title={"title"}></EditionCard>);
+    const cookies = new Cookies();
+    cookies.set(NYPL_SESSION_ID, "randomvalue");
+    render(
+      <CookiesProvider cookies={cookies}>
+        <EditionCard edition={upEdition} title={"title"} />
+      </CookiesProvider>
+    );
 
     expect(
       screen.getByRole("link", { name: "title Read Online" })

src/components/EditionCard/ReadOnlineLink.tsx

@@ -9,13 +9,18 @@ const ReadOnlineLink: React.FC<{
   readOnlineLink: ItemLink;
   isLoggedIn: boolean;
   title: string;
+  loginCookie?: any;
 }> = ({ readOnlineLink, isLoggedIn, title }) => {
   let linkText = "Read Online";
   let linkUrl: any = {
     pathname: `/read/${readOnlineLink.link_id}`,
   };
 
-  if (readOnlineLink.flags.nypl_login && !isLoggedIn) {
+  if (
+    (readOnlineLink.flags.nypl_login ||
+      readOnlineLink.flags.fulfill_limited_access) &&
+    !isLoggedIn
+  ) {
     linkText = "Log in to read online";
     linkUrl = LOGIN_LINK_BASE + encodeURIComponent(window.location.href);
   }

src/components/InstanceCard/InstanceCard.test.tsx

@@ -13,6 +13,7 @@ import {
   eddInstance,
   upInstance,
 } from "~/src/__tests__/fixtures/InstanceCardFixture";
+import { Cookies, CookiesProvider } from "react-cookie";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -114,9 +115,15 @@ describe("Instance with EDD", () => {
 
   test("Shows EDD Request button when user is logged in", () => {
     // Set cookie before rendering the component
-    document.cookie = `${NYPL_SESSION_ID}="randomvalue"`;
+    const cookies = new Cookies();
+    cookies.set(NYPL_SESSION_ID, "randomvalue");
     render(
-      <InstanceCard edition={fullEdition} instance={eddInstance}></InstanceCard>
+      <CookiesProvider cookies={cookies}>
+        <InstanceCard
+          edition={fullEdition}
+          instance={eddInstance}
+        ></InstanceCard>
+      </CookiesProvider>
     );
 
     expect(
@@ -143,7 +150,6 @@ describe("Instance with EDD", () => {
 
 describe("Instance with UP", () => {
   test("Shows Login button when user is not logged in", () => {
-    document.cookie = `${NYPL_SESSION_ID}=""`;
     render(<InstanceCard edition={upEdition} instance={upInstance} />);
     expect(
       screen.getByRole("link", { name: "title Log in to read online" })
@@ -163,8 +169,13 @@ describe("Instance with UP", () => {
   });
   test("Shows Read Online and Download buttons when user is logged in", () => {
     // Set cookie before rendering the component
-    document.cookie = `${NYPL_SESSION_ID}="randomvalue"`;
-    render(<InstanceCard edition={upEdition} instance={upInstance} />);
+    const cookies = new Cookies();
+    cookies.set(NYPL_SESSION_ID, "randomvalue");
+    render(
+      <CookiesProvider cookies={cookies}>
+        <InstanceCard edition={upEdition} instance={upInstance} />
+      </CookiesProvider>
+    );
 
     expect(
       screen.getByRole("link", { name: "title Read Online" })

src/components/InstanceCard/InstanceCard.tsx

@@ -43,6 +43,7 @@ export const InstanceCard: React.FC<{
       border="1px"
       borderColor="ui.border.default"
       padding="s"
+      paddingLeft={{ base: "l", md: null }}
       paddingBottom="l"
       paddingRight="l"
     >
@@ -61,13 +62,22 @@ export const InstanceCard: React.FC<{
         isAlignedRightActions
         id={`card-${instance.instance_id}`}
         paddingTop="m"
+        flexFlow={{ md: "column nowrap", lg: "row" }}
+        justifyContent={{ md: "center", lg: "left" }}
+        sx={{
+          ".card-right": {
+            maxWidth: { base: "100%", lg: "200px" },
+            marginStart: { base: "0", lg: "m" },
+            marginTop: { base: "xs", lg: 0 },
+          },
+        }}
       >
         <CardHeading
           level="h3"
           size="heading6"
           sx={{ span: { fontSize: "18px" } }}
         >
-          <Flex alignItems="center">
+          <Flex alignItems="center" gap="xs">
             <span>
               {edition.publication_date
                 ? edition.publication_date
@@ -92,6 +102,9 @@ export const InstanceCard: React.FC<{
           display="flex"
           flexDir="column"
           whiteSpace="nowrap"
+          sx={{
+            width: { base: "100%", lg: "200px" },
+          }}
           gap="xs"
         >
           <Ctas item={previewItem} title={instance.title} />