@internetarchive/ia-book-actions 0.0.29-alpha20 → 0.0.29-alpha22

package/demo/index.html

@@ -127,9 +127,9 @@
     iaBookActions.returnUrl = 'https://openlibrary.org';
     iaBookActions.localCache = localCache;
     iaBookActions.loanRenewConfig = {
-      totalTime: 40, // 60 second = 1 min
-      autoCheckAt: 35, // totalTime - 10th minute
-      pageChangedInLast: 5, // within last 15 second/minute 
+      totalTime: 20, // 60 second = 1 min
+      autoCheckAt: 15, // totalTime - 10th minute
+      pageChangedInLast: 15, // within last 15 second/minute 
     };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
@@ -226,8 +226,11 @@
           lendingStatus1.user_has_browsed = false;
         }
 
-        let lending = {...defaultLendingStatus, ...lendingStatus1};
-        iaBookActions.lendingStatus = lending;
+        // wait for a while
+        setTimeout(() => {
+          let lending = {...defaultLendingStatus, ...lendingStatus1};
+          iaBookActions.lendingStatus = lending;
+        }, 10);
       });
     });
 
@@ -281,7 +284,7 @@
       // dispatch event to say book page has flipped
       document.querySelector('ia-book-actions').dispatchEvent(
         new CustomEvent('BookReader:pageChanged', {
-          detail: { isPageChanged: true },
+          detail: { hasPageChanged: true },
           bubbles: true,
           composed: true,
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha20",
+  "version": "0.0.29-alpha22",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,8 +22,8 @@
     "@internetarchive/local-cache": "^0.2.0",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.0.1-alpha5",
-    "lit": "^2.2.1"
+    "@internetarchive/toast-manager": "0.0.1-alpha8",
+    "lit": "^2.5.0"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

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

@@ -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: 12,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/assets/styles/collapsible-action-group.js

@@ -12,6 +12,7 @@ export default css`
   }
   .actiongroup {
     display: flex;
+    margin-right: 10px;
   }
   .action-buttons {
     display: inline-flex;
@@ -33,12 +34,12 @@ export default css`
   }
   .primary {
     background-color: ${whiteColor};
+    margin-right: 4px;
   }
   .primary,
   .secondary {
     position: relative;
     border-radius: 5px;
-    margin: 0 3px;
   }
   .primary .initial {
     border-radius: 4px 0 0 4px;

package/src/components/info-icon.js

@@ -43,21 +43,12 @@ export class InfoIcon extends LitElement {
         vertical-align: middle;
         --iconFillColor: white;
       }
-      .more-info-icon {
-        margin-left: 10px;
-      }
       .more-info-icon img {
         width: 24px;
         height: 24px;
         vertical-align: middle;
         background: white;
       }
-      .more-info-icon.mobile {
-        position: absolute;
-        top: 4px;
-        right: 55px;
-        margin-top: 15px;
-      }
       .hidden {
         display: none;
       }

package/src/components/text-group.js

@@ -26,7 +26,7 @@ export class TextGroup extends LitElement {
         display: inline-block;
       }
       .variable-texts {
-        margin-left: 10px;
+        margin-right: 10px;
         vertical-align: middle;
         font-size: 1.7rem;
       }

package/src/components/timer-countdown.js

@@ -32,12 +32,15 @@ export default class TimerCountdown extends LitElement {
     this.timerInterval = setInterval(() => {
       this.time -= 1;
 
-      // execute 50th minute check
-      if (Math.round(this.time) === this.autoCheckAt) {
+      // 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 returned
+      if (Math.round(this.time) <= this.autoCheckAt) {
         this.dispatchEvent(
           new CustomEvent('IABookActions:loanRenew', {
             detail: {
-              isPageChanged: false,
+              hasPageChanged: false,
+              timeLeft: Math.round(this.time),
             },
             bubbles: true,
             composed: true,
@@ -45,67 +48,62 @@ export default class TimerCountdown extends LitElement {
         );
       }
 
-      if (this.time === 0) clearInterval(this.timerInterval);
+      // clear interval if timer is < this.autoCheckAt
+      if (this.time < this.autoCheckAt) {
+        clearInterval(this.timerInterval);
+      }
     }, 1000);
   }
 
   render() {
-    return html`<div id="countdown">
-      <div id="countdown-number">${Math.round(this.time)}</div>
-      <svg>
-        <circle r="18" cx="20" cy="20"></circle>
+    return html`
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle class="circle" cx="50" cy="50" r="50" />
       </svg>
-    </div>`;
+    `;
   }
 
   static get styles() {
+    const white = css`var(--white, #fff)`;
+    const timerSecondsLeft = css`var(--timerSeconds, 6000s)`;
+    const timerStrokeLeft = css`var(--timerStroke, 315)`;
+
     return css`
       :host {
         right: 5px;
-        font-size: 14px;
         position: absolute;
       }
 
-      #countdown-number {
-        color: white;
-        display: inline-block;
-        line-height: 40px;
-        margin-right: 12px;
-      }
-
-      svg {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 40px;
-        height: 40px;
-        transform: rotateY(-180deg) rotateZ(-90deg);
-      }
-
-      svg circle {
-        stroke-dasharray: 113px;
-        stroke-dashoffset: 0px;
-        stroke-linecap: round;
-        stroke-width: 3px;
-        stroke: white;
-        fill: none;
-        animation: countdown 60s linear infinite forwards;
-      }
-
-      @keyframes countdown {
-        from {
-          stroke-dashoffset: 0px;
+      @keyframes circletimer {
+        0% {
+          stroke-dashoffset: ${timerStrokeLeft};
+          stroke-dasharray: 315;
         }
-        to {
-          stroke-dashoffset: 113px;
+        100% {
+          stroke-dashoffset: 0;
+          stroke-dasharray: 315;
         }
       }
 
-      .hidden {
-        display: none;
+      svg {
+        background-color: ${white};
+        border-radius: 50px;
+        border: 2px solid ${white};
+        transform: rotateZ(-90deg);
       }
-      .visible {
-        display: inline-block;
+
+      svg .circle {
+        stroke: #000;
+        stroke-width: 100px;
+        fill: ${white};
+        stroke-dashoffset: 315;
+        stroke-dasharray: 0;
+        animation: ${timerSecondsLeft} circletimer linear;
       }
     `;
   }

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

@@ -119,12 +119,19 @@ export default class ActionsHandler extends LitElement {
 
   handleLoanRenew() {
     const action = 'renew_loan';
-    this.setBrowseTimeSession();
 
     ActionsHandlerService({
       action,
       identifier: this.identifier,
-      success: () => {},
+      success: data => {
+        // success analytics by isa?
+        this.setBrowseTimeSession();
+        this.dispatchEvent(
+          new CustomEvent('loanAutoRenewed', {
+            detail: { action, data },
+          })
+        );
+      },
       error: data => {
         this.dispatchActionError(action, data);
       },
@@ -286,13 +293,17 @@ export default class ActionsHandler extends LitElement {
    */
   async setBrowseTimeSession() {
     try {
+      const { totalTime } = this.loanRenewConfig;
+      const expireDate = new Date(new Date().getTime() + totalTime * 1000);
+
+      // set a value
       await this.localCache.set({
         key: `${this.identifier}-loanTime`,
-        value: new Date(), // current time
-        ttl: Number(this.loanRenewConfig.totalTime),
+        value: expireDate,
+        ttl: Number(totalTime),
       });
 
-      // delete flip time
+      // delete pageChangedTime when book is auto renew at nth minute
       await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
       console.log(error);

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

@@ -19,7 +19,7 @@ import ActionsConfig from './actions-config.js';
  *
  * Response of this class contain an object as follows:-
  * {
- *   primaryTitle: 'Renewable every hour, pending availability.',
+ *   primaryTitle: '',
  *   primaryActions: [this.actionsConfig.returnBookConfig()],
  *   primaryColor: 'primary',
  *   secondaryActions: [this.actionsConfig.purchaseConfig()],
@@ -40,7 +40,7 @@ import ActionsConfig from './actions-config.js';
  * @enum {string}
  */
 export const bookTitles = {
-  available_1hr: 'Renewable every hour, pending availability.',
+  available_1hr: '',
   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: 'Your loan has expired.',
+  session_expired: '',
   unavailable: 'This book is not available at this time.',
 };
 
@@ -98,7 +98,7 @@ export class GetLendingActions {
     let isBrowsing =
       lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
     if (isBrowsing) {
-      primaryTitleText = this.getBrowseCountdownTitle();
+      primaryTitleText = '';
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
     }
@@ -251,13 +251,6 @@ export class GetLendingActions {
   borrow1HrAction() {
     const lendingStatus = this.lendingStatus || {};
 
-    const possibleTitles = {
-      one_hour: 'Renewable every hour, pending availability.',
-      session_tryagain:
-        'Another patron is using this book. Please check back later.',
-      session_expired: 'Your loan has expired.',
-    };
-
     // assess borrowable state
     const browsingHasExpired =
       !lendingStatus.available_to_browse && lendingStatus.browsingExpired;
@@ -364,6 +357,8 @@ export class GetLendingActions {
   }
 
   /**
+   * @deprecated
+   *
    * Builds the countdown toolbar title.
    *
    * @return string innerHTML for the dialogOpts title attribute

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

@@ -0,0 +1,159 @@
+import { nothing } from 'lit';
+import { ToastConfig } from '@internetarchive/toast-manager';
+
+/**
+ * This class is used to determine if use is eligible for auto renew loan.
+ */
+export class LoanRenewHelper {
+  constructor(hasPageChanged, identifier, localCache, loanRenewConfig) {
+    this.hasPageChanged = hasPageChanged;
+    this.identifier = identifier;
+    this.localCache = localCache;
+    this.loanRenewConfig = loanRenewConfig;
+
+    // messages for auto return machenism
+    this.loanRenewMessage = 'This book has been renewed for 1 hour.';
+    this.loanReturnWarning =
+      'This book will be automatically returned in #time minutes unless you turn a page.';
+
+    // private props
+    this.result = {
+      texts: null,
+      renewNow: false,
+      timeLeft: 0,
+    };
+  }
+
+  handleLoanRenew() {
+    try {
+      if (this.hasPageChanged) {
+        // when user click/flip on book page
+        this.showToastMessage();
+        return this.pageChanged(); // user clicked on page
+      }
+      return this.autoChecker(); // auto checker at 50th minute
+    } catch (error) {
+      console.log(error);
+    }
+
+    return nothing;
+  }
+
+  /**
+   * Trigger this function when user has browsed a book and change the post
+   * - every time user change the page, we set current time in indexedDB
+   * - also check if need to auto renew current loan
+   *
+   * @returns {this.result}
+   */
+  async pageChanged() {
+    const {
+      totalTime, // 60
+      autoCheckAt, // 50
+    } = this.loanRenewConfig;
+    const currentTime = new Date();
+    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+
+    const lastTimeFrame = this.changeTime(
+      loanTime,
+      totalTime - autoCheckAt,
+      'add'
+    );
+
+    // if user viewed new page in last 10 minutes, renew immediately
+    if (currentTime >= lastTimeFrame) {
+      this.result.texts = this.loanRenewMessage;
+      this.result.renewNow = true;
+    }
+
+    this.setPageChangedTime();
+    return this.result;
+  }
+
+  /**
+   * Trigger this function when countdown hits last 10 minutes
+   * - if user is open new page, just renew the loan at last 10th minute
+   *
+   * @returns {this.result}
+   */
+  async autoChecker() {
+    const currentTime = new Date();
+    const { pageChangedInLast } = this.loanRenewConfig;
+    const lastPageFlipTime = await this.localCache.get(
+      `${this.identifier}-pageChangedTime`
+    );
+
+    // last 15 min if used flipped a page.
+    const lastFlipTimeFrame = this.changeTime(
+      currentTime,
+      pageChangedInLast,
+      'sub'
+    ); // 15 seconds
+
+    if (
+      lastPageFlipTime === undefined ||
+      lastPageFlipTime <= lastFlipTimeFrame
+    ) {
+      this.result.texts = this.loanReturnWarning;
+      this.result.renewNow = false; // not viewed
+      this.showToastMessage();
+    } else if (lastPageFlipTime >= lastFlipTimeFrame) {
+      this.result.texts = '';
+      this.result.renewNow = true; // viewed in last time frame
+    }
+
+    return this.result;
+  }
+
+  /**
+   * set current time in indexedDB when user viewed a new page
+   */
+  async setPageChangedTime() {
+    await this.localCache.set({
+      key: `${this.identifier}-pageChangedTime`,
+      value: new Date(), // current time
+      ttl: Number(this.loanRenewConfig.totalTime),
+    });
+  }
+
+  /**
+   * Show toast messages on some specific loan renew features. e.g.
+   * - show success msg when book is auto renewed
+   * - show success msg when book is auto returned
+   * - show warninig msg when book is about to auto returned
+   */
+  async showToastMessage() {
+    const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
+    let toastTemplate = iaBookActions.querySelector('toast-template');
+    if (!toastTemplate) {
+      toastTemplate = document.createElement('toast-template');
+    }
+    await iaBookActions.appendChild(toastTemplate);
+
+    const config = new ToastConfig();
+    config.texts = this.result.texts?.replace(/#time/, this.result.timeLeft);
+    config.dismisOnClick = true;
+    toastTemplate.showToast({
+      config,
+    });
+  }
+
+  /**
+   * Helper function to get time difference
+   *
+   * @param {Date} date
+   * @param {Number} minutes
+   * @param {String} op
+   *
+   * @returns {Object} Date
+   */
+  changeTime(date, minutes, op) {
+    if (date === undefined) return null;
+
+    if (op === 'sub') {
+      return new Date(date.getTime() - minutes * 1000);
+    }
+
+    return new Date(date.getTime() + minutes * 1000);
+  }
+}

package/src/ia-book-actions.js

@@ -3,8 +3,6 @@ import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
-import '@internetarchive/toast-manager';
-import { ToastConfig } from '@internetarchive/toast-manager';
 import { LocalCache } from '@internetarchive/local-cache';
 
 import './components/collapsible-action-group.js';
@@ -13,10 +11,10 @@ import './components/text-group.js';
 import './components/info-icon.js';
 import './components/timer-countdown.js';
 
-import { mobileContainerWidth } from './core/config/constants.js';
 import { GetLendingActions } from './core/services/get-lending-actions.js';
+import { mobileContainerWidth } from './core/config/constants.js';
 import { LoanTokenPoller } from './core/services/loan-token-poller.js';
-import { OneHourLoanRenew } from './core/services/one-hour-loan-renew.js';
+import { LoanRenewHelper } from './core/services/loan-renew-helper.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -62,17 +60,6 @@ export default class IABookActions extends LitElement {
     this.disableActionGroup = false;
     this.modal = undefined;
     this.tokenDelay = 120000; // 2 minutes
-    this.localCache = new LocalCache({
-      namespace: 'loanRenew',
-    });
-
-    // loan auto renew
-    this.isPageChanged = false;
-    this.loanRenewConfig = {};
-    this.loanRenewResult = {
-      texts: null,
-      renewNow: false,
-    };
 
     // private props
     this.primaryActions = [];
@@ -82,19 +69,39 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
+
+    // loan auto renew
     this.browserTimer = undefined;
+    this.loanRenewConfig = {};
 
-    this._shadowRoot = this.attachShadow({ mode: "open" });
-    this.bindLoanRenewEvents();
+    /**
+     * contains loan auto-renew response
+     * - texts:- texts messages need to show in toast message
+     * - renewNow:- key to determine if need to renew now
+     */
+    this.loanRenewResult = {
+      texts: null,
+      renewNow: false,
+    };
+
+    this._shadowRoot = this.attachShadow({ mode: 'open' });
   }
 
   disconnectedCallback() {
-    this.tokenPoller?.disconnectedInterval();
+    this.tokenPoller.disconnectedInterval();
     window?.Sentry?.captureMessage('disconnectedCallback');
     this.disconnectResizeObserver();
   }
 
   firstUpdated() {
+    // bind auto loan renew events
+    this.bindLoanRenewEvents();
+
+    // localCache used for auto-loan-renew
+    this.localCache = new LocalCache({
+      namespace: 'loanRenew',
+    });
+
     if (!this.sharedObserver) {
       this.sharedObserver = new SharedResizeObserver();
       this.setupResizeObserver();
@@ -113,112 +120,6 @@ export default class IABookActions extends LitElement {
     }
   }
 
-  bindLoanRenewEvents() {
-    // dispatched this event from bookreader page changed
-    window.addEventListener('BookReader:pageChanged', () => {
-      // early return if book is not browsed (1 hour borrow)
-      if (this.borrowType === 'browsed') {
-        this.isPageChanged = true;
-        this.executeLoanRenew();
-      }
-
-      return nothing;
-    });
-
-    // dispatched this event from timer-countdown
-    this.addEventListener('IABookActions:loanRenew', () => {
-      this.isPageChanged = false;
-      this.executeLoanRenew();
-    });
-  }
-
-  async executeLoanRenew() {
-    this.loanRenewResult = await new OneHourLoanRenew(
-      this.isPageChanged,
-      this.identifier,
-      this.localCache,
-      this.loanRenewConfig
-    );
-
-    console.log(this.loanRenewResult);
-
-    this.showToastMessage();
-
-    if (this.loanRenewResult.renewNow) {
-      this.tokenPoller.disconnectedInterval();
-      await this.browseHasRenew();
-    }
-
-    return nothing;
-  }
-
-  async showToastMessage() {
-    let toastTemplate = this.shadowRoot.querySelector('toast-template');
-    if (!toastTemplate) {
-      toastTemplate = document.createElement('toast-template');
-    }
-
-    await this.shadowRoot.appendChild(toastTemplate)
-    // await document.body.appendChild(toastTemplate);
-
-    const config = new ToastConfig();
-    config.texts = this.loanRenewResult?.texts;
-    config.dismisOnClick = true;
-
-    toastTemplate.showToast({
-      config
-    });
-  }
-
-  async browseHasExpired() {
-    const currStatus = { ...this.lendingStatus, browsingExpired: true };
-    this.lendingStatus = currStatus;
-
-    // remove respected key:value
-    await this.localCache.delete(`${this.identifier}-loanTime`);
-    await this.localCache.delete(`${this.identifier}-pageChangedTime`);
-
-    // show message after browsed book is expired.
-    this.loanRenewResult.renewNow = false;
-    this.loanRenewResult.texts =
-      'This book has been auto-returned due to inactivity.';
-
-    this.showToastMessage();
-  }
-
-  async browseHasRenew() {
-    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,
-      browsingExpired: false,
-      secondsLeftOnLoan: secondsLeft,
-    };
-    this.lendingStatus = currStatus;
-
-    this.startBrowseTimer();
-  }
-
-  startBrowseTimer() {
-    clearTimeout(this.browserTimer);
-
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
-    if (!user_has_browsed || browsingExpired) {
-      return;
-    }
-
-    const timeLeft = secondsLeftOnLoan * 1000;
-    this.browserTimer = setTimeout(() => {
-      this.browseHasExpired();
-    }, timeLeft);
-  }
-
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -277,7 +178,7 @@ export default class IABookActions extends LitElement {
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      if (!this.tokenPoller.disconnectedInterval) {
+      if (!this.tokenPoller) {
         window?.Sentry?.captureMessage(
           'setupLendingToolbarActions hasExpired - no tokenPoller'
         );
@@ -306,18 +207,154 @@ export default class IABookActions extends LitElement {
       return;
     }
 
-    // if (book is about to renew)
-    // - start token to poller around this.tokenDelay time until renew is completed
-    // else
-    // - start token poller immediately
+    /**
+     * 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(
       () => {
         this.startLoanTokenPoller();
+
+        if (!this.loanRenewResult.renewNow) {
+          this.resetTimerCountState();
+        }
       },
       this.loanRenewResult.renewNow ? this.tokenDelay : 100
     );
   }
 
+  /**
+   * Bind 1 hour loan auto renew,
+   * There are two events we want to use,
+   * 1. BookReader:pageChanged - dispatched from bookreader side
+   * 2. IABookActions:loanRenew - dispatched from timer-countdown component
+   */
+  bindLoanRenewEvents() {
+    // dispatched this event from bookreader page changed
+    window.addEventListener('BookReader:pageChanged', event => {
+      if (this.borrowType === 'browsed' && event.detail.hasPageChanged) {
+        this.autoLoanRenewChecker(true);
+      }
+
+      return nothing;
+    });
+
+    /**
+     * 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
+     */
+    this.addEventListener('IABookActions:loanRenew', async event => {
+      const eventDetails = event.detail;
+
+      await this.autoLoanRenewChecker(false);
+
+      // show warning message with remaining time to auto returned it.
+      if (this.loanRenewHelper.result.renewNow === false) {
+        this.loanRenewHelper.result.timeLeft = eventDetails.timeLeft;
+        this.loanRenewHelper.showToastMessage();
+      }
+    });
+  }
+
+  async autoLoanRenewChecker(hasPageChanged = false) {
+    this.loanRenewHelper = new LoanRenewHelper(
+      hasPageChanged,
+      this.identifier,
+      this.localCache,
+      this.loanRenewConfig
+    );
+
+    await this.loanRenewHelper.handleLoanRenew();
+    console.log(this.loanRenewResult);
+    this.loanRenewResult = this.loanRenewHelper.result;
+  }
+
+  async browseHasRenew() {
+    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,
+      browsingExpired: false,
+      secondsLeftOnLoan: secondsLeft,
+    };
+    this.lendingStatus = currStatus;
+
+    this.startBrowseTimer();
+  }
+
+  startBrowseTimer() {
+    clearTimeout(this.browserTimer);
+
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      return;
+    }
+
+    const timeLeft = secondsLeftOnLoan * 1000;
+    this.browserTimer = setTimeout(() => {
+      this.browseHasExpired();
+    }, timeLeft);
+  }
+
+  /**
+   * Execute when loan is expired
+   */
+  async browseHasExpired() {
+    const currStatus = { ...this.lendingStatus, browsingExpired: true };
+    this.lendingStatus = currStatus;
+
+    // remove respected key:value for loan-renew
+    await this.localCache.delete(`${this.identifier}-loanTime`);
+    await this.localCache.delete(`${this.identifier}-pageChangedTime`);
+
+    // show message after browsed book is expired.
+    this.loanRenewResult.renewNow = false;
+    this.loanRenewResult.texts =
+      'This book has been automatically returned due to inactivity.';
+
+    this.loanRenewHelper.showToastMessage();
+  }
+
+  /**
+   * Reset timer animation state after book renewed
+   */
+  async resetTimerCountState() {
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+
+    const timerCountdown = this.shadowRoot.querySelector('timer-countdown');
+    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
+
+    // the perimeter of the circle
+    const circleStroke = 315;  // (π * 2 * radius)
+    const strokeDashOffset =
+      (secondsLeft / this.loanRenewConfig.totalTime) *
+      circleStroke;
+
+    // set seconds left in loan expire
+    timerCountdown.style?.setProperty(
+      '--timerSeconds',
+      `${secondsLeft}s`
+    );
+    // set circle stroke offset left in loan expire
+    timerCountdown.style?.setProperty(
+      '--timerStroke',
+      `${Number(strokeDashOffset)}`
+    );
+
+    animationCircle.style.animationName = 'none';
+    setTimeout(() => {
+      animationCircle.style.animationName = 'circletimer';
+    }, 100);
+  }
+
   render() {
     if (this.barType === 'title') {
       return html`<section class="lending-wrapper">
@@ -340,7 +377,7 @@ export default class IABookActions extends LitElement {
   get timerCountdownTemplate() {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
-          time=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .time=${Number(this.lendingStatus.secondsLeftOnLoan)}
           .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
         ></timer-countdown>`
       : nothing;
@@ -362,6 +399,7 @@ export default class IABookActions extends LitElement {
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
         ?renewNow=${this.loanRenewResult.renewNow}
+        @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
@@ -371,6 +409,21 @@ export default class IABookActions extends LitElement {
     `;
   }
 
+  /**
+   * Execute after auto loan renewed is completed
+   * - show success message
+   * - then change the remaining time
+   * - reset timer state
+   */
+  async handleLoanAutoRenewed() {
+    if (this.loanRenewResult.renewNow) {
+      this.tokenPoller.disconnectedInterval();
+      await this.loanRenewHelper.showToastMessage();
+      await this.browseHasRenew();
+      await this.resetTimerCountState();
+    }
+  }
+
   /**
    * enable access of borrowed/browsed books
    */
@@ -509,11 +562,13 @@ export default class IABookActions extends LitElement {
   }
 
   get textGroupTemplate() {
-    return html`<text-group
-      textClass=${this.textClass}
-      .texts=${this.primaryTitle}
-    >
-    </text-group>`;
+    return this.primaryTitle
+      ? html`<text-group
+          textClass=${this.textClass}
+          .texts=${this.primaryTitle}
+        >
+        </text-group>`
+      : nothing;
   }
 
   get hasAdminAccess() {

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

@@ -182,9 +182,7 @@ describe('Borrow status actions', () => {
       },
     ];
 
-    expect(el.primaryTitle).to.equal(
-      'Renewable every hour, pending availability.'
-    );
+    expect(el.primaryTitle).to.equal('');
     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);
@@ -253,7 +251,6 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 second
     await el.updateComplete;
 
-    expect(el.primaryTitle).contains('Your loan has expired.');
     expect(el.primaryActions[0].text).to.equal('Borrow again');
   });
 
@@ -289,7 +286,6 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 sec
 
     expect(eventReceived).to.equal(true);
-    expect(el.primaryTitle).contains('Your loan has expired.');
     expect(el.primaryActions[0].text).to.equal('Borrow again');
     expect(el.tokenPoller.loanTokenInterval).to.equal(undefined);
   });

package/src/core/services/one-hour-loan-renew.js

@@ -1,148 +0,0 @@
-import { nothing } from 'lit';
-
-/**
- * This class is used to determine if use is eligible for auto renew loan.
- *
- */
-export class OneHourLoanRenew {
-  constructor(isPageChanged, identifier, localCache, loanRenewConfig) {
-    this.isPageChanged = isPageChanged;
-    this.identifier = identifier;
-    this.localCache = localCache;
-    this.loanRenewConfig = loanRenewConfig;
-
-    // messages for auto return machenism
-    this.loanRenewMessage = 'This book has been renewed for another hour.';
-    this.loanReturnMessage =
-      'This book has been auto-returned due to inactivity.';
-    this.loanReturnWarning =
-      'This book will be auto-returned in 10 minutes unless you turn a page.';
-
-    // private props
-    this.loanRenewResult = {
-      texts: null,
-      renewNow: false,
-    };
-
-    return this.handleLoanRenew();
-  }
-
-  handleLoanRenew() {
-    try {
-      // when user click/flip on book page
-      if (this.isPageChanged) {
-        console.log('page changed!!');
-        return this.pageChanged(); // user clicked on page
-      }
-
-      return this.autoChecker(); // auto checker at 50th minute
-    } catch (error) {
-      console.log(error);
-    }
-
-    return nothing;
-  }
-
-  async pageChanged() {
-    const {
-      totalTime, // 60
-      autoCheckAt, // 50
-    } = this.loanRenewConfig;
-    const currentTime = new Date();
-    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
-
-    const lastTimeFrame = this.changeTime(
-      loanTime,
-      totalTime - autoCheckAt,
-      'add'
-    );
-
-    // if user viewed new page in last 10 minutes, renew immediately
-    if (currentTime >= lastTimeFrame) {
-      console.log('Yes, borrow it again now!');
-      this.loanRenewResult.texts = this.loanRenewMessage;
-      this.loanRenewResult.renewNow = true;
-
-      this.setLoanRenewedTime();
-    }
-
-    this.setPageChangedTime();
-    return this.loanRenewResult;
-  }
-
-  async autoChecker() {
-    const currentTime = new Date();
-    const { pageChangedInLast } = this.loanRenewConfig;
-    const lastPageFlipTime = await this.localCache.get(
-      `${this.identifier}-pageChangedTime`
-    );
-
-    // last 15 min if used flipped a page.
-    const lastFlipTimeFrame = this.changeTime(
-      currentTime,
-      pageChangedInLast,
-      'sub'
-    ); // 15 seconds
-
-    if (
-      lastPageFlipTime === undefined ||
-      lastPageFlipTime <= lastFlipTimeFrame
-    ) {
-      // not viewed
-      console.log("Not viewed, don't borrow it!");
-      this.loanRenewResult.texts = this.loanReturnWarning;
-      this.loanRenewResult.renewNow = false;
-    } else if (lastPageFlipTime >= lastFlipTimeFrame) {
-      // viewed in last time frame
-      console.log('Yes viewed, borrow it again!');
-      this.loanRenewResult.texts = this.loanRenewMessage;
-      this.loanRenewResult.renewNow = true;
-
-      this.setLoanRenewedTime();
-    }
-
-    return this.loanRenewResult;
-  }
-
-  // save page changed time in indexedDB
-  async setPageChangedTime() {
-    await this.localCache.set({
-      key: `${this.identifier}-pageChangedTime`,
-      value: new Date(), // current time
-      ttl: Number(this.loanRenewConfig.totalTime),
-    });
-  }
-
-  async setLoanRenewedTime() {
-    try {
-      // last 15 min if used flipped a page.
-      const expireDate = this.changeTime(
-        new Date(),
-        this.loanRenewConfig.totalTime,
-        'add'
-      ); // 15 seconds
-
-      // set a value
-      await this.localCache.set({
-        key: `${this.identifier}-loanTime`,
-        value: expireDate, // expireDate time
-        ttl: Number(this.loanRenewConfig.totalTime),
-      });
-
-      // delete pageChangedTime when book is auto renew at nth minute
-      await this.localCache.delete(`${this.identifier}-pageChangedTime`);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  changeTime(date, minutes, op) {
-    if (date === undefined) return nothing;
-
-    if (op === 'sub') {
-      return new Date(date.getTime() - minutes * 1000);
-    }
-
-    return new Date(date.getTime() + minutes * 1000);
-  }
-}