@internetarchive/ia-book-actions 1.4.3 → 1.4.4-alpha2

package/src/ia-book-actions.js

@@ -20,6 +20,7 @@ import { LoanTokenPoller } from './core/services/loan-token-poller.js';
 import { LoanRenewHelper } from './core/services/loan-renew-helper.js';
 import log from './core/services/log.js';
 import { URLHelper } from './core/config/url-helper.js';
+import { infoIcon } from './assets/data/info.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -93,10 +94,19 @@ export default class IABookActions extends LitElement {
     this.browseTimer = undefined; // timeout
     this.timeWhenTimerStart = undefined;
 
+    this.loanRenewInProgress = false;
+
+    this.warningModalOpen = false;
+
     /**
-     * when user click on [return the book] button on warning modal
+     * Once the patron has seen & dismissed the informational warning modal,
+     * don't nag them again with the same modal every timer tick — only a
+     * real renewal (via interacting with the book) clears this, giving the
+     * next pre-expiry window its own single warning.
+     * @see loanRenewAttempt
+     * @see handleLoanAutoRenewed
      */
-    this.returnNow = false;
+    this.warningModalDismissed = false;
 
     /**
      * contains one hour auto-loan-renew time configuration
@@ -141,7 +151,6 @@ export default class IABookActions extends LitElement {
    * @param {string} msg
    */
   sentryCaptureMsg(msg) {
-    log(window?.Sentry);
     window?.Sentry?.captureMessage(msg);
   }
 
@@ -171,6 +180,13 @@ export default class IABookActions extends LitElement {
     }
 
     if (changed.has('loanRenewResult') && this.loanRenewResult.renewNow) {
+      // Any renewal — not just the auto-return recovery path — pauses the
+      // countdown for the renew_loan round-trip. Flag it here, centrally,
+      // so every path (interaction during active reading, periodic
+      // checker, auto-return recovery) gets the same "renewing" signal
+      // instead of just looking frozen until handleLoanAutoRenewed() clears
+      // this and restarts the timer.
+      this.loanRenewInProgress = true;
       window.IALendingIntervals.clearAll();
     }
   }
@@ -208,32 +224,16 @@ export default class IABookActions extends LitElement {
   /** End SharedObserver resize handler */
 
   async setupLendingToolbarActions() {
-    this.lendingOptions = new GetLendingActions(
-      this.userid,
-      this.identifier,
-      this.lendingStatus,
-      this.bwbPurchaseUrl
-    );
-    const actions = this.lendingOptions.getCurrentLendingActions();
-
-    if (!actions) return;
-
-    this.primaryTitle = actions.primaryTitle;
-    this.primaryActions = actions.primaryActions?.filter(action => {
-      return action != null;
-    });
-    this.primaryColor = actions.primaryColor;
-    this.secondaryActions = actions.secondaryActions?.filter(action => {
-      return action != null;
-    });
-
-    this.borrowType = actions.borrowType ? actions.borrowType : null;
-
     const hasExpired =
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      log('setupLendingToolbarActions > hasExpired --- ');
+      // Intentionally do NOT recompute primaryActions/primaryColor/borrowType
+      // here — per the ticket, auto-return must not visibly change anything.
+      // The action bar stays exactly as it looked while reading; only a
+      // successful silent renewal or the "unavailable" error modal are
+      // allowed to change what's shown next.
+      log('[IABookActions] browsing expired — leaving action bar untouched');
 
       if (!this.tokenPoller) {
         this.sentryCaptureMsg(sentryLogs.bookWasExpired);
@@ -253,6 +253,27 @@ export default class IABookActions extends LitElement {
       return;
     }
 
+    this.lendingOptions = new GetLendingActions(
+      this.userid,
+      this.identifier,
+      this.lendingStatus,
+      this.bwbPurchaseUrl
+    );
+    const actions = this.lendingOptions.getCurrentLendingActions();
+
+    if (!actions) return;
+
+    this.primaryTitle = actions.primaryTitle;
+    this.primaryActions = actions.primaryActions?.filter(action => {
+      return action != null;
+    });
+    this.primaryColor = actions.primaryColor;
+    this.secondaryActions = actions.secondaryActions?.filter(action => {
+      return action != null;
+    });
+
+    this.borrowType = actions.borrowType ? actions.borrowType : null;
+
     if (this.borrowType === 'browsed') {
       // start timer for loan-renew
       await this.startTimerCountdown();
@@ -290,8 +311,27 @@ export default class IABookActions extends LitElement {
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      log('IABookActions:BookReader:userAction');
-      if (this.borrowType === 'browsed') {
+      // Capture before autoRenewExpiredLoan() runs — it synchronously flips
+      // lendingStatus.browsingExpired to false as an optimistic UI update,
+      // so checking the live property afterward would always see it as
+      // false and wrongly let autoLoanRenewChecker() run too. That second
+      // call would then overwrite loanRenewResult.renewNow (set true by
+      // autoRenewExpiredLoan) back to false, since the loanTime cache entry
+      // was already deleted by browseHasExpired() — silently killing the
+      // in-flight renewal and leaving the countdown stuck.
+      const wasExpired = this.lendingStatus.browsingExpired;
+
+      log('[IABookActions] BookReader:userAction received', {
+        borrowType: this.borrowType,
+        browsingExpired: wasExpired,
+      });
+
+      // If the loan expired while the tab stayed visible, auto-renew on page turn
+      if (wasExpired) {
+        this.autoRenewExpiredLoan();
+      }
+
+      if (this.borrowType === 'browsed' && !wasExpired) {
         this.autoLoanRenewChecker(true);
       }
     });
@@ -302,18 +342,23 @@ export default class IABookActions extends LitElement {
      * the [visibilitychange] event can trigger timer to show relavent messages
      */
     document.addEventListener('visibilitychange', async () => {
-      if (!document.hidden) {
-        log(
-          'visibilitychange event execute:------------------ ',
-          new Date().getMinutes(),
-          new Date().getSeconds(),
-          this.borrowType
-        );
-
-        if (
-          this.borrowType === 'browsed' &&
-          this.lendingStatus.browsingExpired === false
-        ) {
+      if (document.hidden) {
+        log('[IABookActions] visibilitychange: tab backgrounded');
+        return;
+      }
+
+      log('[IABookActions] visibilitychange: tab foregrounded', this.borrowType);
+
+      try {
+        // Loan already expired while tab was hidden — try to silently renew
+        if (this.lendingStatus.browsingExpired === true) {
+          this.autoRenewExpiredLoan();
+          return;
+        }
+
+        if (this.borrowType !== 'browsed') return;
+
+        if (this.lendingStatus.browsingExpired === false) {
           const loanTime = await this.localCache.get(
             `${this.identifier}-loanTime`
           );
@@ -324,10 +369,15 @@ export default class IABookActions extends LitElement {
           if (secondsLeft >= this.timerExecutionSeconds) {
             this.loanStatusCheckInterval(Number(secondsLeft));
           } else {
-            this.browseHasExpired();
+            // Loan expired while user was away — try to silently renew
+            this.autoRenewExpiredLoan();
             this.disconnectedCallback();
           }
         }
+      } catch (error) {
+        // Surface localCache failures instead of an unhandled rejection.
+        log('[IABookActions] visibilitychange handler failed', error);
+        this.sentryCaptureMsg(`visibilitychange handler failed: ${error}`);
       }
     });
   }
@@ -350,6 +400,36 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
+  /**
+   * Attempt to automatically renew a browse loan that has expired.
+   * Called on visibilitychange (user returns to tab) or on page turn when
+   * the loan has expired but the book may still be available.
+   *
+   * Reuses the same renew_loan path as the automatic loan-renew checker.
+   * On success: handleLoanAutoRenewed() resets the timer seamlessly.
+   * On error: handleLendingActionError() shows showLoanUnavailableModal().
+   */
+  autoRenewExpiredLoan() {
+    if (this.loanRenewInProgress) return;
+    this.loanRenewInProgress = true;
+
+    this.modal?.closeModal();
+
+    // Optimistically flip browsingExpired back to false so the action bar
+    // stays red (patronIsReadingAction) while the renew_loan request is in
+    // flight, instead of showing the blue "Borrow" state.
+    this.lendingStatus = {
+      ...this.lendingStatus,
+      browsingExpired: false,
+      secondsLeftOnLoan: this.loanRenewTimeConfig.loanTotalTime,
+    };
+
+    // Defer renewNow until after lendingStatus timer setup completes.
+    setTimeout(() => {
+      this.loanRenewResult = { texts: '', renewNow: true, renewType: 'auto' };
+    }, 0);
+  }
+
   /**
    * Required as sibling on page
    * @returns HTMLElement
@@ -362,158 +442,86 @@ export default class IABookActions extends LitElement {
   }
 
   /**
-   * Show the waring modal to ask user if they are still reading
+   * Show the informational modal warning the patron their loan will expire
+   * soon. This is acknowledgement-only — closing it does not renew the loan.
+   * Only interacting with the book itself (e.g. turning a page) renews it.
    */
   async showWarningModal() {
-    log('****** showWarningModal ******');
-    // clear modal
-    this.modal.customModalContent = nothing;
-    this.modal?.closeModal();
-    this.loanRenewResult = { texts: '', renewNow: false };
-
-    // if secondsLeft < 60, consider it 1 minute
-    let { secondsLeft } = this.loanRenewResult;
-    if (secondsLeft === undefined) {
+    if (this.warningModalOpen) return;
+    this.warningModalOpen = true;
+
+    log('[IABookActions] showWarningModal');
+
+    // Capture texts and secondsLeft before resetting loanRenewResult
+    const {
+      texts: warningTexts,
+      secondsLeft: rawSecondsLeft,
+    } = this.loanRenewResult;
+    let secondsLeft = rawSecondsLeft;
+    if (secondsLeft === undefined || secondsLeft <= 0) {
       secondsLeft = this.lendingStatus.secondsLeftOnLoan;
     } else {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
+    // clear modal and reset renew state
+    this.modal.customModalContent = nothing;
+    this.modal?.closeModal();
+    this.loanRenewResult = { texts: '', renewNow: false };
+
     const config = new ModalConfig({
-      headline: 'Are you still reading?',
+      headline: 'Are you still there?',
       headerColor: '#194880',
       showCloseButton: false,
       closeOnBackdropClick: false,
-      message: this.loanRenewHelper?.getMessageTexts(
-        this.loanRenewResult.texts,
-        secondsLeft
-      ),
-    });
-
-    const customModalContent = html`<br />
-      <div
-        id="book-action-bar-custom-buttons"
-        style="display:flex;justify-content:center;"
+      message: html`<span
+        style="display:inline-flex;align-items:center;flex-wrap:nowrap;gap:4px;"
       >
-        <button
-          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${() => this.patronWantsToRenewBook()}
-        >
-          Keep reading
-        </button>
-        <button
-          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-          @click=${() => this.patronWantsToReturnBook()}
+        <span>${this.loanRenewHelper?.getMessageTexts(
+          warningTexts,
+          secondsLeft
+        )}</span>
+        <a
+          href="https://help.archive.org/help/borrowing-from-the-lending-library"
+          target="_blank"
+          title="Get more info on borrowing from The Lending Library"
+          data-event-click-tracking="BookReader|BrowsableMoreInfo"
+          style="display:inline-flex;flex-shrink:0;line-height:0;"
         >
-          Return the book
-        </button>
-      </div> `;
-
-    this.modal.setAttribute('aria-live', 'assertive');
-    await this.modal?.showModal({ config, customModalContent });
-  }
-
-  /** @param { 'renewBook' | 'returnBook' } buttonToDisable */
-  async showWarningDisabledModal(buttonToDisable = 'renewBook') {
-    // if secondsLeft < 60, consider it 1 minute
-    let { secondsLeft } = this.loanRenewResult;
-    if (secondsLeft === undefined) {
-      secondsLeft = this.lendingStatus.secondsLeftOnLoan;
-    } else {
-      secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
-    }
-
-    const config = new ModalConfig({
-      headline: 'Are you still reading?',
-      headerColor: '#194880',
-      showCloseButton: false,
-      closeOnBackdropClick: false,
-      message: this.loanRenewHelper?.getMessageTexts(
-        this.loanRenewResult.texts,
-        secondsLeft
-      ),
+          ${infoIcon}
+        </a>
+      </span>`,
     });
 
-    const customModalContent = html`<br />
+    const customModalContent = html`
       <div
-        id="disabled-book-action-bar-custom-buttons"
-        style="display:flex;justify-content:center; opacity:0.8; pointer-events:none;"
+        id="book-action-bar-custom-buttons"
+        style="display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;margin-top:10px;"
       >
         <button
-          disabled
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${() => this.dismissWarningModal()}
         >
-          ${buttonToDisable === 'renewBook'
-            ? html`<ia-activity-indicator
-                mode="processing"
-                style=${modalButtonStyle.loaderIcon}
-              ></ia-activity-indicator>`
-            : 'Keep reading'}
-        </button>
-        <span
-          style="position: absolute; visibility: none; height: 1px; width: 1px; overflow: hidden;"
-          >Renewing loan, one moment please.</span
-        >
-        <button
-          disabled
-          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-        >
-          ${buttonToDisable === 'returnBook'
-            ? html`<ia-activity-indicator
-                mode="processing"
-                style=${modalButtonStyle.loaderIcon}
-              ></ia-activity-indicator>`
-            : 'Return the book'}
+          Okay
         </button>
       </div> `;
 
+    this.modal.setAttribute('aria-live', 'assertive');
     await this.modal?.showModal({ config, customModalContent });
   }
 
-  /** Handles Renew action in warning modal */
-  async patronWantsToRenewBook() {
-    this.showWarningDisabledModal();
-    this.loanRenewResult = { texts: '', renewNow: true, renewType: 'manual' };
-  }
-
-  async patronWantsToReturnBook() {
-    this.showWarningDisabledModal('returnBook');
-    document.querySelector('ia-book-actions').disableActionGroup = true;
-    this.returnNow = true;
-  }
-
-  /**
-   * Show modal when book is auto returned
-   */
-  async showExpiredModal() {
-    const config = new ModalConfig({
-      headline: '',
-      showCloseButton: false,
-      closeOnBackdropClick: false,
-      headerColor: '#194880',
-      message: 'This book has been returned due to inactivity.',
-    });
-
-    const customModalContent = html`<br />
-      <div style="text-align: center">
-        <button
-          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${() => {
-            URLHelper.goToUrl(this.returnUrl, true);
-          }}
-        >
-          Okay
-        </button>
-      </div> `;
-
-    await this.modal?.showModal({ config, customModalContent });
+  /** Acknowledges the warning modal — closes it without renewing the loan */
+  dismissWarningModal() {
+    this.modal?.closeModal();
+    this.warningModalOpen = false;
+    this.warningModalDismissed = true;
   }
 
   /**
    * Execute when loan is expired
    */
   async browseHasExpired() {
-    log('BrowseHasExpired ---');
+    log('[IABookActions] browseHasExpired');
     window?.IALendingIntervals?.clearAll();
 
     const currStatus = {
@@ -532,31 +540,52 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult.texts =
       'This book has been returned due to inactivity.';
 
-    await this.showExpiredModal();
+    this.modal?.closeModal();
 
     this.sentryCaptureMsg(sentryLogs.browseHasExpired);
   }
 
+  /**
+   * Show modal when the book can no longer be automatically renewed
+   * because another patron has checked it out.
+   */
+  async showLoanUnavailableModal() {
+    const config = new ModalConfig({
+      headline: '',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      headerColor: '#d9534f',
+      message:
+        'Due to inactivity, this book was returned, and someone else has now borrowed it. Please try again later.',
+    });
+
+    const customModalContent = html`<br />
+      <div style="text-align: center">
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
+          @click=${() => URLHelper.goToUrl(this.returnUrl, true)}
+        >
+          Okay
+        </button>
+      </div>`;
+
+    await this.modal?.showModal({ config, customModalContent });
+  }
+
   async startBrowseTimer() {
     window?.IALendingIntervals?.clearBrowseExpireTimeout();
 
-    const { browsingExpired, user_has_browsed, secondsLeftOnLoan } =
-      this.lendingStatus;
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
 
     if (!user_has_browsed || browsingExpired) {
-      log('startBrowseTimer --- !user_has_browsed || browsingExpired', {
-        user_has_browsed,
-        browsingExpired,
-        secondsLeftOnLoan,
-      });
       return;
     }
 
     window.IALendingIntervals.browseExpireTimeout = setTimeout(() => {
-      log(
-        'startBrowseTimer > browseExpireTimeout --- will expire loan',
-        secondsLeftOnLoan
-      );
       this.browseHasExpired();
     }, secondsLeftOnLoan * 1000);
   }
@@ -602,7 +631,6 @@ export default class IABookActions extends LitElement {
         ?disabled=${this.disableActionGroup}
         ?autoRenew=${this.loanRenewResult.renewNow}
         ?autoReturn=${this.lendingStatus.browsingExpired}
-        ?returnNow=${this.returnNow}
         @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
@@ -637,13 +665,17 @@ export default class IABookActions extends LitElement {
       const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
 
       // number of seconds left in current loan
-      const secondsLeft = Math.round((loanTime - new Date()) / 1000);
-      log(loanTime, secondsLeft);
-
-      log('IABookActions: handleLoanAutoRenewed --- ', {
+      const rawSecondsLeft = Math.round((loanTime - new Date()) / 1000);
+      // Guard against a stale/missing loanTime read producing NaN, which
+      // would get the loan stuck "active" with a countdown that never moves.
+      const secondsLeft =
+        Number.isFinite(rawSecondsLeft) && rawSecondsLeft > 0
+          ? rawSecondsLeft
+          : this.loanRenewTimeConfig.loanTotalTime;
+      log('[IABookActions] handleLoanAutoRenewed', {
+        secondsLeft,
+        rawSecondsLeft,
         ajaxResponse: detail?.data,
-        loanRenewResult: this.loanRenewResult,
-        secondsLeftOnLoan: secondsLeft,
       });
 
       const currStatus = {
@@ -659,7 +691,11 @@ export default class IABookActions extends LitElement {
       this.modal.removeAttribute('id');
       this.modal.customModalContent = nothing;
       this.sentryCaptureMsg(sentryLogs.bookHasRenewed);
+      this.warningModalDismissed = false;
     }
+
+    this.warningModalOpen = false;
+    this.loanRenewInProgress = false;
   }
 
   /**
@@ -695,29 +731,20 @@ export default class IABookActions extends LitElement {
     // re-sync timer if gone off because of background window
     // side effect: updates this.lendingStatus & kicks off lifecycle,
     // if really updated, escape from here
-    const resyncd = await this.reSyncTimerIfGoneOff(secondsLeft);
+    const resyncd = this.reSyncTimerIfGoneOff(secondsLeft);
 
     if (resyncd.hasSynced) {
       secondsLeft = resyncd.whatShouldLeft;
-      log('startTimerCountdown --- stale, timer has resyncd', {
+      log('[IABookActions] timer: timer re-synced', {
         secondsLeft,
       });
     }
 
-    log(
-      'startTimerCountdown --- countdown still valid. continue...',
-      {
-        resyncd,
-        secondsLeft,
-        loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
-      },
-      'time: ',
-      new Date().getMinutes(),
-      ':',
-      new Date().getSeconds(),
-      ', timerDelay: ',
-      this.timerExecutionSeconds
-    );
+    log('[IABookActions] timer', {
+      secondsLeft,
+      loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+      pageChangedInLast: this.loanRenewTimeConfig.pageChangedInLast,
+    });
 
     /**
      * execute from last 10th minutes to 0th minute
@@ -742,7 +769,7 @@ export default class IABookActions extends LitElement {
    * @param {number} timerSecondsLeft - actual seconds left get from setInterval
    * @returns {Object} { hasSynced: [boolean], whatShouldLeft: [number] }
    */
-  async reSyncTimerIfGoneOff(timerSecondsLeft) {
+  reSyncTimerIfGoneOff(timerSecondsLeft) {
     const currentTime = new Date();
 
     // current time - loan time
@@ -752,27 +779,11 @@ export default class IABookActions extends LitElement {
     const secondsShouldLeft =
       this.lendingStatus.secondsLeftOnLoan - diffInSeconds;
 
-    log('currentTime: ', currentTime);
-    log('timeWhenTimerStart: ', this.timeWhenTimerStart);
-    log('diffInSeconds: ', diffInSeconds);
-    log('secondsShouldLeft: ', secondsShouldLeft);
-    log(
-      'this.lendingStatus.secondsLeftOnLoan: ',
-      this.lendingStatus.secondsLeftOnLoan
-    );
-
     // convert in minutes
     const whatIsleft = Math.round(timerSecondsLeft);
     const whatShouldLeft = Math.round(secondsShouldLeft);
     const timerElSeconds = this.timerCountdownEl.secondsLeftOnLoan || 0;
 
-    log(`reSyncTimerIfGoneOff?`, {
-      whatIsleft,
-      whatShouldLeft,
-      timerElSeconds,
-      timeLeftInMin: Math.ceil(timerSecondsLeft / 60),
-    });
-
     if (timerElSeconds !== whatShouldLeft || whatIsleft !== whatShouldLeft) {
       // set lending status with new time to update decrementor
       const currStatus = {
@@ -783,7 +794,9 @@ export default class IABookActions extends LitElement {
     }
 
     if (whatIsleft !== whatShouldLeft) {
-      log(`reSyncTimerIfGoneOff --- let's re-sync.`);
+      log(
+        `[IABookActions] reSyncTimerIfGoneOff ${whatIsleft} - ${whatShouldLeft}: re-syncing timer`
+      );
       return { hasSynced: true, whatShouldLeft };
     }
 
@@ -799,10 +812,6 @@ export default class IABookActions extends LitElement {
    * @memberof IABookActions
    */
   async loanRenewAttempt(secondsLeft) {
-    log('loanRenewAttempt ---', {
-      secondsLeft,
-      loanRenewResult: this.loanRenewResult,
-    });
     let loanSecondsLeft = secondsLeft;
     /**
      * auto-renew is not possible in last seconds (let say 50 second) because,
@@ -812,7 +821,7 @@ export default class IABookActions extends LitElement {
      * so if seconds left is < 50, just expire the loan
      */
     if (loanSecondsLeft < 50) {
-      log('loanRenewAttempt --- loanSecondsLeft < 50, will expire');
+      log('[IABookActions] loanRenewAttempt: < 50s left, expiring loan');
       await this.browseHasExpired();
       return;
     }
@@ -820,7 +829,9 @@ export default class IABookActions extends LitElement {
     await this.autoLoanRenewChecker(false);
 
     // show warning modal with remaining time to auto returned it.
-    if (this.loanRenewResult.renewNow === false) {
+    // once the patron has dismissed it, don't re-show it on every subsequent
+    // tick — only an actual renewal (see handleLoanAutoRenewed) re-arms it.
+    if (this.loanRenewResult.renewNow === false && !this.warningModalDismissed) {
       /**
        * so compensate for the 50 second buffer to handle above race conditions
        * let's reduce 1 min from warning texts and early return the book when 1 min left.
@@ -894,9 +905,20 @@ export default class IABookActions extends LitElement {
     const action = event?.detail?.action;
     const errorMsg = event?.detail?.data?.error;
 
-    // template not show create_token errors
-    if (errorMsg && action !== 'create_token')
+    if (action === 'renew_loan') {
+      this.loanRenewInProgress = false;
+    }
+
+    // For renew_loan failures after auto-renew, show the patron-facing message
+    if (
+      errorMsg &&
+      action === 'renew_loan' &&
+      errorMsg.match(/not available/)
+    ) {
+      this.showLoanUnavailableModal();
+    } else if (errorMsg && action !== 'create_token') {
       this.showErrorModal(errorMsg, action);
+    }
 
     // if error related to loan token
     // - set user_has_browsed to `false`