Refactor featureFlag to adopt object-based approach for improved ex…

…tensibility

- Replaces single function (isVisible) with a featureFlag object
- Introduces a features list (name, active), allowing for future expansion
- Implements an isActive() method to handle feature toggles more cleanly

src/apps/loan-list/modal/material-details.tsx

@@ -23,7 +23,7 @@ import { RenewedLoanV2 } from "../../../core/fbs/model";
 import RenewalModalMessage from "../../../components/renewal/RenewalModalMessage";
 import { formatDate } from "../../../core/utils/helpers/date";
 import useGetWorkUrlFromPublizonIdentifier from "../../../core/utils/useGetWorkUrlFromPublizonIdentifier";
-import isVisible from "../../../core/utils/featureFlag";
+import featureFlag from "../../../core/utils/featureFlag";
 
 interface MaterialDetailsProps {
   loan: LoanType | null;
@@ -121,7 +121,9 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               renewalStatusList={renewalStatusList}
             />
           )}
-          {isVisible("readerPlayer") && isDigital(loan) && workUrl ? (
+          {featureFlag.isActive("readerPlayer") &&
+          isDigital(loan) &&
+          workUrl ? (
             <div className="modal-details__buttons modal-details__buttons--hide-on-mobile">
               <Link
                 href={workUrl}
@@ -200,7 +202,9 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               renewalStatusList={renewalStatusList}
             />
           )}
-          {isVisible("readerPlayer") && isDigital(loan) && workUrl ? (
+          {featureFlag.isActive("readerPlayer") &&
+          isDigital(loan) &&
+          workUrl ? (
             <div className="modal-details__buttons">
               <Link
                 href={workUrl}
@@ -211,7 +215,7 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
             </div>
           ) : (
             // Todo: Delete this else block after the readerPlayer feature flag is removed
-            !isVisible("readerPlayer") &&
+            !featureFlag.isActive("readerPlayer") &&
             isDigital(loan) && (
               <div className="modal-details__buttons">
                 <Link

src/apps/material/material.tsx

@@ -40,7 +40,7 @@ import MaterialDisclosure from "./MaterialDisclosure";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
 import PlayerModal from "../../components/material/player-modal/PlayerModal";
 import useReaderPlayer from "../../core/utils/useReaderPlayer";
-import isVisible from "../../core/utils/featureFlag";
+import featureFlag from "../../core/utils/featureFlag";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -200,7 +200,7 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
             setSelectedPeriodical={setSelectedPeriodical}
           />
         )}
-        {isVisible("readerPlayer") && readerPlayerType === "player" && (
+        {featureFlag.isActive("readerPlayer") && readerPlayerType === "player" && (
           <>
             {identifier && <PlayerModal identifier={identifier} />}
             {orderId && <PlayerModal orderId={orderId} />}

src/components/material/material-buttons/online/MaterialButtonsOnline.tsx

@@ -14,7 +14,7 @@ import MaterialButtonOnlineExternal from "./MaterialButtonOnlineExternal";
 import MaterialButtonOnlineInfomediaArticle from "./MaterialButtonOnlineInfomediaArticle";
 import { ManifestationMaterialType } from "../../../../core/utils/types/material-type";
 import MaterialButtonsOnlineInternal from "./MaterialButtonsOnlineInternal";
-import isVisible from "../../../../core/utils/featureFlag";
+import featureFlag from "../../../../core/utils/featureFlag";
 import useReaderPlayer from "../../../../core/utils/useReaderPlayer";
 
 export interface MaterialButtonsOnlineProps {
@@ -80,7 +80,7 @@ const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
             ariaLabelledBy={ariaLabelledBy}
           />
         )}
-        {isVisible("readerPlayer") && (
+        {featureFlag.isActive("readerPlayer") && (
           <MaterialButtonsOnlineInternal
             size={size}
             manifestations={manifestations}

src/core/utils/featureFlag.ts

@@ -1,13 +1,25 @@
-type FeatureFlagType = "readerPlayer";
+const allowedUrls = ["dpl-", "dapple-cms"];
 
-const isVisible = (name: FeatureFlagType): boolean => {
-  const allowedUrls = ["dpl-", "dapple-cms"];
+const features = [
+  { name: "exampleFeature", active: false },
+  { name: "readerPlayer", active: true }
+] as const;
 
-  if (name === "readerPlayer") {
-    return allowedUrls.some((url) => window.location.href.includes(url));
-  }
+type FeatureNameType = typeof features[number]["name"];
+
+const featureFlag = {
+  features,
+
+  isActive(name: FeatureNameType): boolean {
+    const feature = this.features.find((f) => f.name === name);
+    if (!feature) return false;
 
-  return false;
+    const isAllowedUrl = allowedUrls.some((url) =>
+      window.location.href.includes(url)
+    );
+
+    return feature.active && isAllowedUrl;
+  }
 };
 
-export default isVisible;
+export default featureFlag;