@internetarchive/ia-book-actions 0.1.9 → 0.1.10-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.9",
+  "version": "0.1.10-alpha1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -18,9 +18,10 @@
     "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.8",
+    "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@internetarchive/toast-manager": "0.1.0",
     "lit": "^2.5.0"

package/src/assets/data/lending-get-status-service.js

@@ -100,7 +100,7 @@ export const canBrowseAndBorrow = {
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
   daysLeftOnLoan: 0,
-  isAdmin: true,
+  isAdmin: false,
   isArchiveOrgLending: true,
   isAvailable: false,
   isAvailableForBrowsing: false,
@@ -118,7 +118,7 @@ export const canBrowseAndBorrow = {
   loanStartDate: '2021-07-30 09:57:40',
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 3591,
+  secondsLeftOnLoan: 155,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/components/collapsible-action-group.js

@@ -30,6 +30,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       returnUrl: { type: String },
       autoRenew: { type: Boolean },
       autoReturn: { type: Boolean },
+      returnNow: { type: Boolean },
     };
   }
 
@@ -51,6 +52,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.returnUrl = '';
     this.autoRenew = false;
     this.autoReturn = false;
+    this.returnNow = false;
   }
 
   updated(changed) {
@@ -68,18 +70,22 @@ export class CollapsibleActionGroup extends ActionsHandler {
     if (changed.has('autoReturn') && this.autoReturn === true) {
       this.dispatchLoanEvent('autoReturn');
     }
+
+    if (changed.has('returnNow') && this.returnNow === true) {
+      this.dispatchLoanEvent('returnNow', { borrowType: 'browse' });
+    }
   }
 
   /**
-   * dispatch event when book is auto renewed / returned
+   * dispatch event when book is auto auto-renewed / auto-returned / returned
    * listen these events in action-handler.js to execute ajax call on petabox.
    * @see ActionsHandler
    *
-   * @param {string} event - autoRenew|autoReturn
+   * @param {string} event - autoRenew|autoReturn|returnNow
    * @memberof CollapsibleActionGroup
    */
-  dispatchLoanEvent(event) {
-    this.dispatchEvent(new Event(event));
+  dispatchLoanEvent(event, detail) {
+    this.dispatchEvent(new CustomEvent(event, { detail }));
   }
 
   /**

package/src/components/timer-countdown.js

@@ -1,12 +1,9 @@
 import { html, css, LitElement } from 'lit';
-import { sentryLogs } from '../core/config/sentry-events.js';
 
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
       secondsLeftOnLoan: { type: Number }, // in seconds
-      loanTotalTime: { type: Number }, // in seconds
-      loanRenewAtLast: { type: Number }, // in seconds
     };
   }
 
@@ -18,138 +15,6 @@ export default class TimerCountdown extends LitElement {
      * @type {number}
      */
     this.secondsLeftOnLoan = 0;
-
-    /**
-     * total seconds a loan does have
-     * @type {number}
-     */
-    this.loanTotalTime = 0;
-
-    /**
-     * at the remaining time, we attempt to renew current loan
-     * @type {number}
-     */
-    this.loanRenewAtLast = 0;
-
-    /**
-     * store time when timer is started
-     * @type {string}
-     */
-    this.timeWhenTimerStart = '';
-
-    /**
-     * delay seconds in setInterval function
-     * @type {number}
-     */
-    this.timerExecutionSeconds = 60;
-  }
-
-  disconnectedCallback() {
-    window?.IALendingIntervals?.clearTimerCountdown();
-  }
-
-  firstUpdated() {
-    this.timerCountdown();
-  }
-
-  updated(changed) {
-    if (changed.has('secondsLeftOnLoan') && this.secondsLeftOnLoan > 0) {
-      this.timerCountdown();
-    }
-  }
-
-  timerCountdown() {
-    this.disconnectedCallback();
-
-    let secondsLeft = this.secondsLeftOnLoan;
-
-    // store current time
-    this.timeWhenTimerStart = new Date();
-
-    /**
-     * set interval in window object
-     * @see ia-lending-intervals.js
-     */
-    window.IALendingIntervals.timerCountdown = setInterval(async () => {
-      secondsLeft -= this.timerExecutionSeconds;
-      secondsLeft = Math.round(secondsLeft); // round number
-
-      // re-sync timer if gone off because of background window
-      await this.reSyncTimerIfGoneOff(secondsLeft);
-
-      /**
-       * execute from last 10th minute to 0th minute
-       * - 10th - to check if user has viewed
-       * - till 0th - to show warning msg with remaining time to auto expired
-       * @see IABookActions::bindLoanRenewEvents
-       */
-      if (secondsLeft <= this.loanRenewAtLast) {
-        this.dispatchLoanRenewEvent(secondsLeft);
-      }
-
-      // clear interval in secondsLeft if less
-      if (secondsLeft <= this.timerExecutionSeconds) {
-        this.disconnectedCallback();
-        window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
-      }
-    }, this.timerExecutionSeconds * 1000);
-  }
-
-  /**
-   * dispatch loan renew attempt event
-   *
-   * @param {number} secondsLeft
-   * @memberof TimerCountdown
-   */
-  dispatchLoanRenewEvent(secondsLeft) {
-    this.dispatchEvent(
-      new CustomEvent('IABookActions:loanRenew', {
-        detail: {
-          hasPageChanged: false,
-          secondsLeft,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /**
-   * helper function to determine if timer is not in sync properly
-   *
-   * @param {number} timerSecondsLeft - actual seconds left get from setInterval
-   *
-   * @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
-    const diffInSeconds =
-      currentTime.getTime() / 1000 - this.timeWhenTimerStart.getTime() / 1000;
-
-    const secondsShouldLeft = this.secondsLeftOnLoan - diffInSeconds;
-
-    // convert in minutes
-    const whatIsleft = Math.round(timerSecondsLeft);
-    const whatShouldLeft = Math.round(secondsShouldLeft);
-
-    if (whatIsleft !== whatShouldLeft) {
-      // debug info
-      console.log(
-        `timer is gone off, let's re-sync, whatIsleft -> ${whatIsleft}, whatShouldLeft -> ${whatShouldLeft}`
-      );
-      this.secondsLeftOnLoan = secondsShouldLeft; // the seconds should left in timer again
-    }
   }
 
   /**

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 each hour as long as pages are turned.',
+  available_1hr: 'Renews automatically as long as pages are turned.',
   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: '',
+  session_expired: 'Renews automatically as long as pages are turned.',
   unavailable: 'This book is not available at this time.',
 };
 
@@ -98,8 +98,7 @@ export class GetLendingActions {
     let isBrowsing =
       lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
     if (isBrowsing) {
-      primaryTitleText =
-        'Returns automatically after 25 minutes of inactivity.';
+      primaryTitleText = bookTitles.available_1hr;
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
     }

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

@@ -144,14 +144,14 @@ export default class LoanAnanlytics {
    * @memberof LoanAnanlytics
    */
   sendEvent(eventCategory, eventAction, label, extraParams) {
-    console.log(
-      'eventCategory:-',
-      eventCategory,
-      '\t||\teventAction:-',
-      eventAction,
-      '\t||\tlabel:-',
-      label
-    );
+    // console.log(
+    //   'eventCategory:-',
+    //   eventCategory,
+    //   '\t||\teventAction:-',
+    //   eventAction,
+    //   '\t||\tlabel:-',
+    //   label
+    // );
 
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,

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

@@ -16,7 +16,7 @@ export class LoanRenewHelper {
     this.loanRenewMessage =
       'This book has been renewed for #time #unitsOfTime.';
     this.loanReturnWarning =
-      'This book will be automatically returned in #time #unitsOfTime unless you turn a page.';
+      'With no action, this book will be auto-returned in #time #unitsOfTime.';
 
     // private props
     this.result = {
@@ -39,7 +39,7 @@ export class LoanRenewHelper {
   }
 
   /**
-   * Trigger this function when user has browsed a book and change the post
+   * Trigger this function when user has browsed a book and change the page
    * - every time user change the page, we set current time in indexedDB
    * - also check if need to auto renew current loan
    *

package/src/ia-book-actions.js

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+/* eslint-disable class-methods-use-this */
 import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -23,6 +24,21 @@ export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
 };
 
+/**
+ * custom styling for modal-manager buttons
+ * TODO: lets allow modal-manager to know ia-button classes
+ */
+export const modalButtonStyle = {
+  iaButton:
+    'min-height:3.5rem;cursor:pointer;color:white;border-radius:0.4rem;border:1px solid #c5d1df;padding:4px 8px;width:auto;user-select:none;',
+  renew: 'background:#194880;width:110px;',
+  return: 'background:#d9534f;width:120px;',
+  loaderIcon:
+    'display:inline-block;width:20px;height:20px;margin-top:2px;color:white;--activityIndicatorLoadingRingColor:#fff;--activityIndicatorLoadingDotColor:#fff;',
+  refresh:
+    'background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline',
+};
+
 export default class IABookActions extends LitElement {
   static get properties() {
     return {
@@ -70,11 +86,17 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
-    this.borrowType = ''; // (browsed|borrowed)
-    this.consecutiveLoanCounts = 1; // consecutive loan count
-    this.suppressToast = false;
-    this.suppressAutoRenew = false;
+    this.borrowType = null; // (browsed|borrowed)
     this.browseTimer = undefined;
+    this.timerExecutionSeconds = 30;
+
+    /** @deprecated */
+    this.toast = undefined;
+
+    /**
+     * when user click on [return the book] button on warning modal
+     */
+    this.returnNow = false;
 
     /**
      * contains one hour auto-loan-renew time configuration
@@ -171,9 +193,6 @@ export default class IABookActions extends LitElement {
   /** End SharedObserver resize handler */
 
   async setupLendingToolbarActions() {
-    this.suppressToast = false;
-    this.suppressAutoRenew = false;
-
     this.lendingOptions = new GetLendingActions(
       this.userid,
       this.identifier,
@@ -193,7 +212,7 @@ export default class IABookActions extends LitElement {
       return action != null;
     });
 
-    this.borrowType = actions.borrowType;
+    this.borrowType = actions.borrowType ? actions.borrowType : null;
 
     const hasExpired =
       'browsingExpired' in this.lendingStatus &&
@@ -218,8 +237,11 @@ export default class IABookActions extends LitElement {
     }
 
     if (this.borrowType === 'browsed') {
+      // start timer for loan-renew
+      await this.startTimerCountdown();
+
       // start timer for browsed.
-      this.startBrowseTimer();
+      await this.startBrowseTimer();
     }
 
     // early return if not borrowed or no action-bar
@@ -248,84 +270,17 @@ export default class IABookActions extends LitElement {
    * Bind 1 hour loan auto renew event,
    * There are two events we want to use,
    * 1. BookReader:userAction - dispatched from bookreader side
-   * 2. click event to refresh the page when book is auto expired
-   * 3. IABookActions:loanRenew - dispatched from timer-countdown component
+   * 2. IABookActions:loanRenew - dispatched from timer-countdown component
    */
   bindLoanRenewEvents() {
     /**
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      console.log('** BR user Action', {
-        suppressAutoRenew: this.suppressAutoRenew,
-        borrowType: this.borrowType,
-      });
-
-      this.suppressToast = true;
-      this.closeToastManager();
-
-      if (this.suppressAutoRenew) {
-        return;
-      }
-
       if (this.borrowType === 'browsed') {
         this.autoLoanRenewChecker(true);
       }
     });
-
-    /**
-     * detect click-event on document to close toast-template
-     */
-    document.addEventListener('click', e => {
-      console.log('*** top level click handler to remove toast on click');
-      if (this.loanRenewHelper && this.loanRenewResult.secondsLeft > 0) {
-        this.suppressToast = true;
-      }
-
-      // reload when user click on book-page and book is EXPIRED
-      const hasExpired =
-        'browsingExpired' in this.lendingStatus &&
-        this.lendingStatus?.browsingExpired;
-      if (hasExpired && e.target.nodeName !== 'IA-BOOK-ACTIONS') {
-        window.location?.reload();
-      }
-    });
-
-    /**
-     * this event dispatched from timer-countdown component for:
-     * 1. user turned book page after showing auto-returned warning message
-     * 2. show warning message having remaining time
-     * @see TimerCountdown::timerCountdown
-     */
-    this.addEventListener('IABookActions:loanRenew', async event => {
-      console.log('** IABookActions:loanRenew', event.detail);
-      await this.autoLoanRenewChecker(false);
-
-      /**
-       * auto-renew is not possible in last seconds (let say 50 second) because,
-       * 1. less time to execute ajax call
-       * 2. less time to write loan on datanodes
-       * 3. less time to load images by create_token api
-       * so if seconds left is < 50, just expire the loan
-       */
-      let secondsLeft = event?.detail?.secondsLeft;
-      if (secondsLeft < 50) {
-        this.suppressAutoRenew = true;
-        this.browseHasExpired();
-      }
-
-      // show warning message with remaining time to auto returned it.
-      if (this.loanRenewResult.renewNow === false) {
-        /**
-         * 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.
-         */
-        secondsLeft -= 60;
-
-        this.loanRenewResult.secondsLeft = secondsLeft;
-        this.showToastMessage();
-      }
-    });
   }
 
   /**
@@ -347,34 +302,161 @@ export default class IABookActions extends LitElement {
   }
 
   /**
+   * 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');
+    }
+
+    this.modal.id = 'action-bar-modal';
+    await document.body.appendChild(this.modal);
+  }
+
+  /**
+   * Show the waring modal to ask user if they are still reading
+   */
+  async showWarningModal() {
+    console.log('****** showWarningModal ******');
+    await this.useModalManager();
+
+    // 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();
+    config.headline = 'Are you still here?';
+    config.showCloseButton = false;
+    config.closeOnBackdropClick = false;
+    config.message = this.loanRenewHelper?.getMessageTexts(
+      this.loanRenewResult.texts,
+      secondsLeft
+    );
+
+    const customContent = html`<br />
+      <div id="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 };
+          }}
+        >
+          Keep reading
+        </button>
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
+          @click=${event => {
+            this.changeModalState(event);
+            document.querySelector('ia-book-actions').disableActionGroup = true;
+            this.returnNow = true;
+          }}
+        >
+          Return the book
+        </button>
+      </div> `;
+
+    this.modal?.showModal({ config, customModalContent: customContent });
+  }
+
+  /**
+   * 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;
+
+    const button = event.target;
+    button.innerHTML = `<ia-activity-indicator
+      mode="processing"
+      style=${modalButtonStyle.loaderIcon}
+    ></ia-activity-indicator>`;
+
+    const parentElement = event.target.parentNode;
+    parentElement.style.pointerEvents = 'none';
+    parentElement.style.opacity = 0.8;
+  }
+
+  /**
+   * 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.';
+
+    const customContent = html`<br />
+      <div style="text-align: center">
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${() => {
+            window.location?.reload();
+          }}
+        >
+          Okay
+        </button>
+      </div> `;
+
+    this.modal?.showModal({ config, customModalContent: customContent });
+  }
+
+  /**
+   * close/hide modal-manager
+   */
+  async closeModalManager() {
+    this.modal = document.querySelector('modal-manager');
+    this.modal?.closeModal();
+  }
+
+  /**
+   * @deprecated
+   * create / select the toast-template component on DOM
+   *
+   * @memberof IABookActions
+   */
+  async useToastManager() {
+    if (!this.toast) {
+      this.toast = this.shadowRoot.querySelector('toast-template');
+
+      if (!this.toast) this.toast = document.createElement('toast-template');
+    }
+
+    await this.shadowRoot.appendChild(this.toast);
+  }
+
+  /**
+   * @deprecated
    * close/hide toast message
    */
   async closeToastManager() {
-    console.log('** closeToastManager');
-    const toastTemplate = this.shadowRoot.querySelector('toast-template');
-    if (toastTemplate) {
-      toastTemplate?.remove();
-    }
+    this.toast = this.shadowRoot.querySelector('toast-template');
+    this.toast?.remove();
   }
 
   /**
+   * @deprecated
    * Show toast messages on some specific loan renew features. e.g.
    * - show message when book is auto renewed
    * - show message when book is expired
    * - show message having remaining time when book is about to auto returned
    */
   async showToastMessage() {
-    console.log('** showToastMessage', {
-      suppressToast: this.suppressToast,
-      loanRenewResult: this.loanRenewResult,
-    });
-    if (this.suppressToast) return;
-
-    let toastTemplate = this.shadowRoot.querySelector('toast-template');
-    if (!toastTemplate) {
-      toastTemplate = document.createElement('toast-template');
-    }
-    await this.shadowRoot.appendChild(toastTemplate);
+    await this.useToastManager();
 
     // if secondsLeft < 60, consider it 1 minute
     let { secondsLeft } = this.loanRenewResult;
@@ -391,12 +473,14 @@ export default class IABookActions extends LitElement {
       secondsLeft
     );
 
-    toastTemplate.showToast({
+    this.toast?.showToast({
       config,
     });
   }
 
   async browseHasRenew() {
+    window?.IALendingIntervals?.clearAll();
+
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
     const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
 
@@ -407,24 +491,6 @@ export default class IABookActions extends LitElement {
       secondsLeftOnLoan: secondsLeft,
     };
     this.lendingStatus = currStatus;
-
-    this.startBrowseTimer();
-  }
-
-  startBrowseTimer() {
-    clearTimeout(this.browseTimer);
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
-    if (!user_has_browsed || browsingExpired) {
-      return;
-    }
-
-    this.browseTimer = setTimeout(() => {
-      this.browseHasExpired();
-    }, secondsLeftOnLoan * 1000);
   }
 
   /**
@@ -443,14 +509,31 @@ export default class IABookActions extends LitElement {
     // show message after browsed book is expired.
     this.loanRenewResult.renewNow = false;
     this.loanRenewResult.texts =
-      'This book has been automatically returned due to inactivity.';
+      'This book has been returned due to inactivity.';
 
-    this.suppressToast = false;
-    this.showToastMessage();
+    await this.showExpiredModal();
 
     window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
   }
 
+  async startBrowseTimer() {
+    clearTimeout(this.browseTimer);
+
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      console.log('user not browsed', this.lendingStatus);
+      return;
+    }
+
+    this.browseTimer = setTimeout(() => {
+      this.browseHasExpired();
+    }, secondsLeftOnLoan * 1000);
+  }
+
   /**
    * Reset timer animation state after book renewed
    */
@@ -501,8 +584,6 @@ export default class IABookActions extends LitElement {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
           .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-          .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
-          .loanRenewAtLast=${this.loanRenewTimeConfig.loanRenewAtLast}
         ></timer-countdown>`
       : nothing;
   }
@@ -524,6 +605,7 @@ 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}
@@ -545,19 +627,149 @@ export default class IABookActions extends LitElement {
     if (this.loanRenewResult.renewNow) {
       window?.IALendingIntervals?.clearAll();
 
-      this.suppressToast = false;
-      await this.browseHasRenew();
-      await this.showToastMessage();
-      await this.resetTimerCountState();
-
-      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
-
       // testing console....
       console.log('IABookActions: AutoRenewed:- ', {
         ajaxResponse: event?.detail?.data,
         loanRenewResult: this.loanRenewResult,
         secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan),
       });
+
+      /**
+       * update the lendingStatus property
+       */
+      await this.browseHasRenew();
+
+      /**
+       * reset timer countdown states
+       */
+      await this.resetTimerCountState();
+
+      // close the modal
+      this.modal?.remove();
+      this.modal?.showModal({ config: {}, customModalContent: `` });
+
+      window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
+    }
+  }
+
+  /**
+   * start timer countdown interval after loan auto-renewed
+   *
+   * @memberof IABookActions
+   */
+  startTimerCountdown() {
+    console.log('startTimerCountdown()');
+    window?.IALendingIntervals?.clearTimerCountdown();
+
+    let secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+    this.timeWhenTimerStart = new Date();
+
+    window.IALendingIntervals.timerCountdown = setInterval(async () => {
+      secondsLeft -= this.timerExecutionSeconds;
+      secondsLeft = Math.round(secondsLeft); // round number
+
+      // re-sync timer if gone off because of background window
+      await this.reSyncTimerIfGoneOff(secondsLeft);
+
+      /**
+       * execute from last 10th minute to 0th minute
+       * - 10th - to check if user has viewed
+       * - till 0th - to show warning msg with remaining time to auto expired
+       * @see IABookActions::bindLoanRenewEvents
+       */
+      if (secondsLeft <= this.loanRenewTimeConfig.loanRenewAtLast) {
+        await this.loanRenewAttempt(secondsLeft);
+      }
+
+      // clear interval in secondsLeft if less
+      if (secondsLeft <= this.timerExecutionSeconds) {
+        this.disconnectedCallback();
+        window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
+      }
+    }, this.timerExecutionSeconds * 1000);
+  }
+
+  /**
+   * helper function to determine if timer is not in sync properly
+   *
+   * @param {number} timerSecondsLeft - actual seconds left get from setInterval
+   *
+   * @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
+    const diffInSeconds =
+      currentTime.getTime() / 1000 - this.timeWhenTimerStart.getTime() / 1000;
+
+    const secondsShouldLeft =
+      this.lendingStatus.secondsLeftOnLoan - diffInSeconds;
+
+    // convert in minutes
+    const whatIsleft = Math.round(timerSecondsLeft);
+    const whatShouldLeft = Math.round(secondsShouldLeft);
+
+    if (whatIsleft !== whatShouldLeft) {
+      // debug info
+      console.log(
+        `timer is gone off, let's re-sync, whatIsleft -> ${whatIsleft}, whatShouldLeft -> ${whatShouldLeft}`
+      );
+
+      // the seconds should left in timer again
+      const currStatus = {
+        ...this.lendingStatus,
+        secondsLeftOnLoan: secondsShouldLeft,
+      };
+      this.lendingStatus = currStatus;
+    }
+  }
+
+  /**
+   * attmept to loan renew from
+   * - timer countdown
+   * - onclick on [keep reading] button
+   *
+   * @param {*} secondsLeft
+   * @memberof IABookActions
+   */
+  async loanRenewAttempt(secondsLeft) {
+    console.log('loanRenewAttempt()');
+    let loanSecondsLeft = secondsLeft;
+    /**
+     * auto-renew is not possible in last seconds (let say 50 second) because,
+     * 1. less time to execute ajax call
+     * 2. less time to write loan on datanodes
+     * 3. less time to load images by create_token api
+     * so if seconds left is < 50, just expire the loan
+     */
+    if (loanSecondsLeft < 50) {
+      console.log('if (loanSecondsLeft < 50) {');
+      await this.browseHasExpired();
+      return;
+    }
+
+    await this.autoLoanRenewChecker(false);
+
+    // show warning modal with remaining time to auto returned it.
+    if (this.loanRenewResult.renewNow === false) {
+      /**
+       * 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.
+       */
+      loanSecondsLeft -= 60;
+      this.loanRenewResult.secondsLeft = loanSecondsLeft;
+
+      this.showWarningModal();
     }
   }
 
@@ -602,7 +814,7 @@ export default class IABookActions extends LitElement {
     this.disableActionGroup = !this.disableActionGroup;
   }
 
-  /*
+  /**
    * handle lending errors occure during different operation like
    * browse book, borrow book, borrowed book token etc...
    *
@@ -656,16 +868,7 @@ export default class IABookActions extends LitElement {
 
   /* show error message if something went wrong */
   async showErrorModal(errorMsg, action) {
-    // check if this.modal passed as prop
-    if (!this.modal) {
-      this.modal = document.querySelector('modal-manager');
-
-      // check the DOM if <modal-manager> already there
-      if (!this.modal) this.modal = document.createElement('modal-manager');
-    }
-
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+    await this.useModalManager();
 
     const modalConfig = new ModalConfig({
       title: 'Lending error',
@@ -676,7 +879,7 @@ export default class IABookActions extends LitElement {
 
     if (action === 'create_token') {
       const refreshButton = html`<button
-        style="background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline"
+        style="${modalButtonStyle.refresh}"
         @click=${() => window.location.reload(true)}
       >
         refresh
@@ -693,7 +896,7 @@ export default class IABookActions extends LitElement {
         <code>errorLog: ${errorMsg}</code>`;
     }
 
-    this.modal.showModal({
+    this.modal?.showModal({
       config: modalConfig,
     });
   }

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

@@ -80,7 +80,7 @@ describe('Loan Renew Determine', () => {
     );
 
     expect(toastMsg).to.be.equal(
-      'This book will be automatically returned in 2 minutes unless you turn a page.'
+      'With no action, this book will be auto-returned in 2 minutes.'
     );
   });
 });

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

@@ -188,7 +188,9 @@ describe('Borrow status actions', () => {
       },
     ];
 
-    expect(el.primaryTitle).to.equal('');
+    expect(el.primaryTitle).to.equal(
+      'Renews automatically as long as pages are turned.'
+    );
     expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
@@ -274,7 +276,7 @@ describe('Browsing expired status', () => {
     expect(el.loanRenewResult.renewNow).to.equal(false);
     expect(el.loanRenewResult.secondsLeft).to.equal(0);
     expect(el.loanRenewResult.texts).to.equal(
-      'This book has been automatically returned due to inactivity.'
+      'This book has been returned due to inactivity.'
     );
   });
 
@@ -347,7 +349,7 @@ describe('Auto renew one hour loan', () => {
     });
     el.dispatchEvent(myEvent);
 
-    await aTimeout(1500); // wait for 1.5 second
+    await aTimeout(1900); // wait for 1.9 second
     await el.updateComplete;
 
     expect(el.loanRenewResult.texts).to.equal(