Release 2024.44.0

cypress.config.js

@@ -1,18 +1,23 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { defineConfig } = require("cypress");
+const plugins = require("./cypress/plugins");
 
 module.exports = defineConfig({
   projectId: "4trcdv",
   defaultCommandTimeout: 10000,
   pageLoadTimeout: 10000,
   requestTimeout: 30000,
-  testFiles: "@(apps|components)/**/*.test.@(ts|tsx)",
-  integrationFolder: "./src",
   retries: {
     runMode: 3,
     openMode: 0
   },
   e2e: {
-    baseUrl: "http://localhost:57021"
+    supportFile: "cypress/support/index.ts",
+    specPattern: "./src/@(apps|components)/**/*.test.@(ts|tsx)",
+    baseUrl: "http://localhost:57021",
+    testIsolation: false,
+    setupNodeEvents(on, config) {
+      return plugins(on, config);
+    }
   }
 });

cypress/plugins/index.js

@@ -1,3 +1,6 @@
+// Cypress no longer natively supports plugins file, but we keep it for better code abstraction
+// https://docs.cypress.io/app/references/migration-guide#Plugins-File-Removed
+
 const task = require("@cypress/code-coverage/task");
 const browserify = require("@cypress/browserify-preprocessor");
 

package.json

@@ -45,13 +45,13 @@
     "post-process-generated-graphql": "ts-node ./scripts/post-process-generated-graphql.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
-    "@chromatic-com/storybook": "^2",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^3",
     "@csstools/postcss-sass": "^5.1.1",
     "@cypress/browserify-preprocessor": "^3.0.2",
     "@cypress/code-coverage": "^3.13.4",
@@ -64,7 +64,7 @@
     "@graphql-codegen/typescript-react-query": "^3.5.12",
     "@graphql-typed-document-node/core": "^3.1.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@namics/stylelint-bem": "^10.0.1",
+    "@namics/stylelint-bem": "^10.1.0",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-queryparams": "^7.0.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
@@ -75,7 +75,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tsconfig/create-react-app": "^1.0.2",
     "@types/node": "^20.16.5",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-flatpickr": "^3.8.11",
     "@types/react-redux": "^7.1.24",
@@ -87,14 +87,14 @@
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "caniuse-lite": "^1.0.30001669",
+    "caniuse-lite": "^1.0.30001673",
     "change-case-all": "^2.1.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.0.1",
     "core-js": "^3.38.1",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
-    "cypress": "^9.6.1",
+    "cypress": "^13.0.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -103,10 +103,10 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-webpack-plugin": "^4.2.0",
     "glob": "^8.0.1",
@@ -122,7 +122,7 @@
     "postcss-scss": "^4.0.9",
     "prettier": "^2.6.2",
     "replace-in-file": "^6.3.2",
-    "sass": "^1.80.3",
+    "sass": "^1.80.4",
     "source-map-support": "^0.5.21",
     "storybook": "^8.3.6",
     "style-loader": "^4.0.0",
@@ -145,19 +145,19 @@
     "prop-types": "Since we use former ddb-react components that depend on prop-types we keep this. Should be removed when usage of prop-types is deprecated."
   },
   "dependencies": {
-    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.43.0-633a657a46a0185d84279e07141bbcd31bdbe6f0",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.44.0-34305e57a86041624c7b762d10fa91f044842144",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@reach/alert": "^0.17.0",
+    "@reach/alert": "^0.18.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@types/lodash": "^4.17.5",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "downshift": "8.5.0",
+    "downshift": "^9.0.8",
     "focus-trap-react": "^10.3.0",
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
@@ -166,14 +166,14 @@
     "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.0",
     "react-flatpickr": "^3.10.13",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.3",
     "react-use": "^17.5.1",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "unfetch": "^4.2.0"
+    "unfetch": "^5.0.0"
   },
   "peerDependencies": {
     "postcss": "^8.4.47"

src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx

@@ -49,17 +49,12 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
     }
   } = useReservations();
   const {
-    all: { loans, isLoading: isLoadingLoans },
+    all: { loans, soonOverdue, farFromOverdue, isLoading: isLoadingLoans },
     fbs: {
       overdue: loansOverduePhysical,
       soonOverdue: loansSoonOverduePhysical,
       farFromOverdue: loansFarFromOverduePhysical,
       isLoading: isLoadingLoansPhysical
-    },
-    publizon: {
-      soonOverdue: loansSoonOverdueDigital,
-      farFromOverdue: loansFarFromOverdueDigital,
-      isLoading: isLoadingLoansDigital
     }
   } = useLoans();
 
@@ -125,16 +120,12 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
           break;
 
         case soon:
-          setLoansToDisplay(
-            loansSoonOverduePhysical.concat(loansSoonOverdueDigital)
-          );
+          setLoansToDisplay(soonOverdue);
           setModalHeader(t("loansSoonOverdueText"));
           break;
 
         case longer:
-          setLoansToDisplay(
-            loansFarFromOverduePhysical.concat(loansFarFromOverdueDigital)
-          );
+          setLoansToDisplay(farFromOverdue);
           setModalHeader(t("loansNotOverdueText"));
           break;
 
@@ -143,16 +134,7 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
       }
       open(constructModalId(dueDateModal as string, [dueDateInput]));
     },
-    [
-      dueDateModal,
-      open,
-      loansFarFromOverduePhysical,
-      loansOverduePhysical,
-      loansSoonOverduePhysical,
-      loansSoonOverdueDigital,
-      loansFarFromOverdueDigital,
-      t
-    ]
+    [open, dueDateModal, loansOverduePhysical, t, soonOverdue, farFromOverdue]
   );
 
   const dashboardNotificationsLoan = [
@@ -169,8 +151,7 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
           : openDueDateModal(yesterday)
     },
     {
-      listLength:
-        loansSoonOverduePhysical.length + loansSoonOverdueDigital.length,
+      listLength: soonOverdue.length,
       badge: t("statusBadgeWarningText"),
       header: t("loansSoonOverdueText"),
       color: "warning",
@@ -182,8 +163,7 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
           : openDueDateModal(soon)
     },
     {
-      listLength:
-        loansFarFromOverduePhysical.length + loansFarFromOverdueDigital.length,
+      listLength: farFromOverdue.length,
       header: t("loansNotOverdueText"),
       dataCy: "loans-not-overdue",
       color: "neutral",
@@ -231,11 +211,7 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
               materialsCount={loans.length}
               header={t("physicalLoansText")}
               emptyListText={t("noPhysicalLoansText")}
-              isLoading={
-                isLoadingLoans ||
-                isLoadingLoansPhysical ||
-                isLoadingLoansDigital
-              }
+              isLoading={isLoadingLoans || isLoadingLoansPhysical}
               linkText={t("dashboardLoansLinkText")}
               linkUrl={physicalLoansUrl}
             />
@@ -259,10 +235,7 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
             ...dashboardNotificationsReservations
           ]}
           isLoading={
-            isLoadingLoans ||
-            isLoadingLoansPhysical ||
-            isLoadingLoansDigital ||
-            isLoadingReservations
+            isLoadingLoans || isLoadingLoansPhysical || isLoadingReservations
           }
         />
       )}

src/apps/loan-list/list/loan-list.tsx

@@ -3,7 +3,9 @@ import { useSelector } from "react-redux";
 import dayjs from "dayjs";
 import {
   getAmountOfRenewableLoans,
-  getScrollClass
+  getDueDatesLoan,
+  getScrollClass,
+  sortByDueDate
 } from "../../../core/utils/helpers/general";
 import { getUrlQueryParam } from "../../../core/utils/helpers/url";
 import { useText } from "../../../core/utils/text";
@@ -54,13 +56,12 @@ const LoanList: FC<LoanListProps> = ({ pageSize }) => {
   const [dueDate, setDueDate] = useState<string | null>(null);
   const [modalLoan, setModalLoan] = useState<LoanType | null>(null);
   const {
-    fbs: {
-      loans: loansPhysical,
-      stackedMaterialsDueDates: stackedMaterialsDueDatesFbs,
-      isLoading: isLoadingFbs
-    },
-    publizon: { loans: loansDigital, isLoading: isLoadingPublizon }
+    fbs: { loans: fbsLoans, isLoading: isLoadingFbs },
+    publizon: { loans: publizonLoans, isLoading: isLoadingPublizon }
   } = useLoans();
+  const loansPhysical = sortByDueDate(fbsLoans);
+  const loansDigital = sortByDueDate(publizonLoans);
+  const stackedMaterialsDueDatesFbs = getDueDatesLoan(loansPhysical);
   const openLoanDetailsModal = useCallback(
     (loan: LoanType) => {
       setModalLoan(loan);