Merge pull request #910 from danskernesdigitalebibliotek/release/2024…

…-5-0 Merge Release/2024-5-0 into develop
danskernesdigitalebibliotek · Jan 30, 2024 · 7fb49c7 · 7fb49c7
2 parents 6a9e107 + 2077008
commit 7fb49c7
Show file tree

Hide file tree

Showing 50 changed files with 521 additions and 427 deletions.
diff --git a/.storybook/dev-fonts.scss b/.storybook/dev-fonts.scss
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,3 @@
-import "./dev-fonts.scss";
 import "../src/components/components.scss";
 import "@danskernesdigitalebibliotek/dpl-design-system/build/css/base.css";
 import {

diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/react-flatpickr": "^3.8.11",
     "@types/react-redux": "^7.1.24",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^6.19.0",
@@ -143,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.4.0-174d424951b2cc03e92bd2522b707f59226e8f12",
+    "@danskernesdigitalebibliotek/dpl-design-system": "^2024.5.0-d17ec00d0db46973e99a8643a92b11e4eeb183d0",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",
@@ -161,6 +162,7 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
+    "react-flatpickr": "^3.10.13",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.3",
     "react-use": "^17.4.3",

diff --git a/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx b/src/apps/dashboard/dashboard-notification-list/dashboard-notification-list.tsx
@@ -18,7 +18,6 @@ import DeleteReservationModal, {
   deleteReservationModalId
 } from "../../reservation-list/modal/delete-reservation/delete-reservation-modal";
 import Notifications from "./Notifications";
-import AcceptModal from "../../../components/accept-fees-modal/AcceptFeesModal";
 import useReservations from "../../../core/utils/useReservations";
 import useLoans from "../../../core/utils/useLoans";
 import { ReservationType } from "../../../core/utils/types/reservation-type";
@@ -57,15 +56,14 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
       farFromOverdue: loansFarFromOverdue
     }
   } = useLoans();
-  const [accepted, setAccepted] = useState<boolean>(false);
   const [reservationsForDeleting, setReservationsForDeleting] = useState<
     ReservationType[]
   >([]);
   const [loansToDisplay, setLoansToDisplay] = useState<LoanType[] | null>(null);
   const [modalHeader, setModalHeader] = useState("");
 
   const { open } = useModalButtonHandler();
-  const { acceptModal, dueDateModal, deleteReservations } = getModalIds();
+  const { dueDateModal, deleteReservations } = getModalIds();
   const [dueDate, setDueDate] = useState<string | null>(null);
   const [modalLoan, setModalLoan] = useState<LoanType | null>(null);
   const [reservationForModal, setReservationForModal] =
@@ -178,10 +176,6 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
     }
   ];
 
-  const openAcceptModal = useCallback(() => {
-    open(`${acceptModal}`);
-  }, [acceptModal, open]);
-
   const dashboardNotificationsReservations = [
     {
       listLength: reservationsReadyToLoan.length,
@@ -207,9 +201,6 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
           : openModalHandler(reservationsQueueID as string)
     }
   ];
-  const resetAccepted = () => {
-    setAccepted(false);
-  };
 
   return (
     <>
@@ -254,9 +245,6 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
       )}
       {dueDate && loans && loansToDisplay && (
         <LoansGroupModal
-          accepted={accepted}
-          resetAccepted={() => resetAccepted()}
-          openAcceptModal={openAcceptModal}
           pageSize={pageSize}
           openDetailsModal={openLoanDetailsModal}
           dueDate={dueDate}
@@ -296,7 +284,6 @@ const DashboardNotificationList: FC<DashboardNotificationListProps> = ({
           />
         </MaterialDetailsModal>
       )}
-      <AcceptModal accept={() => setAccepted(true)} />
     </>
   );
 };

diff --git a/src/apps/dashboard/dashboard.dev.tsx b/src/apps/dashboard/dashboard.dev.tsx
@@ -59,7 +59,7 @@ export default {
       control: { type: "text" }
     },
     totalAmountFeeText: {
-      defaultValue: "@total,-",
+      defaultValue: "@total DKK",
       control: { type: "text" }
     },
     physicalLoansText: {

diff --git a/src/apps/dashboard/dashboard.test.tsx b/src/apps/dashboard/dashboard.test.tsx
@@ -1363,7 +1363,7 @@ describe("Dashboard", () => {
     cy.getBySel("warning-bar-text").should("have.text", "You owe in total");
 
     // The amount the patron ows
-    cy.getBySel("warning-bar-right-text").should("have.text", "265,06,-");
+    cy.getBySel("warning-bar-right-text").should("have.text", "265,06 DKK");
 
     // A pay button that links to fees page
     cy.getBySel("warning-bar-right-link")

diff --git a/src/apps/fee-list/FeeList.dev.tsx b/src/apps/fee-list/FeeList.dev.tsx
@@ -62,7 +62,7 @@ export default {
       control: { type: "text" }
     },
     totalText: {
-      defaultValue: "Total @total,-",
+      defaultValue: "Total @total DKK",
       control: { type: "text" }
     },
     expirationWarningDaysBeforeConfig: {
@@ -147,7 +147,7 @@ export default {
       control: {
         type: "text"
       },
-      defaultValue: "Fee @fee,-"
+      defaultValue: "Fee @fee DKK"
     },
     feeCreatedText: {
       control: {
@@ -159,18 +159,27 @@ export default {
       defaultValue: "https://unsplash.com/photos/JDzoTGfoogA", // Open source image of an adventurous duck
       control: { type: "text" }
     },
-    paymentOverviewUrl: {
-      defaultValue: "https://unsplash.com/photos/yjI3ozta2Zk", // Open source image of a fluffy floofer
-      control: { type: "text" }
-    },
     feeListAlreadyPaidInfoText: {
       defaultValue:
         "Already paid? It can take up to 72 hours to register the transaction.",
       control: { type: "text" }
     },
+    feeListAlreadyPaidSecondInfoText: {
+      defaultValue:
+        "Already paid? It can take up to 72 hours to register the transaction. (not payable by user)",
+      control: { type: "text" }
+    },
     feeListMaterialNumberText: {
       defaultValue: "# @materialNumber",
       control: { type: "text" }
+    },
+    feeListPaymentSiteUrl: {
+      defaultValue: "https://google.com",
+      control: { type: "text" }
+    },
+    feeListConfig: {
+      defaultValue: '{ "paymentSiteButtonLabel": "Go to payment page" }',
+      control: { type: "text" }
     }
   },
   decorators: [withQuery]

diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx
@@ -18,12 +18,14 @@ export interface FeeListProps {
   emptyFeeListText: string;
   etAlText: string;
   feeCreatedText: string;
-  feeDetailsModalScreenReaderText: string;
   feeDetailsModalCloseModalAriaLabelText: string;
   feeDetailsModalDescriptionText: string;
+  feeDetailsModalScreenReaderText: string;
   feeListBodyText: string;
+  feeListConfig: string;
   feeListDaysText: string;
   feeListHeadlineText: string;
+  feeListPaymentSiteUrl: string;
   feePaymentModalBodyText: string;
   feePaymentModalCancelText: string;
   feePaymentModalGotoText: string;
@@ -43,10 +45,12 @@ export interface FeeListProps {
   totalFeeAmountText: string;
   totalText: string;
   turnedInText: string;
-  unpaidFeesPayableByClientHeadlineText: string;
   unpaidFeesNotPayableByClientHeadlineText: string;
+  unpaidFeesPayableByClientHeadlineText: string;
   viewFeesAndCompensationRatesText: string;
   viewFeesAndCompensationRatesUrl: string;
+  feeListAlreadyPaidInfoText: string;
+  feeListAlreadyPaidSecondInfoText: string;
 }
 
 const FeeListEntry: FC<

diff --git a/src/apps/fee-list/FeeList.tsx b/src/apps/fee-list/FeeList.tsx
@@ -17,6 +17,7 @@ import {
 } from "./utils/helper";
 import ListHeader from "../../components/list-header/list-header";
 import EmptyList from "../../components/empty-list/empty-list";
+import FeePaymentButton from "./FeePaymentButton";
 
 const FeeList: FC = () => {
   const t = useText();
@@ -55,12 +56,17 @@ const FeeList: FC = () => {
         <h1 data-cy="fee-list-headline" className="text-header-h1 my-32">
           {t("feeListHeadlineText")}
         </h1>
-        <span data-cy="fee-list-body">
-          {t("feeListBodyText")}{" "}
-          <Link className="link-tag" href={viewFeesAndCompensationRatesUrl}>
-            {t("viewFeesAndCompensationRatesText")}
-          </Link>
-        </span>
+        <div data-cy="fee-list-body">
+          <div className="fee-list-body__text">{t("feeListBodyText")}</div>
+          <div className="fee-list-body__payment-info-link">
+            <Link className="link-tag" href={viewFeesAndCompensationRatesUrl}>
+              {t("viewFeesAndCompensationRatesText")}
+            </Link>
+          </div>
+        </div>
+        <div className="fee-list-body__payment-button">
+          <FeePaymentButton />
+        </div>
         {!fbsFees.length && (
           <>
             <ListHeader
@@ -77,28 +83,34 @@ const FeeList: FC = () => {
         {getFeesBasedOnPayableByClient(fbsFees, true).length > 0 && (
           <List
             dataCy="fee-list"
+            className="fee-list"
             listHeader={t("unpaidFeesPayableByClientHeadlineText")}
             openDetailsModalClickEvent={openDetailsModalClickEvent}
             fees={getFeesBasedOnPayableByClient(fbsFees, true)}
             totalText={t("totalText", {
               placeholders: {
-                "@total": totalFeeAmountPayableByClient()
+                "@total":
+                  totalFeeAmountPayableByClient().toLocaleString("da-DK")
               }
             })}
+            alreadyPaidText={t("feeListAlreadyPaidInfoText")}
           />
         )}
         {/* List of fees that can only be paid by the user externally */}
         {getFeesBasedOnPayableByClient(fbsFees, false).length > 0 && (
           <List
             dataCy="fee-list"
+            className="fee-list"
             listHeader={t("unpaidFeesNotPayableByClientHeadlineText")}
             openDetailsModalClickEvent={openDetailsModalClickEvent}
             fees={getFeesBasedOnPayableByClient(fbsFees, false)}
             totalText={t("totalText", {
               placeholders: {
-                "@total": totalFeeAmountNotPayableByClient()
+                "@total":
+                  totalFeeAmountNotPayableByClient().toLocaleString("da-DK")
               }
             })}
+            alreadyPaidText={t("feeListAlreadyPaidSecondInfoText")}
           />
         )}
       </div>

diff --git a/src/apps/fee-list/FeePaymentButton.tsx b/src/apps/fee-list/FeePaymentButton.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { FC } from "react";
+import LinkButton from "../../components/Buttons/LinkButton";
+import { useUrls } from "../../core/utils/url";
+import { useConfig } from "../../core/utils/config";
+
+export interface FeePaymentButtonProps {
+  dataCy?: string;
+}
+
+const FeePaymentButton: FC<FeePaymentButtonProps> = ({
+  dataCy = "fee-payment-button"
+}) => {
+  const config = useConfig();
+  const u = useUrls();
+
+  const { paymentSiteButtonLabel } = config<{
+    paymentSiteButtonLabel: string;
+  }>("feeListConfig", {
+    transformer: "jsonParse"
+  });
+  const url = u("feeListPaymentSiteUrl", true);
+
+  if (!url) return null;
+
+  return (
+    <LinkButton
+      dataCy={dataCy}
+      url={url}
+      buttonType="external-link"
+      size="small"
+      variant="outline"
+    >
+      {paymentSiteButtonLabel}
+    </LinkButton>
+  );
+};
+
+export default FeePaymentButton;
diff --git a/src/apps/fee-list/fee-list.test.ts b/src/apps/fee-list/fee-list.test.ts
@@ -123,7 +123,7 @@ describe("Fee list", () => {
     // 2.b text "Overdue fees and replacement costs that were created before dd/mm/åååå can still be paid on this page. See our fees and replacement costs"
     cy.getBySel("fee-list-body").should(
       "have.text",
-      "Overdue fees and replacement costs that were created before 27/10/2020 can still be paid on this page. See our fees and replacement costs"
+      "Overdue fees and replacement costs that were created before 27/10/2020 can still be paid on this page.See our fees and replacement costs"
     );
 
     // 2.c // 2.e subheadline "Unsettled debt 1"
@@ -213,7 +213,7 @@ describe("Fee list", () => {
       .find(".list-reservation__fee")
       .find(".text-body-medium-regular")
       .should("exist")
-      .should("have.text", "Fee 70,-");
+      .should("have.text", "Fee 70 DKK");
 
     // 4.b +x other materials
     cy.getBySel("fee-list-page")

diff --git a/src/apps/fee-list/list.tsx b/src/apps/fee-list/list.tsx
@@ -3,28 +3,29 @@ import ListHeader from "../../components/list-header/list-header";
 import { FeeV2 } from "../../core/fbs/model";
 import StackableFees from "./stackable-fees/stackable-fees";
 import { FaustId } from "../../core/utils/types/ids";
-import { useText } from "../../core/utils/text";
 
 interface ListProps {
   openDetailsModalClickEvent: (faustId: string) => void;
   fees: FeeV2[] | null;
   dataCy: string;
   listHeader: ReactNode;
   totalText: string;
+  className?: string;
+  alreadyPaidText: string;
 }
 const List: FC<ListProps> = ({
   openDetailsModalClickEvent,
   fees,
   listHeader,
   dataCy,
-  totalText
+  totalText,
+  className,
+  alreadyPaidText
 }) => {
-  const t = useText();
-
   return (
     <div>
       {fees && (
-        <div data-cy={dataCy}>
+        <div className={className} data-cy={dataCy}>
           <ListHeader header={listHeader} amount={fees.length} />
           {fees.map((itemData) => (
             <StackableFees
@@ -40,7 +41,7 @@ const List: FC<ListProps> = ({
             <div className="fee-list-bottom__paymenttypes" />
             <div className="fee-list-bottom__actions">
               <p className="text-small-caption color-secondary-gray">
-                {t("feeListAlreadyPaidInfoText")}
+                {alreadyPaidText}
               </p>
               <p className="text-body-small-medium mt-16">{totalText}</p>
             </div>