@internetarchive/ia-book-actions 1.4.4-alpha1 → 1.4.4-alpha3

package/index.html

@@ -97,6 +97,7 @@
       border: 2px solid #194880;
       border-radius: 10px;
       background: white;
+      height: 50px;
     }
     .timer-presets button.active-preset {
       background: #194880;
@@ -137,6 +138,9 @@
     .loan-status-badge.status-active {
       background: #2e7d32; /* green: loan is currently checked out */
     }
+    .loan-status-badge.status-renewing {
+      background: #b8860b; /* amber: a renew_loan attempt is in flight */
+    }
     .loan-status-badge.status-returned {
       background: #d9534f; /* red: auto-returned / not on loan */
     }
@@ -216,7 +220,7 @@
     console.log = (...consoleArgs) => {
       __nativeConsoleLog(...consoleArgs);
 
-      const loggedPrefixes = ['[ActionsHandlerService]', '[IABookActions]', '[Demo]'];
+      const loggedPrefixes = ['[IABookActions]', '[IABookActions]', '[Demo]'];
       if (typeof consoleArgs[0] !== 'string' || !loggedPrefixes.some((prefix) => consoleArgs[0].startsWith(prefix))) {
         return;
       }
@@ -280,7 +284,7 @@
     const timerPresets = {
       '15s': { loanTotalTime: 15, loanRenewAtLast: 13, pageChangedInLast: 5 },
       '30s': { loanTotalTime: 30, loanRenewAtLast: 27, pageChangedInLast: 10 },
-      '2': { loanTotalTime: 120, loanRenewAtLast: 110, pageChangedInLast: 30 },
+      '2': { loanTotalTime: 120, loanRenewAtLast: 95, pageChangedInLast: 15 },
       '5': { loanTotalTime: 300, loanRenewAtLast: 240, pageChangedInLast: 60 },
       '10': { loanTotalTime: 600, loanRenewAtLast: 480, pageChangedInLast: 120 },
       '30': { loanTotalTime: 1800, loanRenewAtLast: 1500, pageChangedInLast: 600 },
@@ -439,6 +443,14 @@
         await iaBookActions.updateComplete;
       }
 
+      // showWarningModal() reads its message text from
+      // loanRenewHelper.getMessageTexts(loanRenewResult.texts, ...) — that
+      // helper only exists, and loanRenewResult.texts only gets populated,
+      // once autoLoanRenewChecker() has run at least once (this is what the
+      // real periodic timer calls before ever showing the modal). Run it
+      // here too so the button shows the same populated message a real
+      // warning would.
+      await iaBookActions.autoLoanRenewChecker(false);
       iaBookActions.showWarningModal();
     });
 
@@ -578,6 +590,13 @@
     function computeLoanStatus() {
       const lendingStatus = iaBookActions.lendingStatus || {};
 
+      // Checked first: autoRenewExpiredLoan() optimistically flips
+      // browsingExpired back to false the moment a retry starts (before the
+      // renew_loan call has actually landed), so without this check the
+      // badge would misleadingly jump straight to ACTIVE during the retry.
+      if (iaBookActions.loanRenewInProgress) {
+        return { badge: 'RENEWING', className: 'status-renewing' };
+      }
       if (lendingStatus.browsingExpired) {
         return { badge: 'RETURNED', className: 'status-returned' };
       }
@@ -662,7 +681,10 @@
                 <button id="show_expired_modal">2. Auto-return due to inactivity<br>(no modal, page stays put)</button>
               </td>
               <td class="action-button">
-                <button class="pageChangedEvent">3. Interact with book (turn page)<br>silently renew if interact in given time</button>
+                <button class="pageChangedEvent">
+                  3. Interact with book (turn page)<br>
+                  silently renew while active or after auto-return
+                </button>
               </td>
               <td class="action-button">
                 <button id="resync_timer">4. Return to tab after time away<br>(visibilitychange — silent retry if expired)</button>
@@ -688,9 +710,6 @@
               <td class="searchParam">
                 <label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
               </td>
-              <td>
-                <label class="ia-button"><button class="pageChangedEvent">Page Change Event</button></label>
-              </td>
             </tr>
           </table>
       </fieldset>

package/package.json

@@ -7,7 +7,7 @@
   },
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
-  "version": "1.4.4-alpha1",
+  "version": "1.4.4-alpha3",
   "main": "index.js",
   "module": "index.js",
   "publishConfig": {

package/src/core/services/actions-handler/actions-handler-service.js

@@ -84,10 +84,10 @@ export default async function ActionsHandlerService(options) {
       .then(data => {
         // `data` is the parsed version of the JSON returned from the above endpoint.
         if (!data?.error) {
-          log(`[ActionsHandlerService] ✓ ${option.action} succeeded`, data);
+          log(`[IABookActions] ✓ ${option.action} succeeded`, data);
           option?.success(data);
         } else {
-          log(`[ActionsHandlerService] ✗ ${option.action} failed`, data);
+          log(`[IABookActions] ✗ ${option.action} failed`, data);
           option?.error(data);
         }
       });

package/src/core/services/actions-handler/actions-handler.js

@@ -53,20 +53,8 @@ export default class ActionsHandler extends LitElement {
       );
     });
 
-    this.addEventListener('autoRenew', async ({ detail }) => {
-      this.handleLoanRenewNow();
-      await this.loanAnanlytics?.storeLoanStatsCount(
-        this.identifier,
-        'autorenew'
-      );
-
-      const analyticsLabel = detail?.renewType === 'auto' ? analyticsLabels.browseAutoRenew : analyticsLabels.browseManualRenew;
-      this.loanAnanlytics?.sendEvent(
-        analyticsCategories.browse,
-        analyticsActions.browseRenew,
-        analyticsLabel,
-        this.identifier
-      );
+    this.addEventListener('autoRenew', ({ detail }) => {
+      this.handleLoanRenewNow(detail?.renewType);
     });
 
     this.addEventListener('autoReturn', async () => {
@@ -177,7 +165,7 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
-  handleLoanRenewNow() {
+  handleLoanRenewNow(renewType) {
     const action = 'renew_loan';
 
     ActionsHandlerService({
@@ -192,6 +180,23 @@ export default class ActionsHandler extends LitElement {
           // Await — loanAutoRenewed listeners read this same cache key
           // immediately; dispatching before the write lands was a race.
           await this.setBrowseTimeSession();
+
+          // Only record the renew analytics event once the renewal has
+          // actually succeeded — not merely attempted.
+          await this.loanAnanlytics?.storeLoanStatsCount(
+            this.identifier,
+            'autorenew'
+          );
+          const analyticsLabel =
+            renewType === 'auto'
+              ? analyticsLabels.browseAutoRenew
+              : analyticsLabels.browseManualRenew;
+          this.loanAnanlytics?.sendEvent(
+            analyticsCategories.browse,
+            analyticsActions.browseRenew,
+            analyticsLabel,
+            this.identifier
+          );
         } else {
           log('RENEW_LOAN ERROR --- ', {
             action,

package/src/ia-book-actions.js

@@ -180,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();
     }
   }
@@ -304,17 +311,27 @@ export default class IABookActions extends LitElement {
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
+      // 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: this.lendingStatus.browsingExpired,
+        browsingExpired: wasExpired,
       });
 
       // If the loan expired while the tab stayed visible, auto-renew on page turn
-      if (this.lendingStatus.browsingExpired) {
+      if (wasExpired) {
         this.autoRenewExpiredLoan();
       }
 
-      if (this.borrowType === 'browsed' && !this.lendingStatus.browsingExpired) {
+      if (this.borrowType === 'browsed' && !wasExpired) {
         this.autoLoanRenewChecker(true);
       }
     });
@@ -398,6 +415,16 @@ export default class IABookActions extends LitElement {
 
     this.modal?.closeModal();
 
+    // The loan genuinely lapsed while the tab was hidden/backgrounded, so
+    // BookReader's page-image access (issued via create_token, not
+    // renew_loan) died with it. Resetting this lets the token poller's
+    // next successful create_token call re-run lendingBarPostInit() —
+    // whatever re-initializes BookReader (e.g. br.init()) — instead of
+    // silently skipping it because a token was already issued once this
+    // page load. Without this, the loan's countdown resets but BookReader
+    // keeps using its now-dead session, so page images break.
+    this.postInitComplete = false;
+
     // 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.
@@ -537,7 +564,7 @@ export default class IABookActions extends LitElement {
       headline: '',
       showCloseButton: false,
       closeOnBackdropClick: false,
-      headerColor: '#194880',
+      headerColor: '#d9534f',
       message:
         'Due to inactivity, this book was returned, and someone else has now borrowed it. Please try again later.',
     });
@@ -545,7 +572,7 @@ export default class IABookActions extends LitElement {
     const customModalContent = html`<br />
       <div style="text-align: center">
         <button
-          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
           @click=${() => URLHelper.goToUrl(this.returnUrl, true)}
         >
           Okay
@@ -718,14 +745,15 @@ export default class IABookActions extends LitElement {
 
     if (resyncd.hasSynced) {
       secondsLeft = resyncd.whatShouldLeft;
-      log('[IABookActions] startTimerCountdown: timer re-synced', {
+      log('[IABookActions] timer: timer re-synced', {
         secondsLeft,
       });
     }
 
-    log('[IABookActions] startTimerCountdown', {
+    log('[IABookActions] timer', {
       secondsLeft,
       loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+      pageChangedInLast: this.loanRenewTimeConfig.pageChangedInLast,
     });
 
     /**
@@ -887,13 +915,16 @@ export default class IABookActions extends LitElement {
     const action = event?.detail?.action;
     const errorMsg = event?.detail?.data?.error;
 
+    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.loanRenewInProgress = false;
       this.showLoanUnavailableModal();
     } else if (errorMsg && action !== 'create_token') {
       this.showErrorModal(errorMsg, action);

package/test/core/services/actions-handler.test.js

@@ -1,7 +1,9 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
+import { LocalCache } from '@internetarchive/local-cache';
 
 import ActionsHandler from '../../../src/core/services/actions-handler/actions-handler.js';
+import { analyticsCategories, analyticsActions, analyticsLabels } from '../../../src/core/config/analytics-event-and-category.js';
 
 // Define a temporary tag for this element for testing
 const TEST_TAG = 'ia-actions-handler-test';
@@ -89,3 +91,110 @@ describe('ActionsHandler#setStickyAdminAccess', () => {
     expect(lastSetCookie).to.contain(`${encodeURIComponent('sticky-admin-access')}=${encodeURIComponent('false')}`);
   });
 });
+
+describe('ActionsHandler#handleLoanRenewNow (WEBDEV-8322)', () => {
+  let el;
+  let localCache;
+  const identifier = 'renew-now-test-book';
+
+  beforeEach(async () => {
+    // Make sure no other test in this run left ?error=true in the URL —
+    // ActionsHandlerService reads it directly off window.location.
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('error')) {
+      params.delete('error');
+      const query = params.toString();
+      window.history.replaceState(
+        {},
+        '',
+        `${window.location.pathname}${query ? `?${query}` : ''}`
+      );
+    }
+
+    el = await fixture(`<${TEST_TAG}></${TEST_TAG}>`);
+    el.identifier = identifier;
+    el.loanTotalTime = 3600;
+    localCache = new LocalCache({ namespace: 'loanRenew' });
+    el.localCache = localCache;
+    // The demo/test environment's ActionsHandlerService fakes a renew_loan
+    // success after a 5s delay to simulate a real network round-trip.
+    await localCache.delete(`${identifier}-loanTime`);
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('awaits the loanTime cache write before dispatching loanAutoRenewed, and fires the renew analytics event only on success', async function test() {
+    this.timeout(7000);
+
+    const storeStatsSpy = sinon.spy(el.loanAnanlytics, 'storeLoanStatsCount');
+    const sendEventSpy = sinon.spy(el.loanAnanlytics, 'sendEvent');
+
+    let loanTimeWhenEventFired;
+    el.addEventListener('loanAutoRenewed', () => {
+      loanTimeWhenEventFired = localCache.get(`${identifier}-loanTime`);
+    });
+
+    el.handleLoanRenewNow('auto');
+
+    // ActionsHandlerService fakes a 5s delay for renew_loan in this
+    // (localhost) test environment — wait it out, matching the existing
+    // pattern used elsewhere in this test suite for the same fake delay.
+    await aTimeout(5500);
+
+    // The race this guards against: loanAutoRenewed used to dispatch
+    // before setBrowseTimeSession()'s cache write landed, so a listener
+    // reading the cache immediately could still see the old/deleted value.
+    const resolvedLoanTime = await loanTimeWhenEventFired;
+    expect(resolvedLoanTime).to.exist;
+    expect(resolvedLoanTime.getTime()).to.be.greaterThan(Date.now());
+
+    expect(storeStatsSpy.calledWith(identifier, 'autorenew')).to.be.true;
+    // storeLoanStatsCount fires its own matrix-stats sendEvent internally,
+    // so assert on the specific renew-success event rather than call count.
+    expect(
+      sendEventSpy.calledWith(
+        analyticsCategories.browse,
+        analyticsActions.browseRenew,
+        analyticsLabels.browseAutoRenew,
+        identifier
+      )
+    ).to.be.true;
+  });
+
+  it('does not fire the renew analytics event when the renewal fails', async () => {
+    const sendEventSpy = sinon.spy(el.loanAnanlytics, 'sendEvent');
+    const storeStatsSpy = sinon.spy(el.loanAnanlytics, 'storeLoanStatsCount');
+
+    // Force ActionsHandlerService's shouldReturnError branch for this call.
+    const originalSearch = window.location.search;
+    const params = new URLSearchParams(originalSearch);
+    params.set('error', 'true');
+    window.history.pushState({}, '', `?${params.toString()}`);
+
+    let errorEventDetail;
+    el.addEventListener('lendingActionError', ({ detail }) => {
+      errorEventDetail = detail;
+    });
+
+    try {
+      el.handleLoanRenewNow('auto');
+      await aTimeout(200);
+
+      expect(errorEventDetail?.action).to.equal('renew_loan');
+      // dispatchActionError fires its own 'LendingServiceError' analytics
+      // event on any error — that's expected. What must NOT fire is the
+      // renew-success event this fix gates on `isRenewal`.
+      expect(
+        sendEventSpy.calledWith(
+          analyticsCategories.browse,
+          analyticsActions.browseRenew
+        )
+      ).to.be.false;
+      expect(storeStatsSpy.calledWith(identifier, 'autorenew')).to.be.false;
+    } finally {
+      window.history.pushState({}, '', `${window.location.pathname}${originalSearch}`);
+    }
+  });
+});

package/test/ia-book-actions.test.js

@@ -719,6 +719,127 @@ describe('autoRenewExpiredLoan', () => {
   });
 });
 
+describe('BookReader:userAction race regression (WEBDEV-8322)', () => {
+  it('does not let autoLoanRenewChecker clobber an in-flight expired-loan renewal', async () => {
+    // Get borrowType derived as 'browsed' first, same as the
+    // "Expiring book cancels interval" test above — hasExpired renders
+    // leave borrowType untouched, so it must already be 'browsed' before
+    // the loan is marked expired.
+    const baseStatus = {
+      is_lendable: true,
+      user_has_browsed: true,
+      browsingExpired: false,
+    };
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: baseStatus,
+      })
+    );
+    await el.updateComplete;
+    expect(el.borrowType).to.equal('browsed');
+
+    el.lendingStatus = { ...baseStatus, browsingExpired: true };
+    await el.updateComplete;
+
+    const autoLoanRenewCheckerSpy = Sinon.spy(el, 'autoLoanRenewChecker');
+
+    window.dispatchEvent(new CustomEvent('BookReader:userAction'));
+
+    // autoRenewExpiredLoan()'s setTimeout(0) sets renewNow=true. If the old
+    // bug were present, the still-live lendingStatus.browsingExpired check
+    // would (wrongly) also let autoLoanRenewChecker(true) run — which reads
+    // the already-deleted loanTime cache key and overwrites renewNow back
+    // to false. Give both paths plenty of time to resolve.
+    await aTimeout(300);
+
+    expect(autoLoanRenewCheckerSpy.called).to.be.false;
+    expect(el.loanRenewResult.renewNow).to.be.true;
+  });
+});
+
+describe('handleLendingActionError - loanRenewInProgress reset', () => {
+  it('clears loanRenewInProgress on any renew_loan failure, not just "not available"', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: { user_has_browsed: true, browsingExpired: true },
+      })
+    );
+    await el.updateComplete;
+
+    el.loanRenewInProgress = true;
+
+    el.handleLendingActionError({
+      detail: {
+        action: 'renew_loan',
+        data: { error: 'some other unrelated failure' },
+      },
+    });
+
+    expect(el.loanRenewInProgress).to.be.false;
+  });
+});
+
+describe('showWarningModal', () => {
+  it('shows a headline, one Okay button, and an info-icon help link; Okay dismisses without renewing', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: { user_has_browsed: true, secondsLeftOnLoan: 100 },
+      })
+    );
+    await el.updateComplete;
+
+    await el.showWarningModal();
+
+    const modalManagerEl = document.body.querySelector('modal-manager');
+    const modalTemplateEl =
+      modalManagerEl.shadowRoot.querySelector('modal-template');
+    const headline =
+      modalTemplateEl.shadowRoot.querySelector('.headline')?.textContent;
+    expect(headline).to.contain('Are you still there?');
+
+    const helpLink = modalTemplateEl.shadowRoot.querySelector(
+      'a[href="https://help.archive.org/help/borrowing-from-the-lending-library"]'
+    );
+    expect(helpLink).to.exist;
+
+    const buttons = modalManagerEl.shadowRoot.querySelectorAll(
+      '#book-action-bar-custom-buttons button'
+    );
+    expect(buttons.length).to.equal(1);
+    expect(buttons[0].textContent).to.contain('Okay');
+
+    buttons[0].click();
+
+    expect(el.warningModalOpen).to.be.false;
+    expect(el.warningModalDismissed).to.be.true;
+    expect(el.loanRenewResult.renewNow).to.be.false;
+  });
+
+  it('does not reopen while already open', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'foobar',
+        lendingStatus: { user_has_browsed: true, secondsLeftOnLoan: 100 },
+      })
+    );
+    await el.updateComplete;
+
+    await el.showWarningModal();
+    const showModalSpy = Sinon.spy(el.modal, 'showModal');
+
+    await el.showWarningModal();
+
+    expect(showModalSpy.called).to.be.false;
+  });
+});
+
 describe('Shared Resize Observer', () => {
   it('can receive a Shared Resize Observer', async () => {
     const sharedObserverStub = new SharedResizeObserver();