Reintroduce MaterialAvailabilityText for online manifestations

This was partially removed by misunderstanding in [DDFBRA-49](https://reload.atlassian.net/browse/DDFBRA-49).

It has now been reintroduced along with an update to `MaterialAvailabilityTextOnline`, ensuring it checks for all e-materials (Publizon).

Here is the commit where it was removed:
[b28c225](b28c225)

src/components/material/MaterialAvailabilityText/online/MaterialAvailabilityTextOnline.tsx

@@ -9,6 +9,7 @@ import { useText } from "../../../../core/utils/text";
 import MaterialAvailabilityTextParagraph from "../generic/MaterialAvailabilityTextParagraph";
 import { ManifestationMaterialType } from "../../../../core/utils/types/material-type";
 import { AvailabilityTextMap, getAvailabilityText } from "./helper";
+import { playerTypes, readerTypes } from "../../../reader-player/helper";
 
 interface MaterialAvailabilityTextOnlineProps {
   isbns: string[];
@@ -43,16 +44,26 @@ const MaterialAvailabilityTextOnline: React.FC<
   } = libraryProfileData;
 
   const availabilityTextMap: AvailabilityTextMap = {
-    [ManifestationMaterialType.ebook]: {
-      text: "onlineLimitMonthEbookInfoText",
-      count: totalEbookLoans,
-      limit: maxConcurrentEbookLoansPerBorrower
-    },
-    [ManifestationMaterialType.audioBook]: {
-      text: "onlineLimitMonthAudiobookInfoText",
-      count: totalAudioLoans,
-      limit: maxConcurrentAudioLoansPerBorrower
-    },
+    ...Object.fromEntries(
+      readerTypes.map((type) => [
+        type,
+        {
+          text: "onlineLimitMonthEbookInfoText",
+          count: totalEbookLoans,
+          limit: maxConcurrentEbookLoansPerBorrower
+        }
+      ])
+    ),
+    ...Object.fromEntries(
+      playerTypes.map((type) => [
+        type,
+        {
+          text: "onlineLimitMonthAudiobookInfoText",
+          count: totalAudioLoans,
+          limit: maxConcurrentAudioLoansPerBorrower
+        }
+      ])
+    ),
     materialIsIncluded: {
       text: "materialIsIncludedText"
     }

src/components/material/MaterialHeader.tsx

@@ -92,12 +92,10 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
   );
   // We need availability in order to show availability text under action buttons
   const { isAvailable } = useAvailabilityData({
-    // "accessTypes" will always be physical here - shouldShowMaterialAvailabilityText() helper
-    // rules out all online materials.
-    accessTypes: [AccessTypeCodeEnum.Physical],
+    accessTypes: [AccessTypeCodeEnum.Physical, AccessTypeCodeEnum.Online],
     access: [undefined],
     faustIds: getAllFaustIds(selectedManifestations),
-    isbn: null, // Not needed for physical materials.
+    isbn: null, // Not needed.
     // "manifestText" is used inside the availability hook to check whether the material is an article
     // which we check inside shouldShowMaterialAvailabilityText() helper here.
     manifestText: "NOT AN ARTICLE"
@@ -179,6 +177,7 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
                   />
                 </div>
                 {/* MaterialAvailabilityText is only shown for:
+                    - Online manifestations if the user is logged in
                     - physical manifestations
                     - that are not periodical or articles
                     - that are available in at least one local library branch

src/components/material/helper.ts

@@ -1,6 +1,8 @@
 import { AccessTypeCodeEnum } from "../../core/dbc-gateway/generated/graphql";
+import { isAnonymous } from "../../core/utils/helpers/user";
 import { Manifestation } from "../../core/utils/types/entities";
 import { ManifestationMaterialType } from "../../core/utils/types/material-type";
+import { getReaderPlayerType } from "../reader-player/helper";
 import { hasCorrectMaterialType, isArticle } from "./material-buttons/helper";
 
 export const isPhysical = (manifestations: Manifestation[]) => {
@@ -18,14 +20,24 @@ export const isPeriodical = (manifestations: Manifestation[]) => {
   );
 };
 
+export const isMaterialButtonsOnlineInternal = (
+  manifestations: Manifestation[]
+) => {
+  return Boolean(getReaderPlayerType(manifestations));
+};
+
 export const shouldShowMaterialAvailabilityText = (
   manifestations: Manifestation[]
 ) => {
-  return (
+  const isOnlineMaterial =
+    !isAnonymous() && isMaterialButtonsOnlineInternal(manifestations);
+
+  const isPhysicalMaterial =
     isPhysical(manifestations) &&
     !isPeriodical(manifestations) &&
-    !isArticle(manifestations)
-  );
+    !isArticle(manifestations);
+
+  return isOnlineMaterial || isPhysicalMaterial;
 };
 
 export default {};

src/components/reader-player/helper.ts

@@ -84,25 +84,25 @@ export const getOrderIdByIdentifier = ({
   return loanWithIdentifier ? loanWithIdentifier.orderId : null;
 };
 
+export const readerTypes = [
+  ManifestationMaterialType.ebook,
+  ManifestationMaterialType.pictureBookOnline,
+  ManifestationMaterialType.animatedSeriesOnline,
+  ManifestationMaterialType.yearBookOnline
+];
+
+export const playerTypes = [
+  ManifestationMaterialType.audioBook,
+  ManifestationMaterialType.podcast,
+  ManifestationMaterialType.musicOnline,
+  ManifestationMaterialType.audioBookTape
+];
+
 export const getReaderPlayerType = (
   manifestations: Manifestation[]
 ): "reader" | "player" | null => {
   const materialTypes = getMaterialTypes(manifestations);
 
-  const readerTypes = [
-    ManifestationMaterialType.ebook,
-    ManifestationMaterialType.pictureBookOnline,
-    ManifestationMaterialType.animatedSeriesOnline,
-    ManifestationMaterialType.yearBookOnline
-  ];
-
-  const playerTypes = [
-    ManifestationMaterialType.audioBook,
-    ManifestationMaterialType.podcast,
-    ManifestationMaterialType.musicOnline,
-    ManifestationMaterialType.audioBookTape
-  ];
-
   if (readerTypes.some((type) => materialTypes.includes(type))) return "reader";
   if (playerTypes.some((type) => materialTypes.includes(type))) return "player";