@inveniosoftware/react-invenio-app-ils 2.0.2 → 2.2.0

package/dist/esm/index.js

@@ -697,7 +697,7 @@ const RECORDS_CONFIG = {
     }
   },
   ITEMS: {
-    identifiersToDisplayInFrontside: [],
+    identifiersToDisplay: [],
     circulationRestrictions: [{
       value: 'NO_RESTRICTION',
       text: 'No restriction (4 weeks)'
@@ -4245,6 +4245,26 @@ const vocabularyApi = {
   serializer: serializer$1
 };
 
+/**
+ * Resolves identifier scheme keys (e.g. "CALL_NUMBER") to their
+ * human-readable titles from the vocabulary API.
+ *
+ * @param {Array<string>} identifiers
+ * @param {string} identifierScheme
+ * @returns {Promise<Array<{key: string, text: string}>>}
+ */
+const fetchIdentifierTitles = async (identifiers, identifierScheme) => {
+  const query = vocabularyApi.query().withType(identifierScheme);
+  const response = await vocabularyApi.list(query.qs());
+  return identifiers.map(scheme => {
+    const vocabEntry = response.data.hits.find(entry => entry.metadata.key === scheme);
+    return {
+      key: scheme,
+      text: vocabEntry ? vocabEntry.metadata.text : scheme
+    };
+  });
+};
+
 class ScrollingMenuItem$1 extends Component {
   constructor(props) {
     super(props);
@@ -4317,6 +4337,14 @@ const prettyPrintBooleanValue = value => {
 const screenIsWiderThan = pixels => {
   return window.matchMedia(`(max-width: ${pixels}px)`).matches ? false : true;
 };
+const isPrivilegedUser = () => {
+  const roles = _get(sessionManager, 'user.roles', []);
+  return roles.includes('admin') || roles.includes('librarian');
+};
+const isDocumentOverbooked = async documentPid => {
+  const response = await documentApi.get(documentPid);
+  return _get(response, 'data.metadata.circulation.overbooked', false);
+};
 
 class MetadataTable extends Component {
   renderRows() {
@@ -6182,32 +6210,36 @@ class DocumentItemBody extends Component {
       items,
       shelfLink,
       documentDetails,
-      identifiersToDisplayInFrontside
-    } = this.props;
-    return items.map(item => /*#__PURE__*/React.createElement(Table.Row, {
-      key: item.pid
-    }, /*#__PURE__*/React.createElement(Table.Cell, {
-      "data-label": "Barcode",
-      className: "document-item-table-itemCell"
-    }, item.barcode), /*#__PURE__*/React.createElement(Table.Cell, {
-      "data-label": "Shelf",
-      className: "document-item-table-itemCell"
-    }, shelfLink !== null ? shelfLink(item, documentDetails) : _get(item, 'shelf')), identifiersToDisplayInFrontside.map(identifier => {
-      var _item$identifiers, _item$identifiers$fin;
-      return /*#__PURE__*/React.createElement(Table.Cell, {
-        key: identifier,
-        "data-label": identifier.text,
+      identifiersToDisplay
+    } = this.props;
+    return items.map(item => {
+      const itemIsAccessible = !_get(item, 'internal_location.restricted');
+      const shelfValue = shelfLink ? shelfLink(item, documentDetails) : _get(item, 'shelf');
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: item.pid
+      }, /*#__PURE__*/React.createElement(Table.Cell, {
+        "data-label": "Barcode",
+        className: "document-item-table-itemCell"
+      }, item.barcode), /*#__PURE__*/React.createElement(Table.Cell, {
+        "data-label": "Shelf",
         className: "document-item-table-itemCell"
-      }, (_item$identifiers = item.identifiers) === null || _item$identifiers === void 0 ? void 0 : (_item$identifiers$fin = _item$identifiers.find(entry => {
-        return entry.scheme === identifier.key;
-      })) === null || _item$identifiers$fin === void 0 ? void 0 : _item$identifiers$fin.value);
-    }), /*#__PURE__*/React.createElement(Table.Cell, {
-      "data-label": "Status"
-    }, this.statusLabel(item)), /*#__PURE__*/React.createElement(Table.Cell, {
-      "data-label": "Medium"
-    }, getDisplayVal('ITEMS.mediums', item.medium)), /*#__PURE__*/React.createElement(Table.Cell, {
-      "data-label": "Restrictions"
-    }, getDisplayVal('ITEMS.circulationRestrictions', item.circulation_restriction))));
+      }, itemIsAccessible ? shelfValue : /*#__PURE__*/React.createElement("p", null, "Available on Request")), identifiersToDisplay.map(identifier => {
+        var _item$identifiers, _item$identifiers$fin;
+        return /*#__PURE__*/React.createElement(Table.Cell, {
+          key: identifier,
+          "data-label": identifier.text,
+          className: "document-item-table-itemCell"
+        }, itemIsAccessible && ((_item$identifiers = item.identifiers) === null || _item$identifiers === void 0 ? void 0 : (_item$identifiers$fin = _item$identifiers.find(entry => {
+          return entry.scheme === identifier.key;
+        })) === null || _item$identifiers$fin === void 0 ? void 0 : _item$identifiers$fin.value));
+      }), /*#__PURE__*/React.createElement(Table.Cell, {
+        "data-label": "Status"
+      }, this.statusLabel(item)), /*#__PURE__*/React.createElement(Table.Cell, {
+        "data-label": "Medium"
+      }, getDisplayVal('ITEMS.mediums', item.medium)), /*#__PURE__*/React.createElement(Table.Cell, {
+        "data-label": "Restrictions"
+      }, getDisplayVal('ITEMS.circulationRestrictions', item.circulation_restriction)));
+    });
   }
 }
 DocumentItemBody.defaultProps = {
@@ -27008,7 +27040,11 @@ class AvailableItems$1 extends Component {
       query: '',
       filteredData: null,
       modalOpen: false,
-      checkoutItem: null
+      checkoutItem: null,
+      identifiersToDisplay: invenioConfig.ITEMS.identifiersToDisplay.map(s => ({
+        key: s,
+        text: s
+      }))
     };
   }
   componentDidMount() {
@@ -27017,6 +27053,25 @@ class AvailableItems$1 extends Component {
       loan
     } = this.props;
     fetchAvailableItems(loan.metadata.document_pid);
+    this.loadIdentifierTitles();
+  }
+  componentWillUnmount() {
+    if (this.cancellableFetchIdentifierTitles) {
+      this.cancellableFetchIdentifierTitles.cancel();
+    }
+  }
+  async loadIdentifierTitles() {
+    this.cancellableFetchIdentifierTitles = withCancel(fetchIdentifierTitles(invenioConfig.ITEMS.identifiersToDisplay, invenioConfig.VOCABULARIES.item.identifier.scheme));
+    try {
+      let result = await this.cancellableFetchIdentifierTitles.promise;
+      this.setState({
+        identifiersToDisplay: result
+      });
+    } catch (error) {
+      if (error !== 'UNMOUNTED') {
+        console.error('Error fetching identifier titles for items.', error);
+      }
+    }
   }
   assignItemButton(item) {
     const {
@@ -27087,18 +27142,31 @@ class AvailableItems$1 extends Component {
       data
     } = this.props;
     const {
-      filteredData
+      filteredData,
+      identifiersToDisplay
     } = this.state;
+    const identifierColumns = identifiersToDisplay.map(identifier => ({
+      title: identifier.text,
+      field: `metadata.identifiers`,
+      formatter: _ref2 => {
+        var _row$metadata$identif;
+        let {
+          row
+        } = _ref2;
+        const entry = (_row$metadata$identif = row.metadata.identifiers) === null || _row$metadata$identif === void 0 ? void 0 : _row$metadata$identif.find(id => id.scheme === identifier.key);
+        return entry === null || entry === void 0 ? void 0 : entry.value;
+      }
+    }));
     const columns = [{
       title: 'PID',
       field: 'metadata.pid'
     }, {
       title: 'Barcode',
       field: 'metadata.barcode',
-      formatter: _ref2 => {
+      formatter: _ref3 => {
         let {
           row
-        } = _ref2;
+        } = _ref3;
         return /*#__PURE__*/React.createElement(Link$1, {
           to: BackOfficeRoutes.itemDetailsFor(row.metadata.pid)
         }, row.metadata.barcode);
@@ -27115,7 +27183,7 @@ class AvailableItems$1 extends Component {
     }, {
       title: 'Shelf',
       field: 'metadata.shelf'
-    }, {
+    }, ...identifierColumns, {
       title: 'Actions',
       field: '',
       formatter: this.rowActionButton
@@ -28104,15 +28172,20 @@ const LoanDetails = connect(mapStateToProps$K, mapDispatchToProps$z)(LoanDetails
 class _SearchDateRange extends Component {
   constructor() {
     super(...arguments);
-    this.onDateChange = newFilter => {
+    this.onDateChange = (field, value) => {
       const {
         currentQueryState,
         updateQueryState
       } = this.props;
-      const filters = currentQueryState.filters;
-      filters.push(newFilter);
+      const updatedFilters = currentQueryState.filters.filter(_ref => {
+        let [name] = _ref;
+        return name !== field;
+      });
+      if (value !== '') {
+        updatedFilters.push([field, value]);
+      }
       return updateQueryState({
-        filters: filters
+        filters: updatedFilters
       });
     };
   }
@@ -28124,8 +28197,8 @@ class _SearchDateRange extends Component {
     } = this.props;
     let fromDate = '';
     let toDate = '';
-    filters.forEach(_ref => {
-      let [name, value] = _ref;
+    filters.forEach(_ref2 => {
+      let [name, value] = _ref2;
       if (name === 'loans_from_date') fromDate = value;
       if (name === 'loans_to_date') toDate = value;
     });
@@ -28137,12 +28210,12 @@ class _SearchDateRange extends Component {
       maxDate: toDate,
       defaultValue: fromDate,
       placeholder: "From",
-      handleDateChange: value => this.onDateChange(['loans_from_date', value])
+      handleDateChange: value => this.onDateChange('loans_from_date', value)
     })), /*#__PURE__*/React.createElement(Card.Content, null, /*#__PURE__*/React.createElement(DatePicker$1, {
       minDate: fromDate,
       defaultValue: toDate,
       placeholder: "To",
-      handleDateChange: value => this.onDateChange(['loans_to_date', value])
+      handleDateChange: value => this.onDateChange('loans_to_date', value)
     })));
   }
 }
@@ -28253,6 +28326,11 @@ const schema$3 = () => {
       physical_location: {
         type: 'string',
         title: 'Physical location'
+      },
+      restricted: {
+        type: 'boolean',
+        title: 'Restricted access (not accessible to patrons)',
+        default: false
       }
     }
   };
@@ -28273,6 +28351,8 @@ const uiSchema$3 = title => {
     }, {
       physical_location: 8,
       notes: 8
+    }, {
+      restricted: 8
     }],
     'custom:root': {
       'custom:formTitle': title
@@ -29342,6 +29422,16 @@ class InternalLocationList$1 extends Component {
     }, {
       title: 'Location e-mail',
       field: 'metadata.location.email'
+    }, {
+      title: 'Restricted access',
+      formatter: _ref2 => {
+        let {
+          row
+        } = _ref2;
+        return row.metadata.restricted ? /*#__PURE__*/React.createElement("i", {
+          className: "check icon"
+        }) : null;
+      }
     }, {
       title: 'Actions',
       field: '',
@@ -29505,19 +29595,108 @@ const mapDispatchToProps$v = dispatch => ({
 });
 const LocationList = connect(mapStateToProps$G, mapDispatchToProps$v)(LocationList$1);
 
+const OverbookedConfirmModal = _ref => {
+  let {
+    open,
+    onClose,
+    onConfirm,
+    overbookedDocuments
+  } = _ref;
+  const isMultiple = overbookedDocuments.length > 1;
+  return /*#__PURE__*/React.createElement(Modal, {
+    size: "small",
+    open: open,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, "Item in high demand!"), /*#__PURE__*/React.createElement(Modal.Content, null, overbookedDocuments.map((doc, index) => /*#__PURE__*/React.createElement("p", {
+    key: doc.loanRequestId || doc.title || index
+  }, "There is another patron waiting for \"", /*#__PURE__*/React.createElement("strong", null, doc.title), "\"", ' ', doc.loanRequestId && /*#__PURE__*/React.createElement(React.Fragment, null, "(", /*#__PURE__*/React.createElement("a", {
+    href: `/backoffice/loans/${doc.loanRequestId}`
+  }, "See loan request"), ")"), ".")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Do you still want to extend your ", isMultiple ? 'loans' : 'loan', "?"))), /*#__PURE__*/React.createElement(Modal.Actions, null, /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    onClick: onConfirm
+  }, "Extend")));
+};
+
 class PatronBulkExtendLoans$1 extends Component {
   constructor() {
     super(...arguments);
     this.state = {
-      open: false
+      open: false,
+      showOverbookedConfirm: false,
+      overbookedDocuments: [],
+      isChecking: false
+    };
+    this.open = async () => {
+      this.setState({
+        open: true
+      });
+      if (!isPrivilegedUser()) return;
+      this.setState({
+        isChecking: true
+      });
+      try {
+        const {
+          patronPid
+        } = this.props;
+        // Get all active loans for the patron
+        const query = loanApi.query().withPatronPid(patronPid).withState(invenioConfig.CIRCULATION.loanActiveStates).withSize(invenioConfig.APP.PATRON_PROFILE_MAX_RESULTS_SIZE).sortByNewest().qs();
+        const response = await loanApi.list(query);
+        const loans = response.data.hits;
+        const checks = loans.map(async loan => {
+          const documentPid = _get(loan, 'metadata.document.pid');
+          const isOverbooked = await isDocumentOverbooked(documentPid);
+          if (isOverbooked) {
+            return {
+              title: loan.metadata.document.title,
+              loanRequestId: loan.id
+            };
+          }
+          return null;
+        });
+        const results = await Promise.all(checks);
+        const overbookedDocuments = results.filter(Boolean);
+        this.setState({
+          overbookedDocuments,
+          isChecking: false
+        });
+      } catch (error) {
+        console.error('Failed to fetch overbooked documents', error);
+        this.setState({
+          isChecking: false
+        });
+      }
+    };
+    this.close = () => {
+      this.setState({
+        open: false,
+        showOverbookedConfirm: false,
+        overbookedDocuments: []
+      });
     };
-    this.open = () => this.setState({
-      open: true
-    });
-    this.close = () => this.setState({
-      open: false
-    });
     this.handleSubmitExtend = () => {
+      const {
+        bulkLoanExtension,
+        patronPid
+      } = this.props;
+      const {
+        overbookedDocuments
+      } = this.state;
+
+      // If the user is privileged and there are overbooked docs
+      if (isPrivilegedUser() && overbookedDocuments.length > 0) {
+        this.setState({
+          showOverbookedConfirm: true
+        });
+        return;
+      }
+      // Otherwise extend directly
+      bulkLoanExtension(patronPid);
+      this.close();
+    };
+    this.confirmBulkExtension = () => {
       const {
         bulkLoanExtension,
         patronPid
@@ -29528,16 +29707,26 @@ class PatronBulkExtendLoans$1 extends Component {
   }
   render() {
     const {
-      patronPid,
-      bulkLoanExtension,
       isLoading,
       disabled,
+      patronPid,
+      bulkLoanExtension,
       ...uiProps
     } = this.props;
     const {
-      open
+      open,
+      showOverbookedConfirm,
+      overbookedDocuments,
+      isChecking
     } = this.state;
-    return /*#__PURE__*/React.createElement(Modal, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverbookedConfirmModal, {
+      open: showOverbookedConfirm,
+      onClose: () => this.setState({
+        showOverbookedConfirm: false
+      }),
+      onConfirm: this.confirmBulkExtension,
+      overbookedDocuments: overbookedDocuments
+    }), /*#__PURE__*/React.createElement(Modal, {
       open: open,
       onClose: this.close,
       onOpen: this.open,
@@ -29557,8 +29746,9 @@ class PatronBulkExtendLoans$1 extends Component {
       onClick: this.close
     }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
       onClick: this.handleSubmitExtend,
-      primary: true
-    }, "Extend the loans")));
+      primary: true,
+      loading: isChecking
+    }, "Extend the loans"))));
   }
 }
 PatronBulkExtendLoans$1.defaultProps = {
@@ -35278,21 +35468,6 @@ class DocumentStats extends Component {
 class DocumentItem extends Component {
   constructor(props) {
     super(props);
-    this.fetchIdentifiersToDisplayInFrontsideTitles = () => {
-      const query = vocabularyApi.query().withType(invenioConfig.VOCABULARIES.item.identifier.scheme);
-      vocabularyApi.list(query.qs()).then(response => {
-        const identifiersToDisplayInFrontside = this.state.identifiersToDisplayInFrontside.map(identifier => {
-          const vocabEntry = response.data.hits.find(entry => entry.metadata.key === identifier.key);
-          return {
-            ...identifier,
-            text: vocabEntry ? vocabEntry.metadata.text : identifier.text
-          };
-        });
-        this.setState({
-          identifiersToDisplayInFrontside
-        });
-      });
-    };
     this.toggleItems = () => {
       const {
         isShowingAll
@@ -35301,18 +35476,10 @@ class DocumentItem extends Component {
         isShowingAll: !isShowingAll
       });
     };
-    const _identifiersToDisplayInFrontside = invenioConfig.ITEMS.identifiersToDisplayInFrontside.map(identifier => ({
-      key: identifier,
-      text: identifier
-    }));
     this.state = {
       isShowingAll: false,
-      itemAmountLimit: 5,
-      identifiersToDisplayInFrontside: _identifiersToDisplayInFrontside
+      itemAmountLimit: 5
     };
-    if (_identifiersToDisplayInFrontside.length > 0) {
-      this.fetchIdentifiersToDisplayInFrontsideTitles();
-    }
   }
   get moreItemsToLoad() {
     const {
@@ -35328,12 +35495,12 @@ class DocumentItem extends Component {
       internalLocationName,
       items,
       documentDetails,
-      showTitle
+      showTitle,
+      identifiersToDisplay
     } = this.props;
     const {
       isShowingAll,
-      itemAmountLimit,
-      identifiersToDisplayInFrontside
+      itemAmountLimit
     } = this.state;
     const previewArrayOfItems = items.slice(0, itemAmountLimit);
     const completeArrayOfItems = items;
@@ -35351,14 +35518,14 @@ class DocumentItem extends Component {
       id: "DocumentDetails.DocumentItem.TableHeader"
     }, /*#__PURE__*/React.createElement(Table.Row, {
       "data-test": "header"
-    }, /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Barcode"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Shelf"), identifiersToDisplayInFrontside.map(identifier => /*#__PURE__*/React.createElement(Table.HeaderCell, {
+    }, /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Barcode"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Shelf"), identifiersToDisplay.map(identifier => /*#__PURE__*/React.createElement(Table.HeaderCell, {
       key: identifier.key
     }, identifier.text)), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Status"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Medium"), /*#__PURE__*/React.createElement(Table.HeaderCell, null, "Loan restriction")))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Overridable, {
       id: "DocumentDetails.DocumentItemTableBody"
     }, /*#__PURE__*/React.createElement(DocumentItemBody, {
       items: itemsToShow,
       documentDetails: documentDetails,
-      identifiersToDisplayInFrontside: identifiersToDisplayInFrontside
+      identifiersToDisplay: identifiersToDisplay
     }))), this.moreItemsToLoad && /*#__PURE__*/React.createElement(Table.Footer, {
       fullWidth: true,
       "data-test": "footer",
@@ -35450,7 +35617,8 @@ class DocumentTabs extends Component {
     };
     this.createInternalLocationTables = locationsObject => {
       const {
-        activeInternalLocation
+        activeInternalLocation,
+        identifiersToDisplay
       } = this.state;
       const sortedInternalLocationEntries = this.sortedLocationEntries(Object.entries(locationsObject));
       if (activeInternalLocation) {
@@ -35464,7 +35632,8 @@ class DocumentTabs extends Component {
           internalLocationName: internalLocationName,
           items: items,
           documentDetails: this.documentDetails,
-          showTitle: activeInternalLocation !== internalLocationName
+          showTitle: activeInternalLocation !== internalLocationName,
+          identifiersToDisplay: identifiersToDisplay
         });
       }
       return sortedInternalLocationEntries.map(_ref6 => {
@@ -35475,7 +35644,8 @@ class DocumentTabs extends Component {
           internalLocationName: internalLocationName,
           items: items,
           documentDetails: this.documentDetails,
-          showTitle: activeInternalLocation !== internalLocationName
+          showTitle: activeInternalLocation !== internalLocationName,
+          identifiersToDisplay: identifiersToDisplay
         });
       });
     };
@@ -35499,9 +35669,34 @@ class DocumentTabs extends Component {
     const [firstLocationName] = this.locationEntries[0];
     const [_firstInternalLocationName] = this.firstInternalLocationEntry(firstLocationName);
     this.state = {
-      activeInternalLocation: _firstInternalLocationName
+      activeInternalLocation: _firstInternalLocationName,
+      identifiersToDisplay: invenioConfig.ITEMS.identifiersToDisplay.map(s => ({
+        key: s,
+        text: s
+      }))
     };
   }
+  componentDidMount() {
+    this.loadIdentifierTitles();
+  }
+  componentWillUnmount() {
+    if (this.cancellableFetchIdentifierTitles) {
+      this.cancellableFetchIdentifierTitles.cancel();
+    }
+  }
+  async loadIdentifierTitles() {
+    this.cancellableFetchIdentifierTitles = withCancel(fetchIdentifierTitles(invenioConfig.ITEMS.identifiersToDisplay, invenioConfig.VOCABULARIES.item.identifier.scheme));
+    try {
+      let result = await this.cancellableFetchIdentifierTitles.promise;
+      this.setState({
+        identifiersToDisplay: result
+      });
+    } catch (error) {
+      if (error !== 'UNMOUNTED') {
+        console.error('Error fetching identifier titles for items.', error);
+      }
+    }
+  }
   get locations() {
     const {
       locationsObject
@@ -38906,6 +39101,36 @@ class LoanExtendButton extends Component {
   constructor(props) {
     super(props);
     this.triggerExtension = async () => {
+      const {
+        loan,
+        onError
+      } = this.props;
+      const isUserPrivileged = isPrivilegedUser();
+      if (isUserPrivileged) {
+        this.setState({
+          isLoading: true
+        });
+        try {
+          const documentPid = _get(loan, 'metadata.document.pid');
+          const isOverbooked = await isDocumentOverbooked(documentPid);
+          if (isOverbooked) {
+            this.setState({
+              isLoading: false,
+              showOverbookedConfirm: true
+            });
+            return;
+          }
+        } catch (error) {
+          onError('Something went wrong while checking if the literature is overbooked.', error);
+          this.setState({
+            isLoading: false
+          });
+          return;
+        }
+      }
+      await this.performExtension();
+    };
+    this.performExtension = async () => {
       const {
         loan,
         onSuccess,
@@ -38923,7 +39148,8 @@ class LoanExtendButton extends Component {
         this.cancellableExtendLoan = withCancel(this.extendLoan(extendUrl, document.pid, patronPid));
         const response = await this.cancellableExtendLoan.promise;
         this.setState({
-          isLoading: false
+          isLoading: false,
+          showOverbookedConfirm: false
         });
         const documentTitle = document.title;
         onSuccess(INFO_MESSAGES.SUCCESS(documentTitle, DateTime.fromISO(response.data.metadata.end_date)));
@@ -38934,6 +39160,11 @@ class LoanExtendButton extends Component {
         onError(error.response.data.message);
       }
     };
+    this.hideOverbookedConfirm = () => {
+      this.setState({
+        showOverbookedConfirm: false
+      });
+    };
     this.validate = loan => {
       const hasExtendAction = _has(loan, 'availableActions.extend');
       if (!hasExtendAction) return {
@@ -38961,7 +39192,8 @@ class LoanExtendButton extends Component {
       };
     };
     this.state = {
-      isLoading: false
+      isLoading: false,
+      showOverbookedConfirm: false
     };
   }
   componentWillUnmount() {
@@ -38980,11 +39212,21 @@ class LoanExtendButton extends Component {
       loan
     } = this.props;
     const {
-      isLoading
+      isLoading,
+      showOverbookedConfirm
     } = this.state;
     const validation = this.validate(loan);
     const isDisabled = !validation.isValid;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isDisabled && /*#__PURE__*/React.createElement(Popup, {
+    const overbookedDocuments = [{
+      title: _get(loan, 'metadata.document.title', 'Unknown title'),
+      loanRequestId: loan.id
+    }];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showOverbookedConfirm && /*#__PURE__*/React.createElement(OverbookedConfirmModal, {
+      open: showOverbookedConfirm,
+      onClose: this.hideOverbookedConfirm,
+      onConfirm: this.performExtension,
+      overbookedDocuments: overbookedDocuments
+    }), isDisabled && /*#__PURE__*/React.createElement(Popup, {
       content: validation.msg,
       trigger: /*#__PURE__*/React.createElement(Icon, {
         name: "info"