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

…-50-0

Release/2023 50 0

.docker/wiremock/fbs/mappings/fbs-availability-31ef8b31-c7f7-4463-89e9-1b1f9875864b.json

@@ -0,0 +1,18 @@
+{
+  "id" : "31ef8b31-c7f7-4463-89e9-1b1f9875864b",
+  "name" : "FBS availability",
+  "request" : {
+    "urlPath" : "/external/agencyid/catalog/availability/v3",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[\n  {\n    \"available\": true,\n    \"recordId\": \"52557240\",\n    \"reservable\": true,\n    \"reservations\": 2\n  },\n  {\n    \"available\": true,\n    \"recordId\": \"52643414\",\n    \"reservable\": true,\n    \"reservations\": 2\n  }\n]",
+    "headers" : { }
+  },
+  "uuid" : "31ef8b31-c7f7-4463-89e9-1b1f9875864b",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 2,
+  "postServeActions" : [ ]
+}

.docker/wiremock/fbs/mappings/fbs-holdings-a530c110-c4a9-42f4-a06f-9390744b8b00.json

@@ -0,0 +1,18 @@
+{
+  "id" : "a530c110-c4a9-42f4-a06f-9390744b8b00",
+  "name" : "FBS holdings",
+  "request" : {
+    "urlPath" : "/external/agencyid/catalog/holdings/v3",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[\n  {\n    \"recordId\": \"52557240\",\n    \"reservable\": false,\n    \"reservations\": 0,\n    \"holdings\": []\n  },\n  {\n    \"recordId\": \"52643414\",\n    \"reservable\": false,\n    \"reservations\": 0,\n    \"holdings\": []\n  }\n]\n",
+    "headers" : { }
+  },
+  "uuid" : "a530c110-c4a9-42f4-a06f-9390744b8b00",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 16,
+  "postServeActions" : [ ]
+}

docs/request_mocking_wiremock.md

@@ -52,7 +52,9 @@ To set up a mocked response for a new request to FBS do the following:
 2. Click "FBS" to manage the Wiremock instance for FBS
 3. Click "Stubs" to see a list of existing requests/responses
 4. Click "New" to create a new request/response set and provide a name
-5. Provide the HTTP method, path and other parts of the request to match
+5. Provide the HTTP method, path and other parts of the request to match (note:
+make sure to check "advanced" option out, and match either path, or path AND the
+query.)
 6. Provide the response HTTP status code and body to return
 7. Click "Save"
 8. See that the stub has been persisted as a new file in

src/apps/dashboard/dashboard-fees/dashboard-fees.tsx

@@ -45,7 +45,8 @@ const DashboardFees: FC = () => {
                 placeholders: { "@total": totalFeeAmount }
               })}
               overdueText={t("totalOwedText")}
-              rightButtonText={t("payOwedText")}
+              rightButtonText={t("dashboardSeeMoreFeesText")}
+              rightButtonAriaLabelText={t("dashboardSeeMoreFeesAriaLabelText")}
               rightLink={feesPageUrl}
             />
           </div>

src/apps/dashboard/dashboard.dev.tsx

@@ -50,8 +50,12 @@ export default {
       defaultValue: "You owe in total",
       control: { type: "text" }
     },
-    payOwedText: {
-      defaultValue: "Pay",
+    dashboardSeeMoreFeesText: {
+      defaultValue: "See more",
+      control: { type: "text" }
+    },
+    dashboardSeeMoreFeesAriaLabelText: {
+      defaultValue: "See your fees and how to pay",
       control: { type: "text" }
     },
     totalAmountFeeText: {

src/apps/dashboard/dashboard.entry.tsx

@@ -43,7 +43,8 @@ export interface DashBoardProps {
   materialByAuthorText: string;
   noPhysicalLoansText: string;
   noReservationsText: string;
-  payOwedText: string;
+  dashboardSeeMoreFeesText: string;
+  dashboardSeeMoreFeesAriaLabelText: string;
   physicalLoansText: string;
   publizonAudioBookText: string;
   publizonEbookText: string;

src/apps/fee-list/FeeList.tsx

@@ -114,7 +114,10 @@ const FeeList: FC = () => {
         </span>
         {!itemsPrePaymentChange && !itemsPostPaymentChange && (
           <>
-            <ListHeader header={<>{t("unpaidFeesText")}</>} amount={0} />
+            <ListHeader
+              header={<>{t("unpaidFeesFirstHeadlineText")}</>}
+              amount={0}
+            />
             <EmptyList
               classNames="mt-24"
               emptyListText={t("emptyFeeListText")}

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

@@ -1,11 +1,13 @@
-import React, { FC } from "react";
+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";
 
 interface WarningBarProps {
   linkText?: string;
   overdueText?: string;
   rightButtonText?: string;
+  rightButtonAriaLabelText?: string;
   rightText?: string;
   leftLink?: URL;
   rightLink?: URL;
@@ -16,9 +18,12 @@ const WarningBar: FC<WarningBarProps> = ({
   overdueText,
   rightText,
   rightButtonText,
+  rightButtonAriaLabelText,
   leftLink,
   rightLink
 }) => {
+  const labelId = useId();
+
   return (
     <div className="warning-bar bg-global-secondary" data-cy="warning-bar">
       <div className="warning-bar__left">
@@ -48,14 +53,19 @@ const WarningBar: FC<WarningBarProps> = ({
           >
             {rightText}
           </p>
+          <span className="hide-visually" id={labelId}>
+            {rightButtonAriaLabelText}
+          </span>
           {rightLink && (
-            <Link
+            <LinkButton
               dataCy="warning-bar-right-link"
-              href={rightLink}
-              className="btn-primary btn-filled btn-small arrow__hover--right-small"
+              url={rightLink}
+              size="small"
+              variant="filled"
+              ariaLabelledBy={labelId}
             >
               {rightButtonText}
-            </Link>
+            </LinkButton>
           )}
         </div>
       )}

src/apps/material/material.dev.tsx

@@ -809,7 +809,7 @@ export default {
     },
     interestPeriodsConfig: {
       defaultValue:
-        '[\n   {\n      "value":"30",\n      "label":"1 month"\n   },\n   {\n      "value":"60",\n      "label":"2 months"\n   },\n   {\n      "value":"90",\n      "label":"3 months"\n   },\n   {\n      "value":"180",\n      "label":"6 months"\n   },\n   {\n      "value":"360",\n      "label":"1 year"\n   }\n]',
+        '{ "interestPeriods":[ { "value":14, "label":"14 days" }, { "value":30, "label":"1 month" }, { "value":60, "label":"2 months" }, { "value":90, "label":"3 months" }, { "value":180, "label":"6 months" }, { "value":365, "label":"1 year" } ], "defaultInterestPeriod":{ "value":"14", "label":"14 days" } }',
       control: { type: "text" }
     },
     openOrderResponseTitleText: {

src/apps/reservation-list/modal/reservation-details/reservation-details.test.ts

@@ -532,7 +532,7 @@ describe("Reservation details modal", () => {
 
     cy.getBySel("modal-reservation-form-select").should(
       "have.text",
-      "Choose one1 month2 months3 months6 months1 year"
+      "Choose one14 days1 month2 months3 months6 months1 year"
     );
 
     cy.getBySel("reservation-form-button", true).click();

src/components/reservation/UserListItems.tsx

@@ -22,7 +22,7 @@ import {
 } from "./helper";
 import PickupModal from "./forms/PickupModal";
 import NoInterestAfterModal from "./forms/NoInterestAfterModal";
-import { Option } from "../Dropdown/Dropdown";
+import { Periods } from "./types";
 
 export interface UserListItemsProps {
   patron: PatronV5;
@@ -51,7 +51,7 @@ const UserListItems: FC<UserListItemsProps> = ({
 }) => {
   const t = useText();
   const config = useConfig();
-  const interstPeriods = config<Option[]>("interestPeriodsConfig", {
+  const interestPeriods = config<Periods>("interestPeriodsConfig", {
     transformer: "jsonParse"
   });
 
@@ -61,8 +61,12 @@ const UserListItems: FC<UserListItemsProps> = ({
   };
 
   const interestPeriod = selectedInterest
-    ? getNoInterestAfter(selectedInterest, interstPeriods, t)
-    : getNoInterestAfter(defaultInterestPeriod, interstPeriods, t);
+    ? getNoInterestAfter(selectedInterest, interestPeriods, t)
+    : getNoInterestAfter(
+        Number(interestPeriods.defaultInterestPeriod.value),
+        interestPeriods,
+        t
+      );
 
   const pickupBranch = selectedBranch
     ? getPreferredBranch(selectedBranch, branches)

src/components/reservation/forms/NoInterestAfterModal.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { useText } from "../../../core/utils/text";
 import ModalReservationFormSelect from "./ModalReservationFormSelect";
 import { useConfig } from "../../../core/utils/config";
-import { Option } from "../../Dropdown/Dropdown";
 import { RequestStatus } from "../../../core/utils/types/request";
+import { Periods } from "../types";
 
 export interface PickupModalProps {
   selectedInterest: number;
@@ -22,7 +22,7 @@ const NoInterestAfterModal = ({
 }: PickupModalProps) => {
   const t = useText();
   const config = useConfig();
-  const interstPeriods = config<Option[]>("interestPeriodsConfig", {
+  const interstPeriods = config<Periods>("interestPeriodsConfig", {
     transformer: "jsonParse"
   });
 
@@ -35,7 +35,7 @@ const NoInterestAfterModal = ({
           t("modalReservationFormNoInterestAfterHeaderDescriptionText")
         ]
       }}
-      items={interstPeriods}
+      items={interstPeriods.interestPeriods}
       defaultSelectedItem={String(selectedInterest)}
       selectHandler={(value: string) => setSelectedInterest(Number(value))}
       ariaLabel={t("modalReservationFormNoInterestAfterLabelText")}

src/components/reservation/helper.ts

@@ -19,7 +19,7 @@ import { PeriodicalEdition } from "../material/periodical/helper";
 import { ModalReservationFormTextType } from "./forms/helper";
 import invalidSwitchCase from "../../core/utils/helpers/invalid-switch-case";
 import { SubmitOrderStatus } from "../../core/dbc-gateway/generated/graphql";
-import { Option } from "../Dropdown/Dropdown";
+import { Periods } from "./types";
 
 export const isConfigValueOne = (configValue: string | undefined | string[]) =>
   configValue === "1";
@@ -31,10 +31,10 @@ export const getPreferredBranch = (id: string, array: AgencyBranch[]) => {
 
 export const getNoInterestAfter = (
   days: number,
-  interestPeriod: Option[],
+  interestPeriod: Periods,
   t: UseTextFunction
 ) => {
-  const interestPeriodFound = interestPeriod.find(
+  const interestPeriodFound = interestPeriod.interestPeriods.find(
     ({ value }) => value === String(days)
   );
 

src/components/reservation/types.ts

@@ -0,0 +1,6 @@
+import { Option } from "../Dropdown/Dropdown";
+
+export type Periods = {
+  interestPeriods: Option[];
+  defaultInterestPeriod: Option;
+};

src/core/storybook/reservationMaterialDetailsArgs.ts

@@ -16,7 +16,7 @@ export default {
   },
   interestPeriodsConfig: {
     defaultValue:
-      '[\n   {\n      "value":"30",\n      "label":"1 month"\n   },\n   {\n      "value":"60",\n      "label":"2 months"\n   },\n   {\n      "value":"90",\n      "label":"3 months"\n   },\n   {\n      "value":"180",\n      "label":"6 months"\n   },\n   {\n      "value":"360",\n      "label":"1 year"\n   }\n]',
+      '{ "interestPeriods":[ { "value":14, "label":"14 days" }, { "value":30, "label":"1 month" }, { "value":60, "label":"2 months" }, { "value":90, "label":"3 months" }, { "value":180, "label":"6 months" }, { "value":365, "label":"1 year" } ], "defaultInterestPeriod":{ "value":"14", "label":"14 days" } }',
     control: { type: "text" }
   },
   reservationDetailsRemoveDigitalReservationText: {