@internetarchive/ia-book-actions 0.1.11-b4 → 0.1.11-b41

package/demo/index.html

@@ -131,11 +131,11 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 30 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 
-    iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
+    iaBookActions.loanRenewTimeConfig = loanTotalTime5Min;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
     let secondsLeftOnLoan = iaBookActions.loanRenewTimeConfig.loanTotalTime;
@@ -242,6 +242,31 @@
       });
     });
 
+    document.querySelector('#show_warning_modal').addEventListener('click', async () => {
+      if (!iaBookActions.lendingStatus.user_has_browsed) {
+        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
+        iaBookActions.lendingStatus = newLendingStatus;
+        await iaBookActions.updateComplete;
+      }
+
+      iaBookActions.showWarningModal();
+
+      if (iaBookActions.lendingStatus.user_has_browsed) {
+        iaBookActions.showWarningModal();
+      }
+    });
+
+    document.querySelector('#show_expired_modal').addEventListener('click', async () => {
+      if (!iaBookActions.lendingStatus.user_has_browsed) {
+        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
+        iaBookActions.lendingStatus = newLendingStatus;
+        await iaBookActions.updateComplete;
+      }
+      await new Promise(resolve => setTimeout(resolve, 5000));
+
+      iaBookActions.browseHasExpired();
+    });
+
     document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.value === 'available_to_borrow') {
@@ -334,6 +359,13 @@
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
               <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
+              <div>
+                <button id="show_warning_modal">When Browsing (`user_has_browsed`), show Warning Modal</button>
+              </div>
+              <div>
+                <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
+                how_expired_modal
+              </div>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
@@ -356,5 +388,6 @@
         </table>
     </fieldset>
   </div>
+  <modal-manager></modal-manager>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.11-b4",
+  "version": "0.1.11-b41",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -18,7 +18,6 @@
     "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
   },
   "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.4",
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.12",

package/src/components/timer-countdown.js

@@ -3,32 +3,43 @@ import { html, css, LitElement } from 'lit';
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
-      secondsLeftOnLoan: { type: Number }, // in seconds
+      secondsLeftOnLoan: { type: Number },
+      displayTime: { type: Boolean },
     };
   }
 
   constructor() {
     super();
 
-    /**
-     * seconds left in current loan
-     * @type {number}
-     */
     this.secondsLeftOnLoan = 0;
+    this.displayTime = false;
+  }
+
+  get minutesLeftOnLoan() {
+    let timeLeft = Math.round(this.secondsLeftOnLoan);
+
+    // convert time from second to minute
+    timeLeft = Math.ceil(timeLeft / 60);
+
+    if (timeLeft < 10) {
+      timeLeft = `0:0${timeLeft}`;
+    } else if (timeLeft === 60) {
+      timeLeft = `1:00`;
+    } else {
+      timeLeft = `0:${timeLeft}`;
+    }
+    return timeLeft;
   }
 
   /**
    * get remaining time with timeunit
    *
    * @memberof TimerCountdown
-   * @return string
+   * @return string - seconds left
    */
   get remainingTime() {
     const unitOfTime = 'minute';
-    let timeLeft = Math.round(this.secondsLeftOnLoan);
-
-    // convert time from second to minute
-    timeLeft = Math.ceil(timeLeft / 60);
+    const timeLeft = this.minutesLeftOnLoan;
 
     return timeLeft !== 1
       ? `${timeLeft} ${unitOfTime}s`
@@ -36,58 +47,28 @@ export default class TimerCountdown extends LitElement {
   }
 
   render() {
+    const viewClass = this.displayTime ? 'view' : 'hide';
     return html`
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
+      <button
+        id="timer-counter"
+        class=${viewClass}
+        @click=${() => {
+          this.displayTime = !this.displayTime;
+        }}
+        role="timer"
       >
-        <circle class="circle" cx="50" cy="50" r="50" />
-      </svg>
-      <span class="sr-only">${this.remainingTime} left</span>
+        <span>${this.minutesLeftOnLoan}</span>
+        <span class="sr-only">${this.remainingTime} left</span>
+      </button>
     `;
   }
 
   static get styles() {
-    const white = css`var(--white, #fff)`;
-    const timerSecondsLeft = css`var(--secondsLeftOnLoan, 6000s)`; //
-    const timerStrokeLeft = css`var(--strokeLeftOnLoan, 315)`;
-
     return css`
       :host {
         right: 0;
         margin-right: 10px;
         position: absolute;
-        height: 20px;
-        width: 20px;
-      }
-
-      @keyframes circletimer {
-        0% {
-          stroke-dashoffset: ${timerStrokeLeft};
-          stroke-dasharray: 315;
-        }
-        100% {
-          stroke-dashoffset: 0;
-          stroke-dasharray: 315;
-        }
-      }
-
-      svg {
-        background-color: ${white};
-        border-radius: 50px;
-        border: 2px solid ${white};
-        transform: rotateZ(-90deg);
-      }
-
-      svg .circle {
-        stroke: #000;
-        stroke-width: 100px;
-        fill: ${white};
-        stroke-dashoffset: 315;
-        stroke-dasharray: 0;
-        animation: ${timerSecondsLeft} circletimer linear;
       }
 
       .sr-only {
@@ -100,6 +81,18 @@ export default class TimerCountdown extends LitElement {
         border: none;
         overflow: hidden;
       }
+
+      button#timer-counter {
+        cursor: pointer;
+      }
+
+      .hide {
+        opacity: 0;
+      }
+
+      .show {
+        opacity: 1;
+      }
     `;
   }
 }

package/src/core/config/constants.js

@@ -6,4 +6,4 @@ export const mobileContainerWidth = 700;
 /**
  * shift the actions buttons in dropdown
  */
-export const tabletContainerWidth = 895;
+export const tabletContainerWidth = 800;

package/src/core/config/ia-lending-intervals.js

@@ -1,3 +1,4 @@
+/* global: window */
 /**
  * Collection of methods for managing intervals for lending system
  *
@@ -18,16 +19,19 @@ window.IALendingIntervals = {
   tokenPoller: 0,
 
   /**
-   * store timer-countdown interval
-   * @see TimerCountdown::timerCountdown
+   * renewal check interval
    */
   timerCountdown: 0,
 
+  /** expiration timer */
+  browseExpireTimeout: 0,
+
   /**
    * clear interval for create_token api
    */
   clearTokenPoller: () => {
-    window.clearInterval(window?.IALendingIntervals?.tokenPoller);
+    window.clearInterval(window.IALendingIntervals.tokenPoller);
+    window.IALendingIntervals.tokenPoller = 0;
   },
 
   /**
@@ -35,13 +39,23 @@ window.IALendingIntervals = {
    */
   clearTimerCountdown: () => {
     window.clearInterval(window.IALendingIntervals.timerCountdown);
+    window.IALendingIntervals.timerCountdown = 0;
+  },
+
+  /**
+   * clear interval for graphic timer for one-hour loan renew
+   */
+  clearBrowseExpireTimeout: () => {
+    window.clearTimeout(window.IALendingIntervals.browseExpireTimeout);
+    window.IALendingIntervals.browseExpireTimeout = 0;
   },
 
   /**
    * clear all intervals being used acros lending system
    */
   clearAll: () => {
-    window.clearInterval(window?.IALendingIntervals?.tokenPoller);
-    window.clearInterval(window?.IALendingIntervals?.timerCountdown);
+    window?.IALendingIntervals?.clearTokenPoller();
+    window?.IALendingIntervals?.clearTimerCountdown();
+    window.IALendingIntervals.clearBrowseExpireTimeout();
   },
 };

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

@@ -21,7 +21,13 @@ export default async function ActionsHandlerService(options) {
   const tokenError = 'loan token not found. please try again later.';
   const borrowError =
     'This book is not available to borrow at this time. Please try again later.';
-  const erroneousActions = ['browse_book', 'borrow_book', 'create_token'];
+  const erroneousActions = [
+    'browse_book',
+    'borrow_book',
+    'create_token',
+    'renew_loan',
+    'return_loan',
+  ];
   const shouldReturnError =
     location?.href?.indexOf('?error=true') !== -1 &&
     location?.hostname !== 'archive.org';
@@ -36,7 +42,7 @@ export default async function ActionsHandlerService(options) {
       method: 'POST',
       body: formData,
     })
-      .then(response => {
+      .then(async response => {
         // intentional error on localhost
         if (shouldReturnError && erroneousActions.includes(option?.action)) {
           return {
@@ -47,7 +53,12 @@ export default async function ActionsHandlerService(options) {
 
         // return success response for /demo/ server...
         if (baseHost == '/demo/1' || baseHost == '/demo/') {
-          if (option?.action == 'renew_loan') {
+          if (
+            option?.action == 'renew_loan' ||
+            option?.action == 'return_loan'
+          ) {
+            // wait a few seconds so that the user can see the loading state
+            await new Promise(resolve => setTimeout(resolve, 5000));
             return {
               success: true,
               loan: { renewal: true },

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

@@ -2,10 +2,15 @@ import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
 import { sentryLogs } from '../../config/sentry-events.js';
+import log from '../log.js';
 
 import ActionsHandlerService from './actions-handler-service.js';
 import LoanAnanlytics from '../loan-analytics.js';
 import * as Cookies from '../doc-cookies.js';
+import {
+  analyticsCategories,
+  analyticsActions,
+} from '../../config/analytics-event-and-category.js';
 
 /**
  * These are callback functions calling from actions-config.js file.
@@ -38,24 +43,53 @@ export default class ActionsHandler extends LitElement {
   }
 
   bindEvents() {
-    this.addEventListener('browseBook', () => {
+    this.addEventListener('browseBook', async () => {
       this.handleBrowseIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browse');
+      await this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browse');
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browse
+      );
     });
 
-    this.addEventListener('browseBookAgain', () => {
+    this.addEventListener('browseBookAgain', async () => {
       this.handleBrowseIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browseagain');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'browseagain'
+      );
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browseBookAgain
+      );
     });
 
-    this.addEventListener('autoRenew', () => {
+    this.addEventListener('autoRenew', async () => {
       this.handleLoanRenewNow();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autorenew');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'autorenew'
+      );
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browseAutoRenew
+      );
     });
 
-    this.addEventListener('autoReturn', () => {
+    this.addEventListener('autoReturn', async () => {
       this.handleReturnIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autoreturn');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'autoreturn'
+      );
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'autorenew'
+      );
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browseAutoReturn
+      );
     });
 
     this.addEventListener('returnNow', ({ detail }) => {
@@ -142,7 +176,7 @@ export default class ActionsHandler extends LitElement {
       action,
       identifier: this.identifier,
       success: data => {
-        console.log("RENEW_LOAN --- ", data, action, data.loan, this.identifier);
+        log('RENEW_LOAN --- ', data, action, data.loan, this.identifier);
         if (data?.success === true && data?.loan?.renewal === true) {
           this.setBrowseTimeSession();
           this.dispatchEvent(
@@ -316,7 +350,7 @@ export default class ActionsHandler extends LitElement {
       // delete pageChangedTime when book is auto renew at nth minute
       await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
-      console.log(error);
+      log(error);
     }
   }
 

package/src/core/services/get-lending-actions.js

@@ -40,7 +40,7 @@ import ActionsConfig from './actions-config.js';
  * @enum {string}
  */
 export const bookTitles = {
-  available_1hr: 'Renews automatically as long as pages are turned.',
+  available_1hr: 'Renews automatically with continued use.',
   available_14d: 'This book can be borrowed for 14 days.',
   available_pd: 'Book available to patrons with print disabilities.',
   available_waitlist: 'A waitlist is available.',
@@ -49,7 +49,7 @@ export const bookTitles = {
   being_borrowed: 'Another patron is using this book. Please check back later.',
   eligible_pd: 'You are eligible for print-disabled access.',
   on_waitlist: 'You are on the waitlist for this book.',
-  session_expired: 'Renews automatically as long as pages are turned.',
+  session_expired: 'Renews automatically with continued use.',
   unavailable: 'This book is not available at this time.',
 };
 

package/src/core/services/loan-analytics.js

@@ -2,6 +2,7 @@
 
 import { analyticsCategories } from '../config/analytics-event-and-category.js';
 import * as Cookies from './doc-cookies.js';
+import log from './log.js';
 
 /**
  * This class is used to send different GA events for loan system.
@@ -45,7 +46,7 @@ export default class LoanAnanlytics {
         '/'
       );
     } catch (error) {
-      console.log(error);
+      log(error);
       this.sendEvent('Cookies-Error-Actions', error, this.identifier);
     }
   }
@@ -144,7 +145,7 @@ export default class LoanAnanlytics {
    * @memberof LoanAnanlytics
    */
   sendEvent(eventCategory, eventAction, label, extraParams) {
-    // console.log(
+    // log(
     //   'eventCategory:-',
     //   eventCategory,
     //   '\t||\teventAction:-',

package/src/core/services/loan-renew-helper.js

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import { nothing } from 'lit';
+import log from './log.js';
 
 /**
  * This class is used to determine if use is eligible for auto renew loan.
@@ -32,7 +33,7 @@ export class LoanRenewHelper {
       }
       return this.autoChecker(); // auto checker at last 10th minute
     } catch (error) {
-      console.log(error);
+      log(error);
     }
 
     return nothing;

package/src/core/services/log.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable semi */
+/**
+ * log() utility -- production ignores 'log()' JS calls; dev invokes 'log()'
+ */
+const log =
+  location.hostname === 'localhost' ||
+  location.host.match(/^(www|cat)-[a-z0-9]+\.archive\.org$/) ||
+  location.host.match(/\.code\.archive\.org$/) ||
+  location.host.match(/\.dev\.archive\.org$/) ||
+  location.host.match(/^ia-petabox-/)
+    ? // eslint-disable-next-line no-console
+      console.log.bind(console) // convenient, no?  Stateless function
+    : () => {};
+
+export { log as default };

package/src/ia-book-actions.js

@@ -19,6 +19,7 @@ import { mobileContainerWidth } from './core/config/constants.js';
 import { sentryLogs } from './core/config/sentry-events.js';
 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';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -70,14 +71,13 @@ export default class IABookActions extends LitElement {
     this.identifier = '';
     this.bookTitle = '';
     this.returnUrl = '';
-    this.lendingStatus = {};
+    this.lendingStatus = {}; // very important as components feed from this
     this.width = 0;
     this.bwbPurchaseUrl = '';
     this.lendingBarPostInit = () => {};
     this.barType = 'action'; // 'title'|'action'
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
-    this.modal = undefined;
     this.tokenDelay = 120; // in seconds
 
     // private props
@@ -86,8 +86,8 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
-    this.borrowType = null; // (browsed|borrowed)
-    this.browseTimer = undefined;
+    this.borrowType = null; // 'browsed'|'borrowed'
+    this.browseTimer = undefined; // timeout
     this.timerExecutionSeconds = 30;
 
     /** @deprecated */
@@ -105,7 +105,7 @@ export default class IABookActions extends LitElement {
      *  loanTotalTime: number, - total seconds a loan does have
      *  loanRenewAtLast: number, - check for loan renew at last
      *  pageChangedInLast: number, - consider loan renew eligible if viewed new page
-    */
+     */
     this.loanRenewTimeConfig = {
       loanTotalTime: 3600, // 1 hour
       loanRenewAtLast: 660, // 11 minutes
@@ -121,12 +121,6 @@ export default class IABookActions extends LitElement {
      * @property {number} secondsLeft - seconds left in active loan
      */
     this.loanRenewResult = { texts: '', renewNow: false, secondsLeft: 0 };
-
-    /**
-     * need showdowRoot opened for resetTimerCountState
-     * @see IABookActions::resetTimerCountState
-     */
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
   }
 
   disconnectedCallback() {
@@ -155,7 +149,6 @@ export default class IABookActions extends LitElement {
   updated(changed) {
     if (changed.has('lendingStatus') || changed.has('bwbPurchaseUrl')) {
       this.setupLendingToolbarActions();
-      this.update();
     }
 
     if (changed.has('sharedObserver')) {
@@ -254,14 +247,6 @@ export default class IABookActions extends LitElement {
       return;
     }
 
-    // initial timer state for 1-hour loan
-    if (this.borrowType === 'browsed' && !this.loanRenewResult.renewNow) {
-      setTimeout(() => {
-        console.log('IN TIMEOUT OF --- setupLendingToolbarActions, firing resetTimerCountState');
-        this.resetTimerCountState();
-      }, 100);
-    }
-
     /**
      * tokenPoller determines if user has loan token for this book
      * - if book is going to renew, need to wait until renew is completed
@@ -269,6 +254,8 @@ export default class IABookActions extends LitElement {
     setTimeout(() => {
       if (!hasExpired) this.startLoanTokenPoller();
     }, 100);
+
+    this.requestUpdate();
   }
 
   /**
@@ -282,6 +269,14 @@ 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') {
+        this.autoLoanRenewChecker(true);
+      }
+    });
+
+    window.focus(() => {
+      log('WINDOW FOCUS', this.borrowType);
       if (this.borrowType === 'browsed') {
         this.autoLoanRenewChecker(true);
       }
@@ -306,27 +301,23 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
-  /**
-   * create / select the modal-manager component on DOM
-   * @memberof IABookActions
-   */
-  async useModalManager() {
-    if (!this.modal) {
-      this.modal = document.querySelector('modal-manager');
-
-      if (!this.modal) this.modal = document.createElement('modal-manager');
-    }
+  /** @returns HTMLElement */
+  get modal() {
+    const modalOnDom = document.querySelector('modal-manager');
 
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+    modalOnDom.id = 'action-bar-modal';
+    return modalOnDom;
   }
 
   /**
    * Show the waring modal to ask user if they are still reading
    */
   async showWarningModal() {
-    console.log('****** showWarningModal ******');
-    await this.useModalManager();
+    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;
@@ -336,76 +327,130 @@ export default class IABookActions extends LitElement {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
-    const config = new ModalConfig();
-    config.headline = 'Are you still here?';
-    config.showCloseButton = false;
-    config.closeOnBackdropClick = false;
-    config.message = this.loanRenewHelper?.getMessageTexts(
-      this.loanRenewResult.texts,
-      secondsLeft
-    );
+    const config = new ModalConfig({
+      headline: 'Are you still reading?',
+      headerColor: '#194880',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: this.loanRenewHelper?.getMessageTexts(
+        this.loanRenewResult.texts,
+        secondsLeft
+      ),
+    });
 
-    const customContent = html`<br />
-      <div id="custom-buttons" style="display:flex;justify-content:center;">
+    const customModalContent = html`<br />
+      <div
+        id="book-action-bar-custom-buttons"
+        style="display:flex;justify-content:center;"
+      >
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${async event => {
-            await this.changeModalState(event);
-            this.loanRenewResult = { texts: '', renewNow: true };
-          }}
+          @click=${() => this.patronWantsToRenewBook()}
         >
           Keep reading
         </button>
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-          @click=${event => {
-            this.changeModalState(event);
-            document.querySelector('ia-book-actions').disableActionGroup = true;
-            this.returnNow = true;
-          }}
+          @click=${() => this.patronWantsToReturnBook()}
         >
           Return the book
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
+    this.modal.setAttribute('aria-live', 'assertive');
+    await this.modal?.showModal({ config, customModalContent });
   }
 
-  /**
-   * helper function to change button click states on modal-manager
-   * - add loader on button click
-   * - change button appearance
-   *
-   * @param {Event} event
-   */
-  changeModalState(event) {
-    if (event.target === undefined) return;
+  /** @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 button = event.target;
-    button.innerHTML = `<ia-activity-indicator
-      mode="processing"
-      style=${modalButtonStyle.loaderIcon}
-    ></ia-activity-indicator>`;
+    const config = new ModalConfig({
+      headline: 'Are you still reading?',
+      headerColor: '#194880',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: this.loanRenewHelper?.getMessageTexts(
+        this.loanRenewResult.texts,
+        secondsLeft
+      ),
+    });
 
-    const parentElement = event.target.parentNode;
-    parentElement.style.pointerEvents = 'none';
-    parentElement.style.opacity = 0.8;
+    const customModalContent = html`<br />
+      <div
+        id="disabled-book-action-bar-custom-buttons"
+        style="display:flex;justify-content:center; opacity:0.8; pointer-events:none;"
+      >
+        <button
+          disabled
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+        >
+          ${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'}
+        </button>
+      </div> `;
+
+    await this.modal?.showModal({ config, customModalContent });
+  }
+
+  /** Handles Renew action in warning modal */
+  async patronWantsToRenewBook() {
+    this.showWarningDisabledModal();
+    this.loanRenewResult = { texts: '', renewNow: true };
+  }
+
+  async patronWantsToReturnBook() {
+    this.showWarningDisabledModal('returnBook');
+    document.querySelector('ia-book-actions').disableActionGroup = true;
+    this.returnNow = true;
+
+    this.lendingStatus = {
+      ...this.lendingStatus,
+      browsingExpired: true,
+      secondsLeftOnLoan: 0,
+    };
   }
 
   /**
    * Show modal when book is auto returned
    */
   async showExpiredModal() {
-    console.log('showExpiredModal()');
-    await this.useModalManager();
-
-    const config = new ModalConfig();
-    config.headline = '';
-    config.showCloseButton = false;
-    config.closeOnBackdropClick = false;
-    config.message = 'This book has been returned due to inactivity.';
+    log('showExpiredModal()');
+
+    const config = new ModalConfig({
+      headline: '',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      headerColor: '#194880',
+      message: 'This book has been returned due to inactivity.',
+    });
 
-    const customContent = html`<br />
+    const customModalContent = html`<br />
       <div style="text-align: center">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
@@ -417,15 +462,7 @@ export default class IABookActions extends LitElement {
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
-  }
-
-  /**
-   * close/hide modal-manager
-   */
-  async closeModalManager() {
-    this.modal = document.querySelector('modal-manager');
-    this.modal?.closeModal();
+    await this.modal?.showModal({ config, customModalContent });
   }
 
   /**
@@ -489,7 +526,11 @@ export default class IABookActions extends LitElement {
   async browseHasExpired() {
     window?.IALendingIntervals?.clearAll();
 
-    const currStatus = { ...this.lendingStatus, browsingExpired: true };
+    const currStatus = {
+      ...this.lendingStatus,
+      browsingExpired: true,
+      secondsLeftOnLoan: 0,
+    };
     this.lendingStatus = currStatus;
 
     // remove respected key:value for loan-renew
@@ -507,54 +548,38 @@ export default class IABookActions extends LitElement {
   }
 
   async startBrowseTimer() {
-    clearTimeout(this.browseTimer);
-    console.log('startBrowseTimerstartBrowseTimer just cleared timer', this.browseTimer, this.lendingStatus);
+    window.IALendingIntervals.clearBrowseExpireTimeout();
 
     const {
       browsingExpired,
       user_has_browsed,
       secondsLeftOnLoan,
     } = this.lendingStatus;
+
+    log('startBrowseTimerstartBrowseTimer just cleared timer', {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    });
+
     if (!user_has_browsed || browsingExpired) {
-      console.log('user not browsed', this.lendingStatus);
+      log('user not browsed', {
+        user_has_browsed,
+        browsingExpired,
+        secondsLeftOnLoan,
+      });
       return;
     }
 
-    this.browseTimer = setTimeout(() => {
-      console.log('start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan', secondsLeftOnLoan);
+    window.IALendingIntervals.browseExpireTimeout = setTimeout(() => {
+      log(
+        'start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan',
+        secondsLeftOnLoan
+      );
       this.browseHasExpired();
     }, secondsLeftOnLoan * 1000);
   }
 
-  /**
-   * Reset timer animation state after book renewed
-   */
-  async resetTimerCountState() {
-    const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
-    if (!timerCountdown) return;
-
-    const secondsLeft = Number.parseInt((Number(this.lendingStatus.secondsLeftOnLoan)), 10);
-    const strokeDashOffset = Number.parseInt(((secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315) * 1.5, 10);
-
-
-    console.log('resetTimerCountState === ', { secondsLeft, strokeDashOffset });
-
-    // set seconds left in loan expire
-    timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
-
-    // set circle stroke offset left in loan expire
-    timerCountdown.style?.setProperty(
-      '--strokeLeftOnLoan',
-      `${strokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
-    );
-
-    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
-    animationCircle.style.animationName = 'none';
-    setTimeout(() => {
-      animationCircle.style.animationName = 'circletimer';
-    }, 100);
-  }
-
   render() {
     if (this.barType === 'title') {
       return html`<section class="lending-wrapper">
@@ -574,6 +599,10 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
+  get timerCountdownEl() {
+    return this.shadowRoot.querySelector('timer-countdown');
+  }
+
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -599,8 +628,9 @@ export default class IABookActions extends LitElement {
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
       <timer-countdown
-        .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-        class=${this.borrowType === 'browsed' ? '' : 'hide'}
+        .secondsLeftOnLoan=${Math.round(
+          Number(this.lendingStatus.secondsLeftOnLoan)
+        )}
       ></timer-countdown>
     `;
   }
@@ -616,18 +646,17 @@ export default class IABookActions extends LitElement {
     if (this.loanRenewResult.renewNow) {
       window?.IALendingIntervals?.clearAll();
 
+      // Now, let's reset loan duration & this.lendingStatus
+      const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+      const secondsLeft = Math.round((loanTime - new Date()) / 1000); // different in seconds
+
       // testing console....
-      console.log('IABookActions: AutoRenewed:- ', {
+      log('~~~ IABookActions: handleLoanAutoRenewed:- ', {
         ajaxResponse: event?.detail?.data,
         loanRenewResult: this.loanRenewResult,
-        secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan), // stale? how to fix
+        secondsLeftOnLoan: secondsLeft,
       });
 
-
-      // Now, let's reset loan duration & this.lendingStatus
-      const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
-      const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
-  
       const currStatus = {
         ...this.lendingStatus,
         user_has_browsed: true,
@@ -636,19 +665,10 @@ export default class IABookActions extends LitElement {
       };
       this.lendingStatus = currStatus;
 
-      console.log('~~~ handleLoanAutoRenewed - new this.lendingStatus', {
-        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan
-      });
-  
-      /**
-       * reset timer countdown states
-       */
-      await this.resetTimerCountState();
-
       // close the modal
-      this.modal?.remove();
-      this.modal?.showModal({ config: {}, customModalContent: `` });
-
+      this.modal?.closeModal();
+      this.modal.removeAttribute('id');
+      this.modal.customModalContent = nothing;
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
     }
   }
@@ -659,7 +679,6 @@ export default class IABookActions extends LitElement {
    * @memberof IABookActions
    */
   startTimerCountdown() {
-    console.log('startTimerCountdown()');
     window?.IALendingIntervals?.clearTimerCountdown();
 
     let secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
@@ -674,14 +693,18 @@ export default class IABookActions extends LitElement {
       // if really updated, escape from here
       const resync = await this.reSyncTimerIfGoneOff(secondsLeft);
 
-      console.log("*** startTimerCountdown = reSyncTimerIfGoneOff ***", { secondsLeft, resync });
-
       if (resync) {
-        console.log('have resyncd, will end startTimerCountdown here - ');
+        log('timer has resyncd, abort stale startTimerCountdown - ', {
+          secondsLeft,
+        });
         return;
       }
 
-      console.log('startTimerCountdown - NO RESYNC');
+      log('startTimerCountdown - countdown still valid. continue...', {
+        resync,
+        secondsLeft,
+        loanRenewAtLast: this.loanRenewTimeConfig.loanRenewAtLast,
+      });
 
       /**
        * execute from last 10th minute to 0th minute
@@ -709,15 +732,6 @@ export default class IABookActions extends LitElement {
    * @memberof TimerCountdown
    */
   async reSyncTimerIfGoneOff(timerSecondsLeft) {
-    // debug info
-    console.log(
-      new Date().toLocaleTimeString(),
-      'timeLeftInSec',
-      timerSecondsLeft,
-      ' ||| timeLeftInMin',
-      Math.ceil(timerSecondsLeft / 60)
-    );
-
     const currentTime = new Date();
 
     // current time - loan time
@@ -730,19 +744,27 @@ export default class IABookActions extends LitElement {
     // convert in minutes
     const whatIsleft = Math.round(timerSecondsLeft);
     const whatShouldLeft = Math.round(secondsShouldLeft);
+    const timerElSeconds = this.timerCountdownEl.secondsLeftOnLoan || 0;
 
-    if (whatIsleft !== whatShouldLeft) {
-      // debug info
-      console.log(
-        `timer is gone off, let's re-sync, whatIsleft -> ${whatIsleft}, whatShouldLeft -> ${whatShouldLeft}`
-      );
+    log(`reSyncTimerIfGoneOff?`, {
+      whatIsleft,
+      whatShouldLeft,
+      timerElSeconds,
+      timeLeftInMin: Math.ceil(timerSecondsLeft / 60),
+    });
 
-      // the seconds should left in timer again
+    if (timerElSeconds !== whatShouldLeft || whatIsleft !== whatShouldLeft) {
+      // set lending status with new time to update decrementor
       const currStatus = {
         ...this.lendingStatus,
-        secondsLeftOnLoan: secondsShouldLeft,
+        secondsLeftOnLoan: whatShouldLeft,
       };
       this.lendingStatus = currStatus;
+    }
+
+    if (whatIsleft !== whatShouldLeft) {
+      log(`timer is gone off, let's re-sync,`);
+
       return true;
     }
     return false;
@@ -757,7 +779,7 @@ export default class IABookActions extends LitElement {
    * @memberof IABookActions
    */
   async loanRenewAttempt(secondsLeft) {
-    console.log('loanRenewAttempt()', secondsLeft, this.loanRenewResult);
+    log('loanRenewAttempt()', secondsLeft, this.loanRenewResult);
     let loanSecondsLeft = secondsLeft;
     /**
      * auto-renew is not possible in last seconds (let say 50 second) because,
@@ -767,7 +789,7 @@ export default class IABookActions extends LitElement {
      * so if seconds left is < 50, just expire the loan
      */
     if (loanSecondsLeft < 50) {
-      console.log('if (loanSecondsLeft < 50) {');
+      log('if (loanSecondsLeft < 50) {');
       await this.browseHasExpired();
       return;
     }
@@ -882,8 +904,6 @@ export default class IABookActions extends LitElement {
 
   /* show error message if something went wrong */
   async showErrorModal(errorMsg, action) {
-    await this.useModalManager();
-
     const modalConfig = new ModalConfig({
       title: 'Lending error',
       message: errorMsg,
@@ -910,7 +930,7 @@ export default class IABookActions extends LitElement {
         <code>errorLog: ${errorMsg}</code>`;
     }
 
-    this.modal?.showModal({
+    await this.modal?.showModal({
       config: modalConfig,
     });
   }

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

@@ -189,7 +189,7 @@ describe('Borrow status actions', () => {
     ];
 
     expect(el.primaryTitle).to.equal(
-      'Renews automatically as long as pages are turned.'
+      'Renews automatically with continued use.'
     );
     expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');