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

package/demo/index.html

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

package/package.json

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

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

@@ -204,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}
@@ -225,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}
@@ -238,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;
 
@@ -251,6 +255,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       new CustomEvent(eventName, {
         detail: {
           event: { category, action },
+          borrowType,
         },
       })
     );

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,18 +1,16 @@
 import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
-import { sentryLogs } from '../../config/sentry-events.js';
-import { analyticsCategories } from '../../config/analytics-event-and-category.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 {
@@ -25,202 +23,100 @@ export default class ActionsHandler extends LitElement {
      */
     this.waitUntillBorrowComplete = 6; // in seconds
 
-    this.bindEvents();
-  }
-
-  /**
-   * reponsible to sent events to GA
-   *
-   * @param {string} eventCategory
-   * @param {string} eventAction
-   * @memberof ActionsHandler
-   */
-  sendEvent(eventCategory, eventAction, label, extraParams) {
-    window?.archive_analytics?.send_event_no_sampling(
-      eventCategory,
-      eventAction,
-      label || `identifier=${this.identifier}`,
-      extraParams
-    );
-  }
+    /**
+     * bind events for lending bar
+     * @type {object}
+     */
+    this.loanAnanlytics = new LoanAnanlytics();
 
-  get getLoanCountStorageKey() {
-    return `br-browse-${this.identifier}`;
+    /**
+     * bind events for lending bar
+     * @type {Function}
+     */
+    this.bindEvents();
   }
 
   bindEvents() {
-    this.addEventListener('browseBook', ({ detail }) => {
+    this.addEventListener('browseBook', () => {
       this.handleBrowseIt();
-      this.setConsecutiveLoanCounts('browseBook');
-      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('browseBookAgain');
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browseagain');
     });
 
-    this.addEventListener('autoRenew', ({ detail }) => {
+    this.addEventListener('autoRenew', () => {
       this.handleLoanRenewNow();
-      this.setConsecutiveLoanCounts('autoRenew');
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autorenew');
     });
 
-    this.addEventListener('autoReturn', ({ detail }) => {
-      this.setConsecutiveLoanCounts('autoReturn');
-      const { category, action } = detail.event;
-      this.sendEvent(category, action);
+    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);
     });
   }
 
-  /**
-   * store consecutive one hour loan counts in cookies for GA
-   *
-   * There are two possible way of consecutive loan
-   * - book is browsed again just after getting expired
-   * - book loan is auto renewed for another hour
-   *
-   * @param {string} action - user action on book
-   * @return {void}
-   * @memberof ActionsHandler
-   */
-  async setConsecutiveLoanCounts(action = '') {
-    try {
-      await this.getConsecutiveLoanRecord(action);
-
-      const date = new Date();
-      date.setHours(date.getHours() + 2); // 2 hours
-
-      // set new value
-      Cookies.setItem(
-        this.getLoanCountStorageKey,
-        JSON.stringify(this.lendingEventCounts),
-        date,
-        '/'
-      );
-    } catch (error) {
-      console.log(error);
-      window?.Sentry?.captureException(
-        `${sentryLogs.setConsecutiveLoanCounts} - Error: ${error}`
-      );
-      this.sendEvent('Cookies-Error-Actions', error);
-    }
-  }
-
-  /**
-   * Get consecutive loan count records from cookies for GA
-   *
-   * @param {string} action
-   * @memberof ActionsHandler
-   */
-  async getConsecutiveLoanRecord(action) {
-    const gaStats = { browse: 0, renew: 0, expire: 0 };
-
-    this.lendingEventCounts = JSON.parse(
-      Cookies.getItem(this.getLoanCountStorageKey)
-    );
-
-    let browse = this.lendingEventCounts?.browse ?? 0;
-    let renew = this.lendingEventCounts?.renew ?? 0;
-    let expire = this.lendingEventCounts?.expire ?? 0;
-
-    if (this.lendingEventCounts !== null) {
-      switch (action) {
-        case 'browseBook' || 'browseBookAgain':
-          browse = browse ? Number(browse) + 1 : 1;
-          gaStats.browse = browse;
-          break;
-
-        case 'autoRenew':
-          renew = renew ? Number(renew) + 1 : 1;
-          gaStats.renew = renew;
-          this.sendEvent(
-            analyticsCategories.browse,
-            `BookAutoRenewedFor${renew}`
-          );
-          break;
-
-        case 'autoReturn':
-          expire = expire ? Number(expire) + 1 : 1;
-          gaStats.expire = expire;
-
-          renew = 0; // reset renew count when book is expired
-          break;
-        default:
-          break;
-      }
-    }
-
-    // store these counts in cookies
-    this.lendingEventCounts = { browse, renew, expire };
-
-    // send google analytics events
-    this.sendEvent(
-      analyticsCategories.browse,
-      `browse${gaStats.browse}-autoRenew${gaStats.renew}-autoExpire${gaStats.expire}`,
-      '',
-      {
-        browse: gaStats.browse,
-        renew: gaStats.renew,
-        expire: gaStats.expire,
-      }
-    );
-  }
-
   handleBrowseIt() {
     const action = 'browse_book';
     this.dispatchToggleActionGroup();
@@ -267,7 +163,10 @@ export default class ActionsHandler extends LitElement {
       identifier: this.identifier,
       success: () => {
         this.deleteLoanCookies();
-        URLHelper.goToUrl(this.returnUrl, true);
+        // URLHelper.goToUrl(this.returnUrl, true);
+        setTimeout(() => {
+          URLHelper.goToUrl(this.returnUrl, true);
+        }, this.waitUntillBorrowComplete * 1000);
       },
       error: data => {
         this.dispatchActionError(action, data);
@@ -334,7 +233,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', {

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

@@ -0,0 +1,159 @@
+/* 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
+      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(
+      Cookies.getItem(this.getLoanCountStorageKey)
+    );
+
+    this.gaStats = this.lendingEventCounts ?? {
+      browse: 0,
+      renew: 0,
+      expire: 0,
+    };
+
+    let { browse, renew, expire } = this.lendingEventCounts ?? 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} browse001|autorenew001
+   * @memberof LoanAnanlytics
+   */
+  paddedNumber(number) {
+    return number.toString().padStart(3, '0');
+  }
+
+  /**
+   * 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-renew-helper.js

@@ -89,6 +89,7 @@ export class LoanRenewHelper {
     ) {
       this.result.texts = this.loanReturnWarning;
       this.result.renewNow = false; // not viewed
+      console.log('warning msg appears');
     } else if (pageChangedTime >= pageChangeTimeFrame) {
       this.result.texts = '';
       this.result.renewNow = true; // viewed in last time frame

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

@@ -1,4 +1,5 @@
 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';
@@ -17,6 +18,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();
   }
 
@@ -29,19 +37,18 @@ export class LoanTokenPoller {
 
     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);
-        }
-      }
+      // 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}`
+      //     );
+      //   }
+      // }
 
       // Do an initial token, then set an interval
       this.handleLoanTokenPoller(true);
@@ -60,12 +67,12 @@ export class LoanTokenPoller {
       }
 
       // event category and action for browsing book access
-      const category = `${this.borrowType}BookAccess`;
-      const action = `${
-        this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
-      }${consecutiveLoanCounts}`;
+      // const category = `${this.borrowType}BookAccess`;
+      // const action = `${
+      //   this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
+      // }${consecutiveLoanCounts}`;
 
-      this.sendEvent(category, action);
+      // this.loanAnalytics?.sendEvent(category, action, this.identifier);
     } else {
       window?.Sentry?.captureMessage(
         `${sentryLogs.bookAccessed} - not borrowed`
@@ -76,14 +83,6 @@ export class LoanTokenPoller {
     }
   }
 
-  sendEvent(eventCategory, eventAction) {
-    window?.archive_analytics?.send_event_no_sampling(
-      eventCategory,
-      eventAction,
-      `identifier=${this.identifier}`
-    );
-  }
-
   async handleLoanTokenPoller(isInitial = false) {
     const action = 'create_token';
     ActionsHandlerService({
@@ -98,7 +97,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

@@ -11,6 +11,7 @@ import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
 import './components/timer-countdown.js';
+import './core/config/ia-lending-intervals.js';
 
 import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
@@ -18,9 +19,6 @@ 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 './core/config/ia-lending-intervals.js';
-import * as Cookies from './core/services/doc-cookies.js';
-
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
 };
@@ -75,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;
 
     /**
@@ -173,6 +172,7 @@ export default class IABookActions extends LitElement {
 
   async setupLendingToolbarActions() {
     this.suppressToast = false;
+    this.suppressAutoRenew = false;
 
     this.lendingOptions = new GetLendingActions(
       this.userid,
@@ -259,6 +259,10 @@ export default class IABookActions extends LitElement {
       this.suppressToast = true;
       this.closeToastManager();
 
+      if (this.suppressAutoRenew) {
+        return;
+      }
+
       if (this.borrowType === 'browsed') {
         this.autoLoanRenewChecker(true);
       }
@@ -290,6 +294,11 @@ export default class IABookActions extends LitElement {
     this.addEventListener('IABookActions:loanRenew', async event => {
       await this.autoLoanRenewChecker(false);
 
+      // maybe the renew with-in last 1 minute is too short of a transition time between xhr, loading images etc... let NOT renew in last 50 seconds.
+      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;
@@ -405,9 +414,6 @@ export default class IABookActions extends LitElement {
     await this.localCache.delete(`${this.identifier}-loanTime`);
     await this.localCache.delete(`${this.identifier}-pageChangedTime`);
 
-    // remove loan-renew-count-<identifier> cookie
-    Cookies.removeItem(`loan-renew-count-${this.identifier}`);
-
     // show message after browsed book is expired.
     this.loanRenewResult.renewNow = false;
     this.loanRenewResult.texts =
@@ -507,8 +513,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();
 
@@ -518,12 +526,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,
+        secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan),
         resetTimerCountState: this._shadowRoot.querySelector('timer-countdown'),
       });
     }