Merge pull request #751 from danskernesdigitalebibliotek/release/2023…

…-50-0 Release/2023 50 0
danskernesdigitalebibliotek · Dec 11, 2023 · 082f1e4 · 082f1e4
2 parents bb348f2 + 2454a7e
commit 082f1e4
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 177 deletions.
diff --git a/src/apps/fee-list/FeeList.dev.tsx b/src/apps/fee-list/FeeList.dev.tsx
@@ -83,16 +83,12 @@ export default {
       defaultValue: "https://unsplash.com/photos/JDzoTGfoogA", // Open source image of an adventurous duck
       control: { type: "text" }
     },
-    unpaidFeesText: {
-      defaultValue: "Unsettled debt",
+    unpaidFeesFirstHeadlineText: {
+      defaultValue: "Unsettled debt 1",
       control: { type: "text" }
     },
-    prePaymentTypeChangeDateText: {
-      defaultValue: "BEFORE 27/10 2020",
-      control: { type: "text" }
-    },
-    postPaymentTypeChangeDateText: {
-      defaultValue: "AFTER 27/10 2020",
+    unpaidFeesSecondHeadlineText: {
+      defaultValue: "Unsettled debt 2",
       control: { type: "text" }
     },
     alreadyPaidText: {

diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx
@@ -27,9 +27,8 @@ export interface FeeListProps {
   viewFeesAndCompensationRatesText: string;
   etAlText: string;
   viewFeesAndCompensationRatesUrl: string;
-  unpaidFeesText: string;
-  prePaymentTypeChangeDateText: string;
-  postPaymentTypeChangeDateText: string;
+  unpaidFeesFirstHeadlineText: string;
+  unpaidFeesSecondHeadlineText: string;
   alreadyPaidText: string;
   feePaymentModalHeaderText: string;
   feePaymentModalBodyText: string;

diff --git a/src/apps/fee-list/FeeList.tsx b/src/apps/fee-list/FeeList.tsx
@@ -1,9 +1,8 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
 import Link from "../../components/atoms/links/Link";
 import { useGetFeesV2 } from "../../core/fbs/fbs";
 import { FeeV2 } from "../../core/fbs/model";
-import { ModalIdsProps, useModalButtonHandler } from "../../core/utils/modal";
+import { useModalButtonHandler } from "../../core/utils/modal";
 import { useText } from "../../core/utils/text";
 import { useUrls } from "../../core/utils/url";
 import List from "./list";
@@ -25,7 +24,6 @@ const FeeList: FC = () => {
 
   const [feeDetailsModalId, setFeeDetailsModalId] = useState("");
   const { open } = useModalButtonHandler();
-  const { modalIds } = useSelector((s: ModalIdsProps) => s.modal);
   const { data: fbsFees = [] } = useGetFeesV2<FeeV2[]>();
   const [itemsPrePaymentChange, setItemsPrePaymentChange] = useState<
     FeeV2[] | null
@@ -104,10 +102,7 @@ const FeeList: FC = () => {
 
   return (
     <>
-      <div
-        style={modalIds.length > 0 ? { display: "none" } : {}}
-        className="fee-list-page"
-      >
+      <div className="fee-list-page">
         <h1 data-cy="fee-list-headline" className="text-header-h1 my-32">
           {t("feeListHeadlineText")}
         </h1>
@@ -128,29 +123,17 @@ const FeeList: FC = () => {
         )}
         <List
           dataCy="fee-list-before"
-          listHeader={
-            <>
-              {t("unpaidFeesText")} -<span>&nbsp;</span>
-              <b>{t("prePaymentTypeChangeDateText")}</b>
-            </>
-          }
+          listHeader={t("unpaidFeesFirstHeadlineText")}
           openDetailsModalClickEvent={openDetailsModalClickEvent}
           fees={itemsPrePaymentChange}
-          hideCheckbox={false}
           totalText={t("totalText", {
             placeholders: { "@total": totalFeePrePaymentChange }
           })}
         />
         <List
-          listHeader={
-            <>
-              {t("unpaidFeesText")} -<span>&nbsp;</span>
-              <b>{t("postPaymentTypeChangeDateText")}</b>
-            </>
-          }
+          listHeader={t("unpaidFeesSecondHeadlineText")}
           dataCy="fee-list-after"
           openDetailsModalClickEvent={openDetailsModalClickEvent}
-          hideCheckbox
           fees={itemsPostPaymentChange}
           totalText={t("totalText", {
             placeholders: { "@total": totalFeePostPaymentChange }

diff --git a/src/apps/fee-list/fee-list.test.ts b/src/apps/fee-list/fee-list.test.ts
@@ -15,7 +15,7 @@ describe("Fee list", () => {
         patron: {
           blockStatus: null
         }
-      });
+      }).as("patronInfo");
     });
 
     cy.intercept("GET", "**/external/agencyid/patron/patronid/fees/v2**", {
@@ -121,19 +121,13 @@ describe("Fee list", () => {
       .should("have.text", "Fees & Replacement costs");
 
     // 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.get(".fee-list-page")
-      .find("[data-cy='fee-list-body']")
-      .should("exist")
-      .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"
-      );
+    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"
+    );
 
-    // 2.c // 2.e subheadline "Unsettled debt - BEFORE 27/10 2020"
-    cy.get(".dpl-list-buttons__header")
-      .first()
-      .should("exist")
-      .should("contain.text", "Unsettled debt");
+    // 2.c // 2.e subheadline "Unsettled debt 1"
+    cy.getBySel("list-header").should("contain.text", "Unsettled debt");
 
     // 2.d link “See our fees and replacement costs”
     cy.get(".fee-list-page")
@@ -143,15 +137,6 @@ describe("Fee list", () => {
       .should("not.have.attr", "href", "")
       .should("have.text", "See our fees and replacement costs");
 
-    // 3.a text "Please note that paid fees are not registered up until 72 hours after your payment after which your debt is updated and your user unblocked if it has been blocked."
-    cy.get(".fee-list-bottom__paymenttypes")
-      .eq(1)
-      .find("span")
-      .should("exist")
-      .should(
-        "have.text",
-        "Please note that paid fees are not registered up until 72 hours after your payment after which your debt is updated and your user unblocked if it has been blocked."
-      );
     // 3.b list of intermediates
     cy.get(".fee-list-page").find(".list-reservation").eq(0).should("exist");
 
@@ -227,21 +212,6 @@ describe("Fee list", () => {
       .should("exist")
       .should("have.text", "Fee 2.56,-");
 
-    // 3. f List of accepted payment cards
-    cy.get(".fee-list-page")
-      .find(".fee-list-bottom")
-      .eq(0)
-      .find(".fee-list-bottom__paymenttypes")
-      .find("img")
-      .should("exist");
-
-    // 3. f Button pay
-    cy.get(".fee-list-bottom__actions")
-      .eq(0)
-      .find("button")
-      .should("exist")
-      .should("have.text", "Pay");
-
     // 4. a List after date
     // Title
     cy.get("[data-cy='fee-list-after']")

diff --git a/src/apps/fee-list/list.tsx b/src/apps/fee-list/list.tsx
@@ -1,7 +1,6 @@
 import React, { FC, ReactNode } from "react";
 import ListHeader from "../../components/list-header/list-header";
 import { FeeV2 } from "../../core/fbs/model";
-import TotalPaymentPay from "./stackable-fees/total-payment-pay";
 import StackableFees from "./stackable-fees/stackable-fees";
 import { FaustId } from "../../core/utils/types/ids";
 
@@ -10,16 +9,14 @@ interface ListProps {
   fees: FeeV2[] | null;
   dataCy: string;
   listHeader: ReactNode;
-  hideCheckbox: boolean;
   totalText: string;
 }
 const List: FC<ListProps> = ({
   openDetailsModalClickEvent,
   fees,
   listHeader,
   dataCy,
-  totalText,
-  hideCheckbox
+  totalText
 }) => {
   return (
     <div>
@@ -36,11 +33,12 @@ const List: FC<ListProps> = ({
               openDetailsModalClickEvent={openDetailsModalClickEvent}
             />
           ))}
-          <TotalPaymentPay
-            hideCheckbox={hideCheckbox}
-            prePaymentTypeChange={!hideCheckbox}
-            totalText={totalText}
-          />
+          <div className="fee-list-bottom">
+            <div className="fee-list-bottom__paymenttypes" />
+            <div className="fee-list-bottom__actions">
+              <p className="text-body-small-medium">{totalText}</p>
+            </div>
+          </div>
         </div>
       )}
     </div>

diff --git a/src/apps/fee-list/stackable-fees/total-payment-pay.tsx b/src/apps/fee-list/stackable-fees/total-payment-pay.tsx
diff --git a/src/apps/reservation-list/modal/delete-reservation/delete-reservation-modal.tsx b/src/apps/reservation-list/modal/delete-reservation/delete-reservation-modal.tsx
@@ -3,7 +3,10 @@ import { useQueryClient } from "react-query";
 import Modal from "../../../../core/utils/modal";
 import { useText } from "../../../../core/utils/text";
 import DeleteReservationContent from "./delete-reservation-content";
-import { useDeleteReservations } from "../../../../core/fbs/fbs";
+import {
+  getGetReservationsV2QueryKey,
+  useDeleteReservations
+} from "../../../../core/fbs/fbs";
 import {
   getGetV1UserReservationsQueryKey,
   useDeleteV1UserReservationsIdentifier
@@ -75,7 +78,9 @@ const DeleteReservationModal: FC<DeleteReservationModalProps> = ({
       // Since we got success, we can assume that all reservations
       // were successfully deleted.
       setDeletedReservations(reservations.length);
+      // Invalidate queries to update the UI.
       queryClient.invalidateQueries(getGetV1UserReservationsQueryKey());
+      queryClient.invalidateQueries(getGetReservationsV2QueryKey());
     }
   });
 

diff --git a/src/components/list-header/list-header.tsx b/src/components/list-header/list-header.tsx
@@ -4,12 +4,18 @@ export interface ListHeaderProps {
   header: string | ReactNode;
   amount: number | null;
   children?: ReactNode;
+  dataCy?: string;
 }
 
-const ListHeader: FC<ListHeaderProps> = ({ header, amount, children }) => {
+const ListHeader: FC<ListHeaderProps> = ({
+  header,
+  amount,
+  children,
+  dataCy = "list-header"
+}) => {
   return (
     <div className="dpl-list-buttons">
-      <h2 className="dpl-list-buttons__header">
+      <h2 data-cy={dataCy} className="dpl-list-buttons__header">
         {header}
         {amount !== null && (
           <div className="dpl-list-buttons__power">{amount}</div>