Scc 4142/spec coll messaging

src/components/ItemTable/ItemAvailability.test.tsx

@@ -29,6 +29,7 @@ describe("ItemAvailability", () => {
   })
   it("renders the correct text when item is available, has an aeon url, and has a location endpoint", async () => {
     const item = new Item(itemPhysicallyRequestable, parentBib)
+
     render(<ItemAvailability item={item} />)
     expect(screen.getByText("Available by appointment")).toBeInTheDocument()
     expect(

src/components/ItemTable/ItemAvailability.tsx

@@ -1,11 +1,11 @@
-import { useContext } from "react"
-import { Text, Button, Box } from "@nypl/design-system-react-components"
+import { Text, Box } from "@nypl/design-system-react-components"
 
 import ExternalLink from "../Links/ExternalLink/ExternalLink"
 import { appConfig } from "../../config/config"
 import type Item from "../../models/Item"
-import { FeedbackContext } from "../../context/FeedbackContext"
-import type { ItemMetadata } from "../../types/itemTypes"
+import AvailableByAppointment from "./ItemAvailabilityComponents/AvailableByAppointment"
+import NotAvailable from "./ItemAvailabilityComponents/NotAvailable"
+import AvailableOnsite from "./ItemAvailabilityComponents/AvailableOnsite"
 
 interface ItemAvailabilityProps {
   item: Item
@@ -17,113 +17,25 @@ interface ItemAvailabilityProps {
  * TODO: Add Feedback box, Due date, Available font styles
  */
 const ItemAvailability = ({ item }: ItemAvailabilityProps) => {
-  const { onOpen, setItemMetadata } = useContext(FeedbackContext)
-
-  const onContact = (metadata: ItemMetadata) => {
-    setItemMetadata(metadata)
-    onOpen()
-  }
-
-  // TODO: Move this logic into a getter function in the Item class that returns an availability status key
-  // and replace this nested If with a simple switch statement
-  if (item.isAvailable) {
-    if (item.isReCAP && !item.aeonUrl) {
-      // Available ReCAP item
-      return (
-        <ExternalLink href={appConfig.urls.researchMaterialsHelp} fontSize="sm">
-          How do I pick up this item and when will it be ready?
-        </ExternalLink>
-      )
-    } else if (item.aeonUrl && item.location?.endpoint) {
-      return (
-        <Text
-          mb="0"
-          fontSize={{
-            base: "mobile.body.body2",
-            md: "desktop.body.body2",
-          }}
-        >
-          <Box as="span" color="ui.success.primary">
-            Available by appointment
-          </Box>
-          {!item.isReCAP ? (
-            <>
-              {" at "}
-              <ExternalLink
-                href={`${appConfig.urls.locations}${item.location.endpoint}`}
-              >
-                {item.location.prefLabel}
-              </ExternalLink>
-            </>
-          ) : null}
-        </Text>
-      )
-    } else {
-      // Available Onsite item
-      const locationShort = item.location.prefLabel.split("-")[0]
-      return (
-        <Text
-          mb="0"
-          fontSize={{
-            base: "mobile.body.body2",
-            md: "desktop.body.body2",
-          }}
-        >
-          <Box as="span" color="ui.success.primary">
-            Available
-          </Box>
-          {" - Can be used on site. Please visit "}
-          <ExternalLink
-            href={`${appConfig.urls.locations}${item.location.endpoint}`}
-          >
-            {`New York Public Library - ${locationShort}`}
-          </ExternalLink>
-          {" to submit a request in person."}
-        </Text>
-      )
-    }
-  } else {
-    // Not available
+  if (item.availability.key === "availableRecap") {
     return (
-      <Text
-        mb="0"
-        fontSize={{
-          base: "mobile.body.body2",
-          md: "desktop.body.body2",
-        }}
-      >
-        <Box as="span" color="ui.warning.tertiary">
-          Not available
-        </Box>
-        {item.dueDate && ` - In use until ${item.dueDate}`}
-        {" - Please "}
-        <Button
-          id="contact-librarian"
-          buttonType="link"
-          sx={{
-            display: "inline",
-            fontWeight: "inherit",
-            fontSize: "inherit",
-            p: 0,
-            height: "auto",
-            textAlign: "left",
-            minHeight: "auto",
-          }}
-          onClick={() =>
-            onContact({
-              id: item.id,
-              barcode: item.barcode,
-              callNumber: item.callNumber,
-              bibId: item.bibId,
-            })
-          }
-        >
-          contact a librarian
-        </Button>
-        {" for assistance."}
-      </Text>
+      <ExternalLink href={appConfig.urls.researchMaterialsHelp} fontSize="sm">
+        How do I pick up this item and when will it be ready?
+      </ExternalLink>
     )
   }
+
+  return (
+    <Text
+      mb="0"
+      fontSize={{
+        base: "mobile.body.body2",
+        md: "desktop.body.body2",
+      }}
+    >
+      {item.availability.message()}
+    </Text>
+  )
 }
 
 export default ItemAvailability

src/components/ItemTable/ItemAvailabilityComponents/AvailableByAppointment.tsx

@@ -0,0 +1,25 @@
+import { Box } from "@nypl/design-system-react-components"
+import { appConfig } from "../../../config/config"
+import ExternalLink from "../../Links/ExternalLink/ExternalLink"
+
+const AvailableByAppointment = ({ item }) => {
+  return (
+    <>
+      <Box as="span" color="ui.success.primary">
+        Available by appointment
+      </Box>
+      {!item.isReCAP && (
+        <>
+          {" at "}
+          <ExternalLink
+            href={`${appConfig.urls.locations}${item.location.endpoint}`}
+          >
+            {item.location.prefLabel}
+          </ExternalLink>
+        </>
+      )}
+    </>
+  )
+}
+
+export default AvailableByAppointment

src/components/ItemTable/ItemAvailabilityComponents/AvailableOnsite.tsx

@@ -0,0 +1,24 @@
+import { Box } from "@nypl/design-system-react-components"
+import { appConfig } from "../../../config/config"
+import type Item from "../../../models/Item"
+import ExternalLink from "../../Links/ExternalLink/ExternalLink"
+
+const AvailableOnsite = ({ item }: { item: Item }) => {
+  const locationShort = item.location.prefLabel.split("-")[0]
+  return (
+    <>
+      <Box as="span" color="ui.success.primary">
+        Available
+      </Box>
+      {" - Can be used on site. Please visit "}
+      <ExternalLink
+        href={`${appConfig.urls.locations}${item.location.endpoint}`}
+      >
+        {`New York Public Library - ${locationShort}`}
+      </ExternalLink>
+      {" to submit a request in person."}
+    </>
+  )
+}
+
+export default AvailableOnsite

src/components/ItemTable/ItemAvailabilityComponents/ContactALibrarian.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@nypl/design-system-react-components"
+import { useContext } from "react"
+import { FeedbackContext } from "../../../context/FeedbackContext"
+import type { ItemMetadata } from "../../../types/itemTypes"
+import type Item from "../../../models/Item"
+
+const ContactALibrarian = ({ item }: { item: Item }) => {
+  const { onOpen, setItemMetadata } = useContext(FeedbackContext)
+  const onContact = (metadata: ItemMetadata) => {
+    setItemMetadata(metadata)
+    onOpen()
+  }
+  return (
+    <>
+      {" - Please "}
+      <Button
+        id="contact-librarian"
+        buttonType="link"
+        sx={{
+          display: "inline",
+          fontWeight: "inherit",
+          fontSize: "inherit",
+          p: 0,
+          height: "auto",
+          textAlign: "left",
+          minHeight: "auto",
+        }}
+        onClick={() =>
+          onContact({
+            id: item.id,
+            barcode: item.barcode,
+            callNumber: item.callNumber,
+            bibId: item.bibId,
+          })
+        }
+      >
+        contact a librarian
+      </Button>
+      {" for assistance."}
+    </>
+  )
+}
+
+export default ContactALibrarian

src/components/ItemTable/ItemAvailabilityComponents/NotAvailable.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@nypl/design-system-react-components"
+import type Item from "../../../models/Item"
+import ContactALibrarian from "./ContactALibrarian"
+
+const NotAvailable = ({ item }: { item: Item }) => {
+  return (
+    <>
+      <Box as="span" color="ui.warning.tertiary">
+        Not available
+      </Box>
+      {item.dueDate && ` - In use until ${item.dueDate}`}
+      <ContactALibrarian item={item} />
+    </>
+  )
+}
+
+export default NotAvailable

src/models/Item.ts

@@ -12,6 +12,7 @@ import {
   locationEndpointsMap,
 } from "../utils/itemUtils"
 import { appConfig } from "../config/config"
+import ItemAvailability from "./ItemAvailability"
 
 /**
  * The Item class contains the data and getter functions
@@ -34,6 +35,7 @@ export default class Item {
   isPhysicallyRequestable: boolean
   isEDDRequestable: boolean
   bibTitle: string
+  availability: ItemAvailability
 
   constructor(item: DiscoveryItemResult, bib: Bib) {
     this.id = item.uri || ""
@@ -57,6 +59,7 @@ export default class Item {
     this.isPhysicallyRequestable = item.physRequestable
     this.isEDDRequestable = item.eddRequestable
     this.bibTitle = bib.titleDisplay
+    this.availability = new ItemAvailability(this)
   }
 
   // Item availability is determined by the existence of status id in the availability ids list

src/models/ItemAvailability.tsx

@@ -0,0 +1,44 @@
+import type { JsxElement } from "typescript"
+import type Item from "./Item"
+import AvailableByAppointment from "../components/ItemTable/ItemAvailabilityComponents/AvailableByAppointment"
+import AvailableOnsite from "../components/ItemTable/ItemAvailabilityComponents/AvailableOnsite"
+import NotAvailable from "../components/ItemTable/ItemAvailabilityComponents/NotAvailable"
+
+class ItemAvailability {
+  item: Item
+  key: string
+  constructor(item: Item) {
+    this.item = item
+    this.key = this.buildKey()
+  }
+  buildKey() {
+    if (this.item.isAvailable && this.item.isReCAP && !this.item.aeonUrl) {
+      return "availableRecap"
+    }
+    if (
+      this.item.isAvailable &&
+      this.item.aeonUrl &&
+      this.item.location?.endpoint
+    ) {
+      return "availableAeon"
+    }
+    if (this.item.isAvailable && !this.item.isReCAP) {
+      return "availableOnsite"
+    }
+    if (!this.item.isAvailable) {
+      return "notAvailable"
+    }
+  }
+  message() {
+    switch (this.key) {
+      case "availableAeon":
+        return <AvailableByAppointment item={this.item} />
+      case "availableOnsite":
+        return <AvailableOnsite item={this.item} />
+      case "notAvailable":
+        return <NotAvailable item={this.item} />
+    }
+  }
+}
+
+export default ItemAvailability