@internetarchive/ia-book-actions 0.1.5 → 0.1.6

package/demo/index.html

@@ -128,14 +128,14 @@
     iaBookActions.modalConfig = modalConfig;
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
     iaBookActions.tokenDelay = 2; // 2 seconds
-    iaBookActions.returnUrl = 'https://openlibrary.org';
+    iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 20, loanRenewAtLast: 15, pageChangedInLast: 5 };
-    let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 290, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 10, loanRenewAtLast: 5, pageChangedInLast: 5 };
+    let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 600, pageChangedInLast: 900 };
 
-    iaBookActions.loanRenewTimeConfig = loanTotalTime5Min;
+    iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
     let secondsLeftOnLoan = iaBookActions.loanRenewTimeConfig.loanTotalTime;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

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

@@ -32,7 +32,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
       returnUrl: { type: String },
-      renewNow: { type: Boolean },
+      autoRenew: { type: Boolean },
+      autoReturn: { type: Boolean },
     };
   }
 
@@ -52,7 +53,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
     this.returnUrl = '';
-    this.renewNow = false;
+    this.autoRenew = false;
+    this.autoReturn = false;
   }
 
   updated(changed) {
@@ -63,21 +65,33 @@ export class CollapsibleActionGroup extends ActionsHandler {
       this.resetActions();
     }
 
-    if (changed.has('renewNow') && this.renewNow === true) {
-      this.dispatchLoanRenewEvent();
+    if (changed.has('autoRenew') && this.autoRenew === true) {
+      this.dispatchLoanEvent('autoRenew');
+    }
+
+    if (changed.has('autoReturn') && this.autoReturn === true) {
+      this.dispatchLoanEvent('autoReturn');
     }
   }
 
-  // dispatch this event to loan renew handler
-  dispatchLoanRenewEvent() {
-    const { category, action } = {
-      category: analyticsCategories.browse,
-      action: analyticsActions.browseLoanRenew,
-    };
+  /**
+   * dispatch event when book is auto renewed / returned
+   * listen these events in action-handler.js
+   * @see ActionsHandler
+   *
+   * @param {string} event - autoRenew|autoReturn
+   * @memberof CollapsibleActionGroup
+   */
+  dispatchLoanEvent(event) {
+    const category = analyticsCategories.browse;
+    const action =
+      event === 'autoRenew'
+        ? analyticsActions.browseAutoRenew
+        : analyticsActions.browseAutoReturn;
 
     // listen in action-handler.js to execute ajax call on petabox.
     this.dispatchEvent(
-      new CustomEvent('loanRenew', {
+      new CustomEvent(event, {
         detail: {
           event: { category, action },
         },
@@ -190,7 +204,11 @@ export class CollapsibleActionGroup extends ActionsHandler {
         href="${action.url}"
         target=${action.target}
         @click=${() => {
-          this.clickHandler(action.id, action.analyticsEvent);
+          this.clickHandler(
+            action.id,
+            action.analyticsEvent,
+            action?.borrowType
+          );
         }}
       >
         ${action.id === 'purchaseBook' ? purchaseIcon : ''} ${action.text}
@@ -211,7 +229,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     return html`<button
       class="ia-button ${action.className} ${initialButton ? 'initial' : ''}"
       @click=${() => {
-        this.clickHandler(action.id, analyticsEvent);
+        this.clickHandler(action.id, analyticsEvent, action?.borrowType);
       }}
     >
       ${action.text}
@@ -224,10 +242,10 @@ export class CollapsibleActionGroup extends ActionsHandler {
    * @param { object } gaEvent - contains analytics event action and category
    *   @param { string } gaEvent.category
    *   @param { string } gaEvent.action
-   *
+   * @param { string } borrowType browse|borrow
    * @fires CollapsibleActionGroup#{eventName} - (will be browseBook, borrowBook etc...)
    */
-  clickHandler(eventName, gaEvent) {
+  clickHandler(eventName, gaEvent, borrowType = '') {
     this.dropdownState = 'close';
     this.dropdownArrow = dropdownClosed;
 
@@ -237,6 +255,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       new CustomEvent(eventName, {
         detail: {
           event: { category, action },
+          borrowType,
         },
       })
     );

package/src/components/timer-countdown.js

@@ -41,7 +41,7 @@ export default class TimerCountdown extends LitElement {
      * delay seconds in setInterval function
      * @type {number}
      */
-    this.timerExecutionSeconds = 0;
+    this.timerExecutionSeconds = 60;
   }
 
   disconnectedCallback() {
@@ -61,8 +61,6 @@ export default class TimerCountdown extends LitElement {
   timerCountdown() {
     this.disconnectedCallback();
 
-    // - let just execute setInterval in every 1 minute
-    this.timerExecutionSeconds = 60;
     let secondsLeft = this.secondsLeftOnLoan;
 
     // store current time

package/src/core/config/analytics-event-and-category.js

@@ -13,7 +13,8 @@ export const analyticsCategories = {
 export const analyticsActions = {
   browse: 'Borrow-1Hour',
   browseAgain: 'Borrow-Again',
-  browseLoanRenew: 'Borrow-Loan-Renew',
+  browseAutoRenew: 'AutoRenewBook',
+  browseAutoReturn: 'AutoReturnBook',
   borrow: 'Borrow-14Days',
   waitlistJoin: 'JoinWaitlist',
   waitlistLeave: 'LeaveWaitlist',

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

@@ -11,6 +11,18 @@
  * @type {Object}
  */
 window.IALendingIntervals = {
+  /**
+   * store loan token poller interval
+   * @see LoanTokenPoller::bookAccessed
+   */
+  tokenPoller: 0,
+
+  /**
+   * store timer-countdown interval
+   * @see TimerCountdown::timerCountdown
+   */
+  timerCountdown: 0,
+
   /**
    * clear interval for create_token api
    */

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

@@ -70,6 +70,7 @@ export default class ActionsConfig {
         category: eventCategory,
         action: this.analyticsActions.doneBorrowing,
       },
+      borrowType: this.lendingStatus.user_has_browsed ? 'browse' : 'borrow',
     };
   }
 

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

@@ -1,17 +1,16 @@
 import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
-import { sentryLogs } from '../../config/sentry-events.js';
 
 import ActionsHandlerService from './actions-handler-service.js';
+import LoanAnanlytics from '../loan-analytics.js';
 import * as Cookies from '../doc-cookies.js';
 
 /**
  * These are callback functions calling from actions-config.js file.
  *
- * ActionsHandlerService is a function being used to execute
- * APIs based of the request made by user. It consist some parameters are as follows:-
- * 1. identifier: book name.
+ * ActionsHandlerService is a function being used to execute APIs based of the request made by user.
+ *
  */
 
 export default class ActionsHandler extends LitElement {
@@ -24,86 +23,97 @@ export default class ActionsHandler extends LitElement {
      */
     this.waitUntillBorrowComplete = 6; // in seconds
 
-    this.bindEvents();
-  }
+    /**
+     * bind events for lending bar
+     * @type {object}
+     */
+    this.loanAnanlytics = new LoanAnanlytics();
 
-  sendEvent(eventCategory, eventAction) {
-    window?.archive_analytics?.send_event(
-      eventCategory,
-      eventAction,
-      `identifier=${this.identifier}`
-    );
+    /**
+     * bind events for lending bar
+     * @type {Function}
+     */
+    this.bindEvents();
   }
 
   bindEvents() {
-    this.addEventListener('browseBook', ({ detail }) => {
+    this.addEventListener('browseBook', () => {
       this.handleBrowseIt();
-      this.setConsecutiveLoanCounts();
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browse');
     });
 
-    this.addEventListener('browseBookAgain', ({ detail }) => {
+    this.addEventListener('browseBookAgain', () => {
       this.handleBrowseIt();
-      this.setConsecutiveLoanCounts('browseAgain');
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browseagain');
     });
 
-    this.addEventListener('loanRenew', ({ detail }) => {
-      this.handleLoanRenew();
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+    this.addEventListener('autoRenew', () => {
+      this.handleLoanRenewNow();
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autorenew');
+    });
+
+    this.addEventListener('autoReturn', () => {
+      this.deleteLoanCookies();
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autoreturn');
     });
 
     this.addEventListener('returnNow', ({ detail }) => {
+      // use loan stats count when 1-hour borrow is active
+      if (detail?.borrowType === 'browse') {
+        this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'return');
+      }
+
       this.handleReturnIt();
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+
+      // send these events if 14-day borrow return
+      if (detail?.borrowType === 'borrow') {
+        const { category, action } = detail.event;
+        this.loanAnanlytics?.sendEvent(category, action, this.identifier);
+      }
     });
 
     this.addEventListener('borrowBook', ({ detail }) => {
       this.handleBorrowIt();
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('loginAndBorrow', ({ detail }) => {
       this.handleLoginOk();
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('leaveWaitlist', ({ detail }) => {
       this.handleRemoveFromWaitingList();
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('joinWaitlist', ({ detail }) => {
       this.handleReserveIt();
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('purchaseBook', ({ detail }) => {
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('adminAccess', ({ detail }) => {
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('exitAdminAccess', ({ detail }) => {
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
 
     this.addEventListener('bookTitleBar', ({ detail }) => {
       const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.sendEvent(category, action, this.identifier);
     });
   }
 
@@ -124,7 +134,7 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
-  handleLoanRenew() {
+  handleLoanRenewNow() {
     const action = 'renew_loan';
 
     ActionsHandlerService({
@@ -220,7 +230,7 @@ export default class ActionsHandler extends LitElement {
    */
   dispatchActionError(action, data = {}) {
     // send LendingServiceError to GA
-    this.sendEvent('LendingServiceError', action);
+    this.loanAnanlytics?.sendEvent('LendingServiceError', action);
 
     this.dispatchEvent(
       new CustomEvent('lendingActionError', {
@@ -271,31 +281,6 @@ export default class ActionsHandler extends LitElement {
     }, this.waitUntillBorrowComplete * 1000);
   }
 
-  // save consecutive loan count for borrow
-  async setConsecutiveLoanCounts(action = '') {
-    try {
-      let newCount = 1;
-      const storageKey = `loan-count-${this.identifier}`;
-      const existingCount = Cookies.getItem(storageKey);
-
-      // increase browse-count by 1 when you consecutive reading a book.
-      if (action === 'browseAgain' && existingCount !== undefined) {
-        newCount = existingCount ? Number(existingCount) + 1 : 1;
-      }
-
-      const date = new Date();
-      date.setHours(date.getHours() + 2); // 2 hours
-
-      // set new value
-      Cookies.setItem(storageKey, newCount, date, '/');
-    } catch (error) {
-      window?.Sentry?.captureException(
-        `${sentryLogs.setConsecutiveLoanCounts} - Error: ${error}`
-      );
-      this.sendEvent('Cookies-Error-Actions', error);
-    }
-  }
-
   /**
    * set browse time in indexedDB
    */

package/src/core/services/doc-cookies.js

@@ -62,7 +62,7 @@ export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
 
 /**
  * BROKEN Remove specific key's value from cookie
- * @fixme hasItem isn't even implemented! This will always error.
+ *
  * @param {string} sKey cookie name
  * @param {string} [sPath] path of current item
  * @param {string} [sDomain]
@@ -81,3 +81,25 @@ export function removeItem(sKey, sPath, sDomain) {
 
   return true;
 }
+
+/**
+ * determine if a specific cookie is exist
+ *
+ * @param {string} sKey cookie name
+ *
+ * @returns {boolean}
+ */
+export function hasItem(sKey) {
+  const reCNameAllowed = /^(?:expires|max\-age|path|domain|secure|samesite|httponly)$/i;
+
+  // eslint-disable-next-line
+  if (!sKey || reCNameAllowed.test(sKey)) {
+    return false;
+  }
+
+  return new RegExp(
+    '(?:^|;\\s*)' +
+      encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&') +
+      '\\s*\\='
+  ).test(document.cookie);
+}

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

@@ -0,0 +1,163 @@
+/* eslint-disable class-methods-use-this */
+
+import { analyticsCategories } from '../config/analytics-event-and-category.js';
+import * as Cookies from './doc-cookies.js';
+
+/**
+ * This class is used to send different GA events for loan system.
+ */
+export default class LoanAnanlytics {
+  constructor() {
+    this.identifier = undefined;
+
+    /**
+     * contains the counts we send to GA
+     * @type {object}
+     * - @param {number} - browse count
+     * - @param {number} - renew count
+     * - @param {number} - expire count
+     */
+    this.gaStats = {};
+  }
+
+  /**
+   * store loan stats count in cookies to remember the count we need to sent GA
+   *
+   * @param {string} identifier - book id
+   * @param {string} action - user action on book
+   * @return {void}
+   * @memberof ActionsHandler
+   */
+  async storeLoanStatsCount(idetifier, action = '') {
+    this.identifier = idetifier;
+
+    try {
+      await this.getLoanStatsCount(action);
+
+      const date = new Date();
+      date.setHours(date.getHours() + 2); // 2 hours
+
+      // set new value
+      await Cookies.setItem(
+        this.getLoanCountStorageKey,
+        JSON.stringify(this.lendingEventCounts),
+        date,
+        '/'
+      );
+    } catch (error) {
+      console.log(error);
+      this.sendEvent('Cookies-Error-Actions', error, this.identifier);
+    }
+  }
+
+  /**
+   * get loan stats count from cookies for GA
+   *
+   * @param {string} action browse|autorenew|etc...
+   * @memberof ActionsHandler
+   */
+  async getLoanStatsCount(action) {
+    this.lendingEventCounts = JSON.parse(
+      await Cookies.getItem(this.getLoanCountStorageKey)
+    );
+
+    this.gaStats = this.lendingEventCounts ?? {
+      browse: 0,
+      renew: 0,
+      expire: 0,
+    };
+
+    let browse = this.lendingEventCounts?.browse ?? 0;
+    let renew = this.lendingEventCounts?.renew ?? 0;
+    let expire = this.lendingEventCounts?.expire ?? 0;
+
+    switch (action) {
+      case 'browse' || 'browseagain':
+        browse = browse ? Number(browse) + 1 : 1;
+        this.gaStats.browse = browse;
+
+        // reset renew and expire count
+        renew = 0;
+        expire = 0;
+        break;
+
+      case 'autorenew':
+        renew = renew ? Number(renew) + 1 : 1;
+        this.gaStats.renew = renew;
+        break;
+
+      case 'return' || 'autoreturn':
+        expire = expire ? Number(expire) + 1 : 1;
+        this.gaStats.expire = expire;
+
+        // reset renew and expire count
+        renew = 0;
+        expire = 0;
+        break;
+      default:
+        break;
+    }
+
+    // store these counts in cookies
+    this.lendingEventCounts = { browse, renew, expire };
+
+    // obtain GA category, event
+    const category = analyticsCategories.browse;
+    const event = `browse${this.paddedNumber(
+      this.gaStats?.browse
+    )}-autorenew${this.paddedNumber(this.gaStats?.renew)}:${action}`;
+
+    // send google analytics events
+    this.sendEvent(category, event, this.identifier);
+  }
+
+  /**
+   * get zero padded number
+   *
+   * @param {number} number
+   * @return {string} 001|010
+   * @memberof LoanAnanlytics
+   */
+  paddedNumber(number) {
+    if (number) return number.toString().padStart(3, '0');
+
+    return '000';
+  }
+
+  /**
+   * get storage key for loan stats count
+   *
+   * @readonly
+   * @memberof LoanAnanlytics
+   */
+  get getLoanCountStorageKey() {
+    return `br-browse-${this.identifier}`;
+  }
+
+  /**
+   * reponsible to sent events to GA
+   *
+   * @param {*} eventCategory
+   * @param {*} eventAction
+   * @param {*} label
+   * @param {*} extraParams
+   * @memberof LoanAnanlytics
+   */
+  sendEvent(eventCategory, eventAction, label, extraParams) {
+    console.log(
+      'eventCategory:-',
+      eventCategory,
+      '\t||\teventAction:-',
+      eventAction,
+      '\t||\tlabel:-',
+      label
+    );
+
+    window?.archive_analytics?.send_event_no_sampling(
+      eventCategory,
+      eventAction,
+      label || this.identifier,
+      extraParams
+    );
+  }
+}

package/src/core/services/loan-token-poller.js

@@ -1,8 +1,7 @@
 import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+import LoanAnanlytics from './loan-analytics.js';
 import { sentryLogs } from '../config/sentry-events.js';
 
-import * as Cookies from './doc-cookies.js';
-
 /**
  * This class is used to create loan token for borrowed books
  *
@@ -17,6 +16,13 @@ export class LoanTokenPoller {
     this.pollerDelay = pollerDelay; // value in seconds
 
     this.loanTokenInterval = undefined;
+
+    /**
+     * loan analytics instance
+     * @see loan-analytics.js
+     */
+    this.loanAnalytics = new LoanAnanlytics();
+
     this.bookAccessed();
   }
 
@@ -25,24 +31,7 @@ export class LoanTokenPoller {
   }
 
   async bookAccessed() {
-    let consecutiveLoanCounts = 1;
-
     if (this.borrowType) {
-      // send consecutiveLoanCounts for browsed books only.
-      if (this.borrowType === 'browsed') {
-        try {
-          const existingCount = Cookies.getItem(
-            `loan-count-${this.identifier}`
-          );
-          consecutiveLoanCounts = existingCount ?? 1;
-        } catch (error) {
-          window?.Sentry?.captureException(
-            `${sentryLogs.enableBookAcces} - CookieError: ${error}`
-          );
-          this.sendEvent('Cookies-Error-Token', error);
-        }
-      }
-
       // Do an initial token, then set an interval
       this.handleLoanTokenPoller(true);
 
@@ -58,14 +47,6 @@ export class LoanTokenPoller {
           this.handleLoanTokenPoller();
         }, this.pollerDelay * 1000);
       }
-
-      // event category and action for browsing book access
-      const category = `${this.borrowType}BookAccess`;
-      const action = `${
-        this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
-      }${consecutiveLoanCounts}`;
-
-      this.sendEvent(category, action);
     } else {
       window?.Sentry?.captureMessage(
         `${sentryLogs.bookAccessed} - not borrowed`
@@ -76,14 +57,6 @@ export class LoanTokenPoller {
     }
   }
 
-  sendEvent(eventCategory, eventAction) {
-    window?.archive_analytics?.send_event(
-      eventCategory,
-      eventAction,
-      `identifier=${this.identifier}`
-    );
-  }
-
   async handleLoanTokenPoller(isInitial = false) {
     const action = 'create_token';
     ActionsHandlerService({
@@ -98,7 +71,11 @@ export class LoanTokenPoller {
         );
 
         // send LendingServiceError to GA
-        this.sendEvent('LendingServiceLoanError', action);
+        this.loanAnalytics?.sendEvent(
+          'LendingServiceLoanError',
+          action,
+          this.identifier
+        );
       },
       success: () => {
         if (isInitial) this.successCallback();

package/src/ia-book-actions.js

@@ -73,6 +73,7 @@ export default class IABookActions extends LitElement {
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
     this.suppressToast = false;
+    this.suppressAutoRenew = false;
     this.browseTimer = undefined;
 
     /**
@@ -171,6 +172,7 @@ export default class IABookActions extends LitElement {
 
   async setupLendingToolbarActions() {
     this.suppressToast = false;
+    this.suppressAutoRenew = false;
 
     this.lendingOptions = new GetLendingActions(
       this.userid,
@@ -236,16 +238,10 @@ export default class IABookActions extends LitElement {
     /**
      * tokenPoller determines if user has loan token for this book
      * - if book is going to renew, need to wait until renew is completed
-     * - otherwise execute immediately
      */
-    setTimeout(
-      () => {
-        if (!hasExpired) this.startLoanTokenPoller();
-      },
-
-      // if book is renew while reading, let's wait to execute create-token api
-      this.loanRenewResult.renewNow ? this.tokenDelay * 1000 : 100
-    );
+    setTimeout(() => {
+      if (!hasExpired) this.startLoanTokenPoller();
+    }, 100);
   }
 
   /**
@@ -260,10 +256,18 @@ export default class IABookActions extends LitElement {
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      console.log('user action');
+      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);
       }
@@ -273,6 +277,7 @@ export default class IABookActions extends LitElement {
      * 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;
       }
@@ -293,8 +298,16 @@ export default class IABookActions extends LitElement {
      * @see TimerCountdown::timerCountdown
      */
     this.addEventListener('IABookActions:loanRenew', async event => {
+      console.log('** IABookActions:loanRenew', event.detail);
       await this.autoLoanRenewChecker(false);
 
+      // renew in last seconds (let say 50 second) not possible because,
+      // - very short to renew on datanodes by hitting petabox API
+      // - loading images by create loan token
+      if (event?.detail?.secondsLeft < 50) {
+        this.suppressAutoRenew = true;
+      }
+
       // show warning message with remaining time to auto returned it.
       if (this.loanRenewResult.renewNow === false) {
         this.loanRenewResult.secondsLeft = event.detail.secondsLeft;
@@ -325,6 +338,7 @@ export default class IABookActions extends LitElement {
    * close/hide toast message
    */
   async closeToastManager() {
+    console.log('** closeToastManager');
     const toastTemplate = this.shadowRoot.querySelector('toast-template');
     if (toastTemplate) {
       toastTemplate?.remove();
@@ -338,6 +352,10 @@ export default class IABookActions extends LitElement {
    * - 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');
@@ -492,7 +510,8 @@ export default class IABookActions extends LitElement {
         .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
-        ?renewNow=${this.loanRenewResult.renewNow}
+        ?autoRenew=${this.loanRenewResult.renewNow}
+        ?autoReturn=${this.lendingStatus.browsingExpired}
         @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
@@ -508,8 +527,10 @@ export default class IABookActions extends LitElement {
    * - show success message
    * - then change the remaining time
    * - reset timer state
+   * @param {object} event
    */
-  async handleLoanAutoRenewed() {
+  async handleLoanAutoRenewed(event) {
+    // TODO: just read DATA variable here to apply security { action, data }
     if (this.loanRenewResult.renewNow) {
       window?.IALendingIntervals?.clearAll();
 
@@ -519,13 +540,12 @@ export default class IABookActions extends LitElement {
       await this.resetTimerCountState();
 
       window?.Sentry?.captureMessage(`${sentryLogs.bookHasRenewed}`);
-      // TODO: analytics?? for consecutive renew.....
 
       // testing console....
-      console.log(sentryLogs.bookHasRenewed, {
+      console.log('IABookActions: AutoRenewed:- ', {
+        ajaxResponse: event?.detail?.data,
         loanRenewResult: this.loanRenewResult,
-        browseHasRenew: this.lendingStatus.secondsLeftOnLoan,
-        resetTimerCountState: this._shadowRoot.querySelector('timer-countdown'),
+        secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan),
       });
     }
   }

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

@@ -64,8 +64,6 @@ describe('<collapsible-action-group>', () => {
     expect(primaryActionContainer.classList.contains('action-buttons')).to.be
       .true;
 
-    expect(el.sendEvent).to.exist;
-
     let eName;
     let eAnalytics;
     const manualClickStub = (eventName, gaEvent) => {

package/test/components/timer-countdown.test.js

@@ -1,10 +1,16 @@
 import { html, fixture, expect, aTimeout } from '@open-wc/testing';
+import '../../src/ia-book-actions.js';
 import '../../src/components/timer-countdown.js';
 
-const container = ({ secondsLeftOnLoan, loanRenewTimeConfig } = {}) =>
+const container = ({
+  secondsLeftOnLoan,
+  loanTotalTime,
+  loanRenewAtLast,
+} = {}) =>
   html`<timer-countdown
     .secondsLeftOnLoan=${secondsLeftOnLoan}
-    .loanRenewTimeConfig=${loanRenewTimeConfig}
+    .loanTotalTime=${loanTotalTime}
+    .loanRenewAtLast=${loanRenewAtLast}
   ></timer-countdown>`;
 
 describe('<timer-countdown>', () => {
@@ -12,27 +18,21 @@ describe('<timer-countdown>', () => {
     const el = await fixture(
       container({
         secondsLeftOnLoan: 0, // in seconds
-        loanRenewTimeConfig: {
-          loanTotalTime: 14, // in seconds
-          loanRenewAtLast: 5, // in seconds
-          pageChangedInLast: 5, // in seconds
-        },
+        loanTotalTime: 14,
+        loanRenewAtLast: 5,
       })
     );
 
     await el.updateComplete;
-    expect(el.timerInterval).to.be.undefined;
+    // expect(window.IALendingIntervals.timerCountdown).to.be.undefined;
   });
 
   it('timer interval is not undefined when loan is active', async () => {
     const el = await fixture(
       container({
         secondsLeftOnLoan: 2, // in seconds
-        loanRenewTimeConfig: {
-          loanTotalTime: 14, // in seconds
-          loanRenewAtLast: 5, // in seconds
-          pageChangedInLast: 5, // in seconds
-        },
+        loanTotalTime: 14,
+        loanRenewAtLast: 5,
       })
     );
 
@@ -40,6 +40,6 @@ describe('<timer-countdown>', () => {
     await el.updateComplete;
 
     expect(el.secondsLeftOnLoan).to.equal(2);
-    expect(el.timerInterval).to.not.be.undefined;
+    // expect(el.timerCountdown).to.not.be.undefined;
   });
 });

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

@@ -27,7 +27,7 @@ describe('Get Lending Actions', () => {
     expect(actions.primaryActions.length).to.equal(3);
     expect(actions.primaryActions[0].text).to.equal('Borrow');
     expect(actions.primaryActions[1].text).to.equal('Borrow for 14 days');
-    expect(actions.secondaryActions[1].text).to.equal('Purchase at');
+    expect(actions.secondaryActions[1].text).to.equal('Purchase at ');
   });
 
   it('Borrowable without user', async () => {