Merge pull request #681 from reload/DDFLSBP-209-reset-pause-period

Added ability to cancel pause period
danskernesdigitalebibliotek · Nov 17, 2023 · c588a21 · c588a21
2 parents aa29c1d + 74f8294
commit c588a21
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/src/apps/patron-page/PatronPage.dev.tsx b/src/apps/patron-page/PatronPage.dev.tsx
@@ -85,6 +85,10 @@ export default {
       defaultValue: "Save",
       control: { type: "text" }
     },
+    pauseReservationModalCancelButtonLabelText: {
+      defaultValue: "Cancel pause",
+      control: { type: "text" }
+    },
     patronPageBasicDetailsHeaderText: {
       defaultValue: "Basic details",
       control: { type: "text" }

diff --git a/src/apps/patron-page/PatronPage.entry.tsx b/src/apps/patron-page/PatronPage.entry.tsx
@@ -34,6 +34,7 @@ interface PatronPageTextProps {
   pauseReservationModalBelowInputsTextText: string;
   pauseReservationModalLinkText: string;
   pauseReservationModalSaveButtonLabelText: string;
+  pauseReservationModalCancelButtonLabelText: string;
   patronPageBasicDetailsHeaderText: string;
   patronPageBasicDetailsNameLabelText: string;
   patronPageBasicDetailsAddressLabelText: string;

diff --git a/src/apps/reservation-list/modal/pause-reservation/pause-reservation.tsx b/src/apps/reservation-list/modal/pause-reservation/pause-reservation.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState, useEffect, FormEvent } from "react";
+import React, { FC, useCallback, useState, useEffect, useId } from "react";
 import { useQueryClient } from "react-query";
 import Link from "../../../../components/atoms/links/Link";
 import Modal, { useModalButtonHandler } from "../../../../core/utils/modal";
@@ -25,15 +25,17 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
   const { mutate } = useUpdateV5();
   const { close } = useModalButtonHandler();
   const { pauseReservation } = getModalIds();
+  const saveFormId = useId();
+
   const config = useConfig();
   const [startDate, setStartDate] = useState<string>(
     config("pauseReservationStartDateConfig")
   );
   const [endDate, setEndDate] = useState<string>("");
+  const pauseActive = user?.onHold?.from && user?.onHold?.to;
 
   const save = useCallback(
-    (e: FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
+    (localStartDate?: string, localEndDate?: string) => {
       if (!user) {
         return;
       }
@@ -46,12 +48,10 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
         receiveSms: user.receiveSms
       } as Patron;
 
-      if (startDate || endDate) {
-        saveData.onHold = {
-          from: startDate === "" ? undefined : startDate,
-          to: endDate === "" ? undefined : endDate
-        };
-      }
+      saveData.onHold = {
+        from: localStartDate === "" ? undefined : localStartDate,
+        to: localEndDate === "" ? undefined : localEndDate
+      };
 
       mutate(
         {
@@ -69,9 +69,15 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
         }
       );
     },
-    [close, endDate, mutate, pauseReservation, queryClient, startDate, user]
+    [close, mutate, pauseReservation, queryClient, user]
   );
 
+  const resetPauseDates = useCallback(() => {
+    setStartDate(config("pauseReservationStartDateConfig"));
+    setEndDate("");
+    save();
+  }, [config, save]);
+
   useEffect(() => {
     if (user?.onHold?.from) {
       setStartDate(user.onHold.from);
@@ -90,7 +96,7 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
         "pauseReservationModalAriaDescriptionText"
       )}
     >
-      <form onSubmit={(e) => save(e)} className="modal-pause__container">
+      <div className="modal-pause__container">
         <h2 className="text-header-h3">
           {t("pauseReservationModalHeaderText")}
         </h2>
@@ -99,12 +105,20 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
             {t("pauseReservationModalBodyText")}
           </p>
         </div>
-        <DateInputs
-          setStartDate={setStartDate}
-          setEndDate={setEndDate}
-          startDate={startDate}
-          endDate={endDate}
-        />
+        <form
+          id={saveFormId}
+          onSubmit={(e) => {
+            e.preventDefault();
+            save(startDate, endDate);
+          }}
+        >
+          <DateInputs
+            setStartDate={setStartDate}
+            setEndDate={setEndDate}
+            startDate={startDate}
+            endDate={endDate}
+          />
+        </form>
         <div className="modal-pause__text-link mt-24 color-secondary-gray">
           <p className="text-body-small-regular">
             {t("pauseReservationModalBelowInputsTextText")}
@@ -120,12 +134,22 @@ const PauseReservation: FC<PauseReservationProps> = ({ id, user }) => {
         <div className="modal-pause__button mt-48">
           <button
             type="submit"
-            className="btn-primary btn-filled btn-small arrow__hover--right-small"
+            form={saveFormId}
+            className="btn-primary btn-filled btn-small"
           >
             {t("pauseReservationModalSaveButtonLabelText")}
           </button>
+          {pauseActive && (
+            <button
+              type="button"
+              onClick={resetPauseDates}
+              className="btn-primary btn-small mt-16"
+            >
+              {t("pauseReservationModalCancelButtonLabelText")}
+            </button>
+          )}
         </div>
-      </form>
+      </div>
     </Modal>
   );
 };

diff --git a/src/core/storybook/reservationListArgs.ts b/src/core/storybook/reservationListArgs.ts
@@ -211,6 +211,10 @@ export default {
     defaultValue: "Save",
     control: { type: "text" }
   },
+  pauseReservationModalCancelButtonLabelText: {
+    defaultValue: "Cancel pause",
+    control: { type: "text" }
+  },
   listDetailsNothingSelectedLabelText: {
     defaultValue: "Pick",
     control: { type: "text" }