Add reason for failed loan renewal

src/apps/loan-list/list/loan-list.dev.tsx

@@ -10,6 +10,7 @@ import loanGroupModalArgs from "../../../core/storybook/loanGroupModalArgs";
 import materialDetailsModalArgs from "../../../core/storybook/materialDetailsModalArgs";
 import renewalArgs from "../../../core/storybook/renewalArgs";
 import { getModalIds } from "../../../core/utils/helpers/modal-helpers";
+import globalConfigArgs from "../../../core/storybook/globalConfigArgs";
 
 export default {
   title: "Apps / Loan list",
@@ -18,6 +19,7 @@ export default {
     ...serviceUrlArgs,
     ...groupModalArgs,
     ...globalTextArgs,
+    ...globalConfigArgs,
     ...loanGroupModalArgs,
     ...renewalArgs,
     ...materialDetailsModalArgs,

src/apps/loan-list/materials/selectable-material/StatusMessage.tsx

@@ -18,9 +18,12 @@ const StatusMessage: FC<StatusMessageProps> = ({
   return (
     <>
       {renewalStatusList &&
-        renewalStatusList.map((text) => (
-          <span className={className}>{getStatusText(text, t)}</span>
-        ))}
+        renewalStatusList.map((text) => {
+          if (text !== "deniedOtherReason") {
+            return <span className={className}>{getStatusText(text, t)}</span>;
+          }
+          return null;
+        })}
       {loanType === "interLibraryLoan" && (
         <span className={className}>
           {t("groupModalRenewLoanDeniedInterLibraryLoanText")}

src/apps/loan-list/materials/stackable-material/material-status.tsx

@@ -9,6 +9,7 @@ import {
   formatDate,
   formatDateTime
 } from "../../../../core/utils/helpers/date";
+import StatusMessage from "../selectable-material/StatusMessage";
 
 interface MaterialStatusProps {
   loan: LoanType;
@@ -77,6 +78,16 @@ const MaterialStatus: FC<MaterialStatusProps> = ({
                   placeholders: { "@date": formatDate(dueDate) }
                 })}
           </p>
+          {!isDigital(loan) && (
+            <p className="text-small-caption color-secondary-gray mt-4">
+              <StatusMessage
+                className="mr-4"
+                loanType={loan.loanType}
+                renewalStatusList={loan.renewalStatusList}
+              />
+            </p>
+          )}
+
           {children}
         </div>
       </div>

src/apps/loan-list/modal/material-details.tsx

@@ -55,7 +55,9 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
     isRenewable,
     materialItemNumber,
     loanDate,
-    periodical
+    loanType,
+    periodical,
+    renewalStatusList
   } = loan;
   const { authors, materialType, year, title, pid, description, series } =
     material || {};
@@ -111,8 +113,10 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               renewable={isRenewable}
               hideOnMobile
               renewingStatus={renewingStatus}
+              loanType={loanType || ""}
               setRenewingStatus={setRenewingStatus}
               setRenewingResponse={setRenewingResponse}
+              renewalStatusList={renewalStatusList}
             />
           )}
           {isDigital(loan) && (
@@ -175,9 +179,11 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               loanId={loanId}
               renewable={isRenewable}
               hideOnMobile={false}
+              loanType={loanType || ""}
               renewingStatus={renewingStatus}
               setRenewingStatus={setRenewingStatus}
               setRenewingResponse={setRenewingResponse}
+              renewalStatusList={renewalStatusList}
             />
           )}
           {isDigital(loan) && (

src/apps/loan-list/modal/renew-button.tsx

@@ -9,6 +9,7 @@ import { RenewedLoanV2 } from "../../../core/fbs/model";
 import { getRenewButtonLabel } from "../../../core/utils/helpers/renewal";
 import { useStatistics } from "../../../core/statistics/useStatistics";
 import { statistics } from "../../../core/statistics/statistics";
+import StatusMessage from "../materials/selectable-material/StatusMessage";
 
 interface RenewButtonProps {
   loanId: LoanId;
@@ -17,6 +18,8 @@ interface RenewButtonProps {
   hideOnMobile: boolean;
   setRenewingStatus: (status: RequestStatus) => void;
   renewingStatus: RequestStatus;
+  renewalStatusList: string[];
+  loanType: string;
   setRenewingResponse: (response: RenewedLoanV2[] | null) => void;
 }
 
@@ -27,6 +30,8 @@ const RenewButton: FC<RenewButtonProps> = ({
   hideOnMobile,
   setRenewingStatus,
   renewingStatus,
+  renewalStatusList,
+  loanType,
   setRenewingResponse
 }) => {
   const t = useText();
@@ -76,6 +81,11 @@ const RenewButton: FC<RenewButtonProps> = ({
         hideOnMobile && `modal-details__buttons--hide-on-mobile`
       } modal-details__buttons`}
     >
+      <StatusMessage
+        className="list-materials__status__note-desktop mt-48 mr-16"
+        loanType={loanType}
+        renewalStatusList={renewalStatusList}
+      />
       <Button
         dataCy="material-renew-button"
         size="small"
@@ -90,6 +100,11 @@ const RenewButton: FC<RenewButtonProps> = ({
         buttonType="none"
         collapsible={false}
       />
+      <StatusMessage
+        className="list-materials__status__note-mobile mt-8"
+        loanType={loanType}
+        renewalStatusList={renewalStatusList}
+      />
     </div>
   );
 };