From 5aaed89e948b83cc3974e3d7bdb789d3314571cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Fri, 5 Jul 2024 14:41:55 +0200
Subject: [PATCH 1/6] Create basic details for materials based on FBS
 information

This can the be used as fallback information for physical materials in case
these cannot be retrieved from FBI in the material fetch higher-order component.

Without this then the material will not be rendered at all.

One known situation where this occurs is interlibrary loans from the Royal
Danish Library.
---
 .../materials/utils/material-fetch-hoc.tsx    |  4 ++-
 src/core/utils/helpers/list-mapper.ts         | 28 +++++++++++++++++--
 src/core/utils/types/list-type.ts             |  9 +++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
index 150cce20f4..75c04981a1 100644
--- a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
+++ b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
@@ -64,6 +64,8 @@ const fetchMaterial =
       useEffect(() => {
         if (manifestation) {
           setMaterial(mapManifestationToBasicDetailsType(manifestation));
+        } else if (item.details) {
+          setMaterial(item.details);
         }
       }, [manifestation]);
 
@@ -73,7 +75,7 @@ const fetchMaterial =
       }
 
       // in cases where the material is not found we return null, else we would load forever
-      if (!manifestation) return null;
+      if (!material) return null;
 
       return (
         <Component
diff --git a/src/core/utils/helpers/list-mapper.ts b/src/core/utils/helpers/list-mapper.ts
index 86c23ea060..86e115d82b 100644
--- a/src/core/utils/helpers/list-mapper.ts
+++ b/src/core/utils/helpers/list-mapper.ts
@@ -68,7 +68,17 @@ export const mapFBSLoanToLoanType = (list: LoanV2[]): LoanType[] => {
       loanType: loanDetails.loanType,
       identifier: null,
       faust: (loanDetails.recordId as FaustId) || null,
-      loanId: loanDetails.loanId
+      loanId: loanDetails.loanId,
+      details: loanDetails.ilBibliographicRecord
+        ? {
+            title: loanDetails.ilBibliographicRecord.title,
+            authors: loanDetails.ilBibliographicRecord.author,
+            authorsShort: loanDetails.ilBibliographicRecord.author,
+            firstAuthor: loanDetails.ilBibliographicRecord.author,
+            year: loanDetails.ilBibliographicRecord.publicationDate,
+            lang: loanDetails.ilBibliographicRecord.language
+          }
+        : null
     };
   });
 };
@@ -249,7 +259,8 @@ export const mapFBSReservationGroupToReservationType = (
       pickupDeadline,
       pickupNumber,
       periodical,
-      records
+      records,
+      ilBibliographicRecord
     }) => {
       return {
         periodical: periodical?.displayText || "",
@@ -261,7 +272,18 @@ export const mapFBSReservationGroupToReservationType = (
         pickupBranch,
         pickupDeadline,
         pickupNumber,
-        reservationIds: values(records)
+        reservationIds: values(records),
+        details: ilBibliographicRecord
+          ? {
+              title: ilBibliographicRecord.title,
+              authors: ilBibliographicRecord.author,
+              authorsShort: ilBibliographicRecord.author,
+              firstAuthor: ilBibliographicRecord.author,
+              year: ilBibliographicRecord.publicationDate,
+              lang: ilBibliographicRecord.language,
+              isbn: ilBibliographicRecord.isbn
+            }
+          : null
       };
     }
   );
diff --git a/src/core/utils/types/list-type.ts b/src/core/utils/types/list-type.ts
index 631c3fa749..953058a635 100644
--- a/src/core/utils/types/list-type.ts
+++ b/src/core/utils/types/list-type.ts
@@ -1,5 +1,6 @@
 import { FaustId, LoanId } from "./ids";
 import { Nullable } from "./nullable";
+import { BasicDetailsType } from "./basic-details-type";
 
 export type ListIdsType = {
   faust: FaustId;
@@ -8,7 +9,13 @@ export type ListIdsType = {
   loanId: LoanId | null;
 };
 
-export type ListType = Nullable<Partial<ListIdsType>>;
+export type ListType = Nullable<
+  Partial<
+    ListIdsType & {
+      details: BasicDetailsType;
+    }
+  >
+>;
 
 export function listId(listItem: ListType): string {
   if (listItem?.reservationIds && listItem.reservationIds.length > 0) {

From d1d360f2e550f3acc10e220ac93538984ec14cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:47:09 +0200
Subject: [PATCH 2/6] Ensure vertical alignment for reservations and loans
 titles in list

We want material titles to have the same position even if there are
no material types available.

Positioning is based on the available child elements of
list-reservation__information so add an div for the types even if
there are none available.

This is especially relevant for interlibrary loans where we get the
basic material information from FBS instead of FBI.
---
 .../stackable-material/material-info.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/apps/loan-list/materials/stackable-material/material-info.tsx b/src/apps/loan-list/materials/stackable-material/material-info.tsx
index 0bcef22799..a1a788660d 100644
--- a/src/apps/loan-list/materials/stackable-material/material-info.tsx
+++ b/src/apps/loan-list/materials/stackable-material/material-info.tsx
@@ -50,13 +50,16 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
         />
       </div>
       <div className="list-reservation__information">
-        {materialType && (
-          <div>
-            <div className="status-label status-label--outline">
-              {materialType}
+        {/* Add a div for material types even if there are none to ensure element alignment */}
+        <div>
+          {materialType && (
+            <div>
+              <div className="status-label status-label--outline">
+                {materialType}
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
         <div className="list-reservation__about">
           <button
             onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

From 553624c507dcf0ec4368705b7b813a319d117482 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:26:19 +0200
Subject: [PATCH 3/6] Add tests showing lists falling back on interlibrary data

When a work cannot be found in FBI then listings should fall back on
the interlibrary record provided by FBS.

This is relevant in situations such as loans by the Royal Danish
library. These cannot be looked up in FBI.
---
 src/apps/loan-list/list/loan-list.test.ts     | 78 ++++++++++++++++++
 .../list/reservation-list.test.ts             | 81 +++++++++++++++++++
 2 files changed, 159 insertions(+)

diff --git a/src/apps/loan-list/list/loan-list.test.ts b/src/apps/loan-list/list/loan-list.test.ts
index 863bf1ab6b..d0fe1241af 100644
--- a/src/apps/loan-list/list/loan-list.test.ts
+++ b/src/apps/loan-list/list/loan-list.test.ts
@@ -672,6 +672,84 @@ describe("Loan list", () => {
     );
   });
 
+  it("It shows interlibrary record when work is not found", () => {
+    cy.intercept("GET", "**/external/agencyid/patrons/patronid/loans/v2**", {
+      statusCode: 200,
+      body: [
+        {
+          isRenewable: true,
+          isLongtermLoan: false,
+          loanDetails: {
+            loanId: 956250509,
+            materialItemNumber: "3846990827",
+            recordId: "28843238",
+            periodical: null,
+            loanDate: "2022-10-14T16:43:25.325",
+            dueDate: "2022-10-28",
+            loanType: "loan",
+            ilBibliographicRecord: {
+              author: "Thorpe, D.R.",
+              bibliographicCategory: "mono",
+              edition: null,
+              isbn: "9781844135417",
+              issn: null,
+              language: "eng",
+              mediumType: "a xx",
+              periodicalNumber: null,
+              periodicalVolume: null,
+              placeOfPublication: "London",
+              publicationDate: "2011",
+              publicationDateOfComponent: null,
+              publisher: "Pimlico",
+              recordId: "2449448",
+              title: "Supermac : the life of Harold Macmillan"
+            },
+            materialGroup: {
+              name: "fon2",
+              description: "Flere CD-plader"
+            }
+          }
+        }
+      ]
+    }).as("physical_loans");
+
+    cy.intercept("GET", "**/v1/user/**", {
+      statusCode: 200,
+      body: {
+        reservations: [],
+        code: 101,
+        message: "OK"
+      }
+    }).as("digital_loans");
+
+    // No works are found. This should make the reservation use data from the
+    // ilBibliographicRecord property.
+    cy.intercept("POST", "**/next*/**", {
+      statusCode: 200,
+      body: {
+        data: {}
+      }
+    }).as("work_not_found");
+
+    cy.visit("/iframe.html?path=/story/apps-loan-list--loan-list-entry");
+
+    cy.get(".list-reservation-container")
+      .find(".list-reservation")
+      .get(".list-reservation__header")
+      // The title should be the one returned by ilBibliographicRecord property
+      // on the reservation.
+      .should("contain", "Supermac : the life of Harold Macmillan")
+      // Open the modal to see the details.
+      .click();
+
+    cy.getBySel("modal")
+      // Modal should be open.
+      .should("exist")
+      .find(".modal-details__title")
+      // Details should also contain the ilBibliographicRecord title.
+      .should("contain", "Supermac : the life of Harold Macmillan");
+  });
+
   it("Empty digital loan list", () => {
     cy.intercept("GET", "**/v1/user/**", {
       statusCode: 200,
diff --git a/src/apps/reservation-list/list/reservation-list.test.ts b/src/apps/reservation-list/list/reservation-list.test.ts
index 2977f5371a..c8d233627a 100644
--- a/src/apps/reservation-list/list/reservation-list.test.ts
+++ b/src/apps/reservation-list/list/reservation-list.test.ts
@@ -873,6 +873,87 @@ describe("Reservation list", () => {
       // Details should also contain the best representation title.
       .should("contain", "Best representation of dummy title");
   });
+
+  it("Reservations list falls back on interlibrary record when work is not found", () => {
+    cy.intercept(
+      "GET",
+      "**/external/v1/agencyid/patrons/patronid/reservations/v2**",
+      {
+        statusCode: 200,
+        body: [
+          {
+            reservationId: 67804976,
+            recordId: "2449448",
+            state: "reserved",
+            pickupBranch: "DK-775100",
+            pickupDeadline: null,
+            expiryDate: "2022-09-21",
+            dateOfReservation: "2022-06-14T09:00:50.059",
+            numberInQueue: 1,
+            periodical: null,
+            pickupNumber: null,
+            ilBibliographicRecord: {
+              author: "Thorpe, D.R.",
+              bibliographicCategory: "mono",
+              edition: null,
+              isbn: "9781844135417",
+              issn: null,
+              language: "eng",
+              mediumType: "a xx",
+              periodicalNumber: null,
+              periodicalVolume: null,
+              placeOfPublication: "London",
+              publicationDate: "2011",
+              publicationDateOfComponent: null,
+              publisher: "Pimlico",
+              recordId: "2449448",
+              title: "Supermac : the life of Harold Macmillan"
+            },
+            transactionId: "c6742151-f4a7-4655-a94f-7bd6a0009431",
+            reservationType: "normal"
+          }
+        ]
+      }
+    ).as("physical_reservations");
+
+    cy.intercept("GET", "**/v1/user/**", {
+      statusCode: 200,
+      body: {
+        reservations: [],
+        code: 101,
+        message: "OK"
+      }
+    }).as("digital_reservations");
+
+    // No works are found. This should make the reservation use data from the
+    // ilBibliographicRecord property.
+    cy.intercept("POST", "**/next*/**", {
+      statusCode: 200,
+      body: {
+        data: {}
+      }
+    }).as("work_not_found");
+
+    cy.visit(
+      "/iframe.html?path=/story/apps-reservation-list--reservation-list-entry"
+    );
+
+    cy.getBySel("list-reservation-container")
+      .find(".list-reservation")
+      .get(".list-reservation__header")
+      // The title should be the one returned by ilBibliographicRecord property
+      // on the reservation.
+      .should("contain", "Supermac : the life of Harold Macmillan")
+      // Open the modal to see the details.
+      .click();
+
+    cy.getBySel("modal")
+      // Modal should be open.
+      .should("exist")
+      .find(".modal-details__title")
+      // Details should also contain the ilBibliographicRecord title.
+      .should("contain", "Supermac : the life of Harold Macmillan");
+  });
 });
 
 export default {};

From 4fade9963e9c5316fe504a2159604baf2e96eab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:53:03 +0200
Subject: [PATCH 4/6] Add missing dependency in higher-order component

---
 src/apps/loan-list/materials/utils/material-fetch-hoc.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
index 75c04981a1..d03baf9da9 100644
--- a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
+++ b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
@@ -67,7 +67,7 @@ const fetchMaterial =
         } else if (item.details) {
           setMaterial(item.details);
         }
-      }, [manifestation]);
+      }, [manifestation, item.details]);
 
       // if the fallback component is provided we can show it while the data is loading
       if (isLoadingAnything) {

From b8647b95f7be65d78fabe9e3c82b260c1269b3e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:37:09 +0200
Subject: [PATCH 5/6] Remove isbn from reservation mapping

This property is not part of the BasicDetailsType so we should remove
it.
---
 src/core/utils/helpers/list-mapper.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/utils/helpers/list-mapper.ts b/src/core/utils/helpers/list-mapper.ts
index 86e115d82b..2a0bc48985 100644
--- a/src/core/utils/helpers/list-mapper.ts
+++ b/src/core/utils/helpers/list-mapper.ts
@@ -280,8 +280,7 @@ export const mapFBSReservationGroupToReservationType = (
               authorsShort: ilBibliographicRecord.author,
               firstAuthor: ilBibliographicRecord.author,
               year: ilBibliographicRecord.publicationDate,
-              lang: ilBibliographicRecord.language,
-              isbn: ilBibliographicRecord.isbn
+              lang: ilBibliographicRecord.language
             }
           : null
       };

From c87a783f0ca38be1fca52978e4feb203b3861c1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= <kasperg@users.noreply.github.com>
Date: Tue, 9 Jul 2024 15:04:48 +0200
Subject: [PATCH 6/6] Conditionally render material type in selectable lists

When using basic details from FBS the material type will not be
provided at the moment.

As such we will not have anything to render. Instead of rendering a
blank box as we do now we omit the element entirely.

No workarounds are required to ensure that the layout stays
consistent.
---
 .../selectable-material/selectable-material.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
index af2289a8b1..6e38800959 100644
--- a/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
+++ b/src/apps/loan-list/materials/selectable-material/selectable-material.tsx
@@ -109,11 +109,13 @@ const SelectableMaterial: FC<SelectableMaterialProps & MaterialProps> = ({
           role="button"
           tabIndex={0}
         >
-          <div className="list-materials__content-status">
-            <div className="status-label status-label--outline ">
-              {materialType}
+          {materialType && (
+            <div className="list-materials__content-status">
+              <div className="status-label status-label--outline ">
+                {materialType}
+              </div>
             </div>
-          </div>
+          )}
           {statusBadgeComponentMobile || null}
           <p className="list-materials__content__header mt-8" lang={lang || ""}>
             {title}