Add switch statement to client side fetch

NYPL · Dec 3, 2024 · 69e359b · 69e359b
1 parent c15b8f5
commit 69e359b
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 57 deletions.
diff --git a/pages/api/hold/request/[id]/index.ts b/pages/api/hold/request/[id]/index.ts
@@ -1,6 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next"
 
-import { postHoldRequest } from "../../../../../src/server/api/hold"
+import {
+  postHoldRequest,
+  fetchHoldRequestEligibility,
+} from "../../../../../src/server/api/hold"
 import { BASE_URL, PATHS } from "../../../../../src/config/constants"
 
 /**
@@ -14,10 +17,28 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   }
 
   try {
+    const { patronId, source, pickupLocation, jsEnabled } = JSON.parse(req.body)
+
     const holdId = req.query.id as string
     const [, itemId] = holdId.split("-")
 
-    const { patronId, source, pickupLocation, jsEnabled } = JSON.parse(req.body)
+    const patronEligibility = await fetchHoldRequestEligibility(patronId)
+
+    if (!patronEligibility?.eligibility) {
+      switch (jsEnabled) {
+        case true:
+          return res.status(401).json({
+            patronEligibility,
+          })
+
+        // Server side redirect on ineligibility when Js is disabled
+        // TODO: Move this to seaprate API route
+        default:
+          res.redirect(
+            `${BASE_URL}${PATHS.HOLD_REQUEST}/${holdId}?patronEligibility=${patronEligibility}`
+          )
+      }
+    }
 
     const holdRequestResponse = await postHoldRequest({
       itemId,
@@ -34,6 +55,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     }
 
     // Return a 200 status when the hold request is posted successfully via JS fetch
+    // TODO: Make this a separate API route instead of a fetch attribute
     if (jsEnabled) {
       return res.status(200).json({
         pickupLocation: pickupLocationFromResponse,

diff --git a/pages/hold/request/[id]/index.tsx b/pages/hold/request/[id]/index.tsx
@@ -98,25 +98,30 @@ export default function HoldRequestPage({
         }),
       })
       const responseJson = await response.json()
-
-      if (response.status !== 200) {
-        console.error(
-          "HoldRequestPage: Error in hold request api response",
-          responseJson.error
-        )
-        setErrorStatus("failed")
-        setFormPosting(false)
-        return
-      }
       const { pickupLocation: pickupLocationFromResponse, requestId } =
         responseJson
 
-      setFormPosting(false)
-
-      // Success state
-      await router.push(
-        `${PATHS.HOLD_CONFIRMATION}/${holdId}?pickupLocation=${pickupLocationFromResponse}&requestId=${requestId}`
-      )
+      switch (response.status) {
+        case 401:
+          setErrorStatus("patronIneligible")
+          setFormPosting(false)
+          bannerContainerRef.current.focus()
+          break
+        case 500:
+          console.error(
+            "HoldRequestPage: Error in hold request api response",
+            responseJson.error
+          )
+          setErrorStatus("failed")
+          setFormPosting(false)
+          break
+        default:
+          setFormPosting(false)
+          // Success state
+          await router.push(
+            `${PATHS.HOLD_CONFIRMATION}/${holdId}?pickupLocation=${pickupLocationFromResponse}&requestId=${requestId}`
+          )
+      }
     } catch (error) {
       console.error(
         "HoldRequestPage: Error in hold request api response",

diff --git a/src/components/HoldPages/HoldRequestErrorBanner.tsx b/src/components/HoldPages/HoldRequestErrorBanner.tsx
@@ -1,5 +1,11 @@
 import { useContext } from "react"
-import { Box, Banner, Button, List } from "@nypl/design-system-react-components"
+import {
+  Text,
+  Box,
+  Banner,
+  Button,
+  List,
+} from "@nypl/design-system-react-components"
 
 import type {
   HoldErrorStatus,
@@ -53,43 +59,45 @@ const HoldRequestErrorBanner = ({
       }}
       content={
         <>
-          <Box marginTop="xs">
-            {HOLD_PAGE_CONTACT_PREFIXES?.[errorStatus] ? (
-              <>
-                {HOLD_PAGE_CONTACT_PREFIXES?.[errorStatus]}
-                {" Please try again, "}
-                <Button
-                  id="hold-contact"
-                  onClick={() =>
-                    onContact({
-                      id: item.id,
-                      barcode: item.barcode,
-                      callNumber: item.callNumber,
-                      bibId: item.bibId,
-                      notificationText: `Request failed for call number ${item.callNumber}`,
-                    })
-                  }
-                  buttonType="link"
-                  // TODO: Ask DS team to make button link variant match the default link styles
-                  sx={{
-                    display: "inline",
-                    fontWeight: "inherit",
-                    fontSize: "inherit",
-                    p: 0,
-                    height: "auto",
-                    textAlign: "left",
-                    minHeight: "auto",
-                    textDecorationStyle: "dotted",
-                    textDecorationThickness: "1px",
-                    textUnderlineOffset: "2px",
-                  }}
-                >
-                  contact us
-                </Button>{" "}
-                for assistance, or{" "}
-                <RCLink href="/search">start a new search.</RCLink>
-              </>
-            ) : null}
+          <Box>
+            <Text>
+              {HOLD_PAGE_CONTACT_PREFIXES?.[errorStatus] ? (
+                <>
+                  {HOLD_PAGE_CONTACT_PREFIXES?.[errorStatus]}
+                  {" Please try again, "}
+                  <Button
+                    id="hold-contact"
+                    onClick={() =>
+                      onContact({
+                        id: item.id,
+                        barcode: item.barcode,
+                        callNumber: item.callNumber,
+                        bibId: item.bibId,
+                        notificationText: `Request failed for call number ${item.callNumber}`,
+                      })
+                    }
+                    buttonType="link"
+                    // TODO: Ask DS team to make button link variant match the default link styles
+                    sx={{
+                      display: "inline",
+                      fontWeight: "inherit",
+                      fontSize: "inherit",
+                      p: 0,
+                      height: "auto",
+                      textAlign: "left",
+                      minHeight: "auto",
+                      textDecorationStyle: "dotted",
+                      textDecorationThickness: "1px",
+                      textUnderlineOffset: "2px",
+                    }}
+                  >
+                    contact us
+                  </Button>{" "}
+                  for assistance, or{" "}
+                  <RCLink href="/search">start a new search.</RCLink>
+                </>
+              ) : null}
+            </Text>
             {(() => {
               switch (errorStatus) {
                 case "invalid":
@@ -122,7 +130,7 @@ const PatronErrors = ({
 
   return (
     <Box>
-      This is because:
+      <Text mb="xs">This is because:</Text>
       <List
         type="ul"
         margin={0}