Merge pull request #1246 from danskernesdigitalebibliotek/release/bra…

…hma-17

Merge Release/brahma 17 into develop

package.json

@@ -144,7 +144,7 @@
     "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.20.1-dbc6110e263c0be00ca1fc8350a4cf6330ade2e0",
+    "@danskernesdigitalebibliotek/dpl-design-system": "0.0.0-70356826ac9ab36e3718228b01fc5af62ec7cfae",
     "@fullcalendar/core": "^6.1.13",
     "@fullcalendar/daygrid": "^6.1.13",
     "@fullcalendar/interaction": "^6.1.13",

src/apps/advanced-search/AdvancedSearchRow.tsx

@@ -78,13 +78,17 @@ const AdvancedSearchRow: React.FC<AdvancedSearchRowProps> = ({
     newData.rows.splice(index, 1);
     updateData(newData);
     // Update the focus. If we're removing the first row, focus the new first row.
-    setFocusedRow(index);
+    if (newData.rows.length === index) {
+      setFocusedRow(index - 1);
+    } else {
+      setFocusedRow(index);
+    }
   };
   const inputElement = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (inputElement.current && isFocused) {
-      inputElement.current.focus();
+    if (isFocused) {
+      inputElement.current?.focus();
     }
   }, [isFocused]);
 

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

@@ -2,21 +2,26 @@ import React, { FC } from "react";
 import EmptyList from "../../../components/empty-list/empty-list";
 import Notifications, { NotificationMaterialsList } from "./Notifications";
 import NotificationSkeleton from "../dashboard-notification/notification-skeleton";
+import Link from "../../../components/atoms/links/Link";
 
 export interface NotificationColumnProps {
   materials: NotificationMaterialsList[];
   materialsCount: number;
   header: string;
   emptyListText: string;
   isLoading?: boolean;
+  linkText?: string;
+  linkUrl?: URL;
 }
 
 const NotificationColumn: FC<NotificationColumnProps> = ({
   materials,
   materialsCount,
   emptyListText,
   header,
-  isLoading = false
+  isLoading = false,
+  linkText,
+  linkUrl
 }) => {
   return (
     <div className="status-userprofile__column my-64">
@@ -39,6 +44,14 @@ const NotificationColumn: FC<NotificationColumnProps> = ({
       {materialsCount !== 0 && (
         <Notifications materials={materials} showStatusLabel />
       )}
+      {linkText && linkUrl && (
+        <div className="mt-8">
+          <Link href={linkUrl} className="link-tag link-tag link-filters__tag">
+            {linkText}
+          </Link>
+          <span className="link-filters__counter">{materialsCount}</span>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -25,6 +25,7 @@ import {
   getModalIds
 } from "../../../core/utils/helpers/modal-helpers";
 import { ListType } from "../../../core/utils/types/list-type";
+import { useUrls } from "../../../core/utils/url";
 
 export interface DashboardNotificationListProps {
   pageSize: number;
@@ -36,6 +37,9 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
   columns
 }) => {
   const t = useText();
+  const u = useUrls();
+  const physicalLoansUrl = u("physicalLoansUrl");
+  const reservationsUrl = u("reservationsUrl");
   const {
     all: {
       reservations,
@@ -215,13 +219,17 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
               header={t("physicalLoansText")}
               emptyListText={t("noPhysicalLoansText")}
               isLoading={isLoadingLoans || isLoadingLoansPhysical}
+              linkText={t("dashboardLoansLinkText")}
+              linkUrl={physicalLoansUrl}
             />
             <NotificationColumn
               materials={dashboardNotificationsReservations}
               materialsCount={reservations.length}
               header={t("reservationsText")}
               emptyListText={t("noReservationsText")}
               isLoading={isLoadingReservations}
+              linkText={t("dashboardReservationsLinkText")}
+              linkUrl={reservationsUrl}
             />
           </>
         )}

src/apps/dashboard/dashboard.dev.tsx

@@ -157,6 +157,14 @@ export default {
     expirationWarningDaysBeforeConfig: {
       defaultValue: "6",
       control: { type: "text" }
+    },
+    dashboardLoansLinkText: {
+      defaultValue: "All loans",
+      control: { type: "text" }
+    },
+    dashboardReservationsLinkText: {
+      defaultValue: "All reservations",
+      control: { type: "text" }
     }
   },
   component: DashBoard

src/apps/dashboard/dashboard.entry.tsx

@@ -58,6 +58,8 @@ export interface DashBoardProps {
   totalAmountFeeText: string;
   totalOwedText: string;
   yourProfileText: string;
+  dashboardLoansLinkText: string;
+  dashboardReservationsLinkText: string;
 }
 
 const DashboardEntry: FC<

src/apps/fee-list/FeeList.dev.tsx

@@ -7,6 +7,10 @@ import FeeList from "./FeeList.entry";
 import { getModalIds } from "../../core/utils/helpers/modal-helpers";
 import globalTextArgs from "../../core/storybook/globalTextArgs";
 import globalConfigArgs from "../../core/storybook/globalConfigArgs";
+import groupModalArgs from "../../core/storybook/groupModalArgs";
+import groupModalLoansArgs from "../../core/storybook/loanGroupModalArgs";
+import materialDetailsModalArgs from "../../core/storybook/materialDetailsModalArgs";
+import renewalArgs from "../../core/storybook/renewalArgs";
 
 export default {
   title: "Apps / Fee list",
@@ -16,6 +20,10 @@ export default {
     ...blockedArgs,
     ...globalTextArgs,
     ...globalConfigArgs,
+    ...groupModalArgs,
+    ...groupModalLoansArgs,
+    ...materialDetailsModalArgs,
+    ...renewalArgs,
     feeListHeadlineText: {
       defaultValue: "Fees & Replacement costs",
       control: { type: "text" }
@@ -179,6 +187,10 @@ export default {
       defaultValue: "Go to the loan list page to see your overdue loans",
       control: { type: "text" }
     },
+    loansOverdueText: {
+      defaultValue: "Returned too late",
+      control: { type: "text" }
+    },
     // Urls
     physicalLoansUrl: {
       defaultValue: "/user/me/loans",

src/apps/fee-list/FeeList.entry.tsx

@@ -7,6 +7,11 @@ import FeeList from "./FeeList";
 import GlobalUrlEntryPropsInterface from "../../core/utils/types/global-url-props";
 import { withConfig } from "../../core/utils/config";
 import { GlobalEntryTextProps } from "../../core/storybook/globalTextArgs";
+import { pageSizeGlobal } from "../../core/utils/helpers/general";
+import { GroupModalProps } from "../../core/storybook/groupModalArgs";
+import { GroupModalLoansProps } from "../../core/storybook/loanGroupModalArgs";
+import { MaterialDetailsModalProps } from "../../core/storybook/materialDetailsModalArgs";
+import { RenewalArgs } from "../../core/storybook/renewalArgs";
 
 export interface IntermedateListEntryConfigProps {
   expirationWarningDaysBeforeConfig: string;
@@ -62,8 +67,22 @@ const FeeListEntry: FC<
     BlockedPatronEntryTextProps &
     IntermedateListEntryConfigProps &
     GlobalEntryTextProps &
-    GlobalUrlEntryPropsInterface
-> = () => <FeeList />;
+    GlobalUrlEntryPropsInterface &
+    GroupModalProps &
+    GroupModalLoansProps &
+    MaterialDetailsModalProps &
+    RenewalArgs
+> = ({ pageSizeDesktop, pageSizeMobile }) => {
+  const pageSize = pageSizeGlobal(
+    {
+      desktop: pageSizeDesktop,
+      mobile: pageSizeMobile
+    },
+    // We use page size from loan list for overdue loans modal on the fees page.
+    "pageSizeLoanList"
+  );
+  return <FeeList pageSize={pageSize} />;
+};
 
 export default withUrls(
   withText(withIsPatronBlockedHoc(withConfig(FeeListEntry)))

src/apps/fee-list/FeeList.tsx

@@ -23,11 +23,23 @@ import FeeListSkeleton from "./FeeListSkeleton";
 import WarningBar from "../loan-list/materials/utils/warning-bar";
 import useLoans from "../../core/utils/useLoans";
 import { LoanType } from "../../core/utils/types/loan-type";
+import LoansGroupModal, {
+  createLoanModalId
+} from "../../components/GroupModal/LoansGroupModal";
+import MaterialDetailsModal, {
+  loanDetailsModalId
+} from "../loan-list/modal/material-details-modal";
+import SimpleModalHeader from "../../components/GroupModal/SimpleModalHeader";
+import { getModalIds } from "../../core/utils/helpers/modal-helpers";
+import MaterialDetails from "../loan-list/modal/material-details";
 
-const FeeList: FC = () => {
+interface FeeListProps {
+  pageSize: number;
+}
+
+const FeeList: FC<FeeListProps> = ({ pageSize }) => {
   const t = useText();
   const u = useUrls();
-  const physicalLoansUrl = u("physicalLoansUrl");
   const viewFeesAndCompensationRatesUrl = u("viewFeesAndCompensationRatesUrl");
   const [feeDetailsModalId, setFeeDetailsModalId] = useState("");
   const { open } = useModalButtonHandler();
@@ -41,6 +53,9 @@ const FeeList: FC = () => {
   } = useLoans();
   const [overdueLoans, setOverdueLoans] = useState<LoanType[]>([]);
   const [feeDetailsData, setFeeDetailsData] = useState<FeeV2[]>();
+  const dueDate: string | number = "yesterday";
+  const { dueDateModal, allLoansId } = getModalIds();
+  const [modalLoan, setModalLoan] = useState<LoanType | null>(null);
   const openDetailsModalClickEvent = useCallback(
     (feeId: number) => {
       if (feeId) {
@@ -61,6 +76,13 @@ const FeeList: FC = () => {
   }, [fbsFees]);
   const shouldShowWarningBar =
     overdueLoans.length > 0 && !isLoadingFbs && !isLoadingPublizon;
+  const openLoanDetailsModal = useCallback(
+    (loan: LoanType) => {
+      setModalLoan(loan);
+      open(loanDetailsModalId(loan));
+    },
+    [open]
+  );
 
   useEffect(() => {
     if (!isLoadingFbs && !isLoadingPublizon) {
@@ -71,6 +93,17 @@ const FeeList: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadingFbs, isLoadingPublizon]);
 
+  const openLoanModal = useCallback(
+    (loans: LoanType[]) => {
+      if (loans.length === 1) {
+        openLoanDetailsModal(loans[0]);
+      } else {
+        open(createLoanModalId(dueDate, dueDateModal, allLoansId));
+      }
+    },
+    [openLoanDetailsModal, open, allLoansId, dueDateModal]
+  );
+
   return (
     <>
       <div className="fee-list-page" data-cy="fee-list-page">
@@ -92,8 +125,8 @@ const FeeList: FC = () => {
             })}
             rightButtonText={t("feeListSeeYourOverdueLoansText")}
             rightButtonAriaLabelText={t("feeListSeeYourOverdueLoansAriaText")}
-            rightLink={physicalLoansUrl}
             classNames="my-64"
+            rightAction={() => openLoanModal(overdueLoans)}
           />
         )}
         <div className="fee-list-body__payment-button">
@@ -155,6 +188,25 @@ const FeeList: FC = () => {
         )}
       </FeeDetailsModal>
       <MyPaymentOverviewModal />
+      {!isLoadingFbs && (
+        <LoansGroupModal
+          pageSize={pageSize}
+          openDetailsModal={openLoanDetailsModal}
+          dueDate={dueDate}
+          loansModal={loansOverduePhysical}
+        >
+          <SimpleModalHeader header={t("loansOverdueText")} />
+        </LoansGroupModal>
+      )}
+      {modalLoan && (
+        <MaterialDetailsModal modalId={loanDetailsModalId(modalLoan)}>
+          <MaterialDetails
+            item={modalLoan}
+            loan={modalLoan as LoanType}
+            modalId={loanDetailsModalId(modalLoan)}
+          />
+        </MaterialDetailsModal>
+      )}
     </>
   );
 };

src/apps/fee-list/list.tsx

@@ -34,6 +34,7 @@ const List: FC<ListProps> = ({
               materialItemNumber={itemData.materials[0].materialItemNumber}
               feeData={itemData}
               openDetailsModalClickEvent={openDetailsModalClickEvent}
+              key={itemData.feeId}
             />
           ))}
           <div className="fee-list-bottom">

src/apps/loan-list/materials/utils/warning-bar.tsx

@@ -2,6 +2,7 @@ import React, { FC, useId } from "react";
 import IconWarning from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-warning.svg";
 import Link from "../../../../components/atoms/links/Link";
 import LinkButton from "../../../../components/Buttons/LinkButton";
+import { Button } from "../../../../components/Buttons/Button";
 
 interface WarningBarProps {
   linkText?: string;
@@ -12,6 +13,7 @@ interface WarningBarProps {
   leftLink?: URL;
   rightLink?: URL;
   classNames?: string;
+  rightAction?: () => void;
 }
 
 const WarningBar: FC<WarningBarProps> = ({
@@ -22,7 +24,8 @@ const WarningBar: FC<WarningBarProps> = ({
   rightButtonAriaLabelText,
   leftLink,
   rightLink,
-  classNames
+  classNames,
+  rightAction
 }) => {
   const labelId = useId();
 
@@ -50,7 +53,7 @@ const WarningBar: FC<WarningBarProps> = ({
           </p>
         </div>
       </div>
-      {(rightText || rightLink) && (
+      {(rightText || rightLink || rightAction) && (
         <div className="warning-bar__right">
           {rightText && (
             <p
@@ -60,19 +63,33 @@ const WarningBar: FC<WarningBarProps> = ({
               {rightText}
             </p>
           )}{" "}
-          <span className="hide-visually" id={labelId}>
-            {rightButtonAriaLabelText}
-          </span>
           {rightLink && (
-            <LinkButton
-              dataCy="warning-bar-right-link"
-              url={rightLink}
+            <>
+              <span className="hide-visually" id={labelId}>
+                {rightButtonAriaLabelText}
+              </span>
+
+              <LinkButton
+                dataCy="warning-bar-right-link"
+                url={rightLink}
+                size="small"
+                variant="filled"
+                ariaLabelledBy={labelId}
+              >
+                {rightButtonText}
+              </LinkButton>
+            </>
+          )}
+          {!!rightAction && !!rightButtonText && (
+            <Button
               size="small"
               variant="filled"
-              ariaLabelledBy={labelId}
-            >
-              {rightButtonText}
-            </LinkButton>
+              buttonType="none"
+              collapsible={false}
+              disabled={false}
+              label={rightButtonText}
+              onClick={rightAction}
+            />
           )}
         </div>
       )}