Merge pull request #680 from reload/DDFLSBP-70-pause-remove-toggle

Refactor reservation pause banner
danskernesdigitalebibliotek · Nov 17, 2023 · 61eb286 · 61eb286
2 parents c588a21 + 9db62be
commit 61eb286
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/src/apps/reservation-list/list/reservation-list.dev.tsx b/src/apps/reservation-list/list/reservation-list.dev.tsx
@@ -185,14 +185,22 @@ export default {
       defaultValue: "Pause your reservations",
       control: { type: "text" }
     },
+    reservationListPauseReservationOnHoldText: {
+      defaultValue: "Your reservations are paused",
+      control: { type: "text" }
+    },
     reservationListOnHoldAriaText: {
       defaultValue:
         "Reservations have been paused in the following time span: ",
       control: { type: "text" }
     },
     reservationListPauseReservationAriaModalText: {
       defaultValue:
-        "This button opens a modal that covers the entire page and contains the possibility to pause physical reservations",
+        "Opens a modal that covers the entire page where it is possible to pause physical reservations",
+      control: { type: "text" }
+    },
+    reservationListPauseReservationButtonText: {
+      defaultValue: "Settings",
       control: { type: "text" }
     },
     pauseReservationModalAriaDescriptionText: {
@@ -234,6 +242,10 @@ export default {
       defaultValue: "Save",
       control: { type: "text" }
     },
+    pauseReservationModalCancelButtonLabelText: {
+      defaultValue: "Cancel pause",
+      control: { type: "text" }
+    },
     showMoreText: {
       name: "Show more Text",
       defaultValue: "show more",

diff --git a/src/apps/reservation-list/list/reservation-list.entry.tsx b/src/apps/reservation-list/list/reservation-list.entry.tsx
@@ -46,7 +46,9 @@ export interface ReservationListTextProps {
   reservationListAvailableInText: string;
   reservationDetailsExpiresTitleText: string;
   reservationDetailsOthersInQueueText: string;
+  reservationListPauseReservationButtonText: string;
   reservationListPauseReservationText: string;
+  reservationListPauseReservationOnHoldText: string;
   reservationListOnHoldAriaText: string;
   reservationListPauseReservationAriaModalText: string;
   pauseReservationModalAriaDescriptionText: string;
@@ -58,6 +60,7 @@ export interface ReservationListTextProps {
   pauseReservationModalBelowInputsTextText: string;
   pauseReservationModalLinkText: string;
   pauseReservationModalSaveButtonLabelText: string;
+  pauseReservationModalCancelButtonLabelText: string;
   reservationListReadyForPickupTitleText: string;
   reservationListReadyForPickupEmptyText: string;
   reservationListPhysicalReservationsEmptyText: string;

diff --git a/src/apps/reservation-list/list/reservation-list.test.ts b/src/apps/reservation-list/list/reservation-list.test.ts
@@ -244,7 +244,6 @@ describe("Reservation list", () => {
           emailAddress: "[email protected]",
           name: "Testkort ITK CMS Merkur",
           notificationProtocols: ["DIGITAL_POST"],
-          onHold: { from: "some date", to: "some date" },
           patronId: 10101010,
           phoneNumber: null,
           preferredLanguage: "da",
@@ -326,7 +325,7 @@ describe("Reservation list", () => {
       .should("have.text", "Pause your reservations");
     // ID 11 2.a.ii. Toggle switch: which show whether the users reservation is paused
     cy.get(".dpl-pause-reservation-component")
-      .find(".dpl-toggle-button--active")
+      .find(".btn-primary")
       .should("exist");
 
     // ID 11 2.b. The list "Ready for pickup"

diff --git a/src/apps/reservation-list/list/reservation-pause-toggler.tsx b/src/apps/reservation-list/list/reservation-pause-toggler.tsx
@@ -40,7 +40,9 @@ const ReservationPauseToggler: FC<ReservationPauseTogglerProps> = ({
           <img src={ReservationsIcon} alt="" />
         </div>
         <div className="dpl-pause-reservation-component__flex__text">
-          {t("reservationListPauseReservationText")}
+          {onHoldDates
+            ? t("reservationListPauseReservationOnHoldText")
+            : t("reservationListPauseReservationText")}
         </div>
         {onHoldDates && (
           <span
@@ -55,10 +57,10 @@ const ReservationPauseToggler: FC<ReservationPauseTogglerProps> = ({
             aria-label={t("reservationListPauseReservationAriaModalText")}
             type="button"
             onClick={openPauseReservationModal}
-            className={`dpl-toggle-button dpl-toggle-button--${
-              !onHoldDates ? "in" : ""
-            }active`}
-          />
+            className="btn-primary btn-filled btn-small"
+          >
+            {t("reservationListPauseReservationButtonText")}
+          </button>
         </div>
       </div>
     </div>

diff --git a/src/apps/reservation-list/modal/delete-reservation/pause-reservations.test.ts b/src/apps/reservation-list/modal/delete-reservation/pause-reservations.test.ts
@@ -143,9 +143,9 @@ describe("Pause reservation modal test", () => {
       .find(".dpl-pause-reservation-component__flex__badge")
       .should("exist");
 
-    cy.get(".reservation-list-page")
-      .find(".dpl-toggle-button--active")
-      .should("exist");
+    cy.get(".dpl-pause-reservation-component")
+      .find(".dpl-pause-reservation-component__flex__text")
+      .should("have.text", "Your reservations are paused");
   });
 });
 

diff --git a/src/core/storybook/reservationListArgs.ts b/src/core/storybook/reservationListArgs.ts
@@ -163,13 +163,21 @@ export default {
     defaultValue: "Pause your reservations",
     control: { type: "text" }
   },
+  reservationListPauseReservationOnHoldText: {
+    defaultValue: "Your reservations are paused",
+    control: { type: "text" }
+  },
   reservationListOnHoldAriaText: {
     defaultValue: "Reservations have been paused in the following time span: ",
     control: { type: "text" }
   },
   reservationListPauseReservationAriaModalText: {
     defaultValue:
-      "This button opens a modal that covers the entire page and contains the possibility to pause physical reservations",
+      "Opens a modal that covers the entire page where it is possible to pause physical reservations",
+    control: { type: "text" }
+  },
+  reservationListPauseReservationButtonText: {
+    defaultValue: "Settings",
     control: { type: "text" }
   },
   pauseReservationModalAriaDescriptionText: {