@internetarchive/ia-book-actions 0.0.29-alpha2 → 0.0.29-alpha21

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 nothing;
+
+    if (op === 'sub') {
+      return new Date(date.getTime() - minutes * 1000);
+    }
+
+    return new Date(date.getTime() + minutes * 1000);
+  }
+}

package/src/ia-book-actions.js

@@ -10,12 +10,11 @@ import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
 import './components/timer-countdown.js';
-import './components/toast-message.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 { OneHourAutoRenew } from './core/services/one-hour-auto-renew.js';
+import { LoanRenewHelper } from './core/services/loan-renew-helper.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -36,17 +35,13 @@ export default class IABookActions extends LitElement {
         attribute: false,
       },
       barType: { type: String },
-      autoRenew: { type: Boolean },
       sharedObserver: { attribute: false },
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
-      toastTexts: { type: String },
-      remainingTime: { type: Number },
-      resetTimerCountdown: { type: Boolean },
       localCache: { type: Object },
-      autoRenewTimeConfig: { type: Object },
-      browseAgainNow: { type: Boolean },
+      loanRenewConfig: { type: Object },
+      loanRenewResult: { type: Object },
     };
   }
 
@@ -61,15 +56,10 @@ export default class IABookActions extends LitElement {
     this.bwbPurchaseUrl = '';
     this.lendingBarPostInit = () => {};
     this.barType = 'action'; // 'title'|'action'
-    this.autoRenew = false;
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.modal = undefined;
     this.tokenDelay = 120000; // 2 minutes
-    this.localCache = new LocalCache({
-      namespace: '1HourLoanStorage'
-    }),
-    this.autoRenewTimeConfig = {},
 
     // private props
     this.primaryActions = [];
@@ -79,21 +69,39 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
-    this.browseAgainNow = false;
+
+    // loan auto renew
     this.browserTimer = undefined;
-    this.hideToast = true;
+    this.loanRenewConfig = {};
 
-    this.bindAutoRenewEvent();
-    this.resetTimerCountdown = false;
+    /**
+     * 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();
@@ -106,81 +114,12 @@ export default class IABookActions extends LitElement {
       this.update();
     }
 
-    if (changed.has('autoRenew')) {
-      this.resetTimerCountdown = true;
-    }
     if (changed.has('sharedObserver')) {
       this.disconnectResizeObserver();
       this.setupResizeObserver();
     }
   }
 
-  bindAutoRenewEvent() {
-    // dispatched this event from timer-countdown 
-    this.addEventListener('autoRenewAttempt', async event => {
-      const isPageFlipped = event.detail.bookPageChange;
-
-      const dd = await new OneHourAutoRenew(
-        isPageFlipped,
-        this.identifier,
-        this.localCache,
-        this.autoRenewTimeConfig,
-        this.lendingStatus.user_has_browsed && !this.lendingStatus.browsingExpired
-      );
-
-      this.toastTexts = dd.toastTexts;
-      this.hideToast = dd.hideToast;
-      this.browseAgainNow = dd.renewNow;
-      if (this.browseAgainNow) {
-        await this.browseHasRenew();
-      }
-      // this.handleBookAutoRenew(event);
-    });
-  }
-
-  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}-pageFlipTime`);
-
-    // show message after browsed book is expired.
-    this.toastTexts = this.autoReturnMessage;
-  }
-
-  async browseHasRenew() {
-    const currStatus = { 
-      ...this.lendingStatus,
-      user_has_browsed: true,
-      browsingExpired: false,
-      secondsLeftOnLoan: 61
-    };
-    this.lendingStatus = currStatus;
-
-    this.startBrowseTimer();
-  }
-
-  startBrowseTimer() {
-    clearTimeout(this.browserTimer);
-
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
-    if (!user_has_browsed || browsingExpired) {
-      return;
-    }
-
-    // expired book and show browse again button
-    const timeLeft = secondsLeftOnLoan * 1000;
-    this.browserTimer = setTimeout(() => {
-      this.browseHasExpired();
-    }, timeLeft);
-  }
-
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -234,13 +173,16 @@ export default class IABookActions extends LitElement {
     });
 
     this.borrowType = actions.borrowType;
-    this.remainingTime = this.lendingStatus.secondsLeftOnLoan;
 
     const hasExpired =
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      window?.Sentry?.captureMessage('setupLendingToolbarActions hasExpired');
+      if (!this.tokenPoller) {
+        window?.Sentry?.captureMessage(
+          'setupLendingToolbarActions hasExpired - no tokenPoller'
+        );
+      }
       this.tokenPoller?.disconnectedInterval();
       /** Global event - always fire */
       this.dispatchEvent(
@@ -265,7 +207,138 @@ export default class IABookActions extends LitElement {
       return;
     }
 
-    this.startLoanTokenPoller();
+    /**
+     * 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', () => {
+      // early return if book is not browsed (1 hour borrow)
+      if (this.borrowType === 'browsed') {
+        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();
+    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 timerCountdown = this.shadowRoot.querySelector('timer-countdown');
+    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
+
+    timerCountdown.style?.setProperty(
+      '--secondsLeft',
+      `${Number(this.lendingStatus.secondsLeftOnLoan)}s`
+    );
+
+    animationCircle.style.animationName = 'none';
+    setTimeout(() => {
+      animationCircle.style.animationName = 'circletimer';
+    }, 100);
   }
 
   render() {
@@ -290,26 +363,14 @@ export default class IABookActions extends LitElement {
   get timerCountdownTemplate() {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
-          time=${Number(this.remainingTime)}
-          .autoCheckAt=${this.autoRenewTimeConfig.autoCheckAt}
-          ?resetTimerCountdown=${this.resetTimerCountdown}
+          .time=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
         ></timer-countdown>`
       : nothing;
   }
 
-  get toastMessageTemplate() {
-    return html`
-      <toast-message
-        .texts=${this.toastTexts}
-        .dismisOnClick="1"
-        ?hideToast=${this.hideToast}
-      ></toast-message>
-    `;
-  }
-
   get bookActionBar() {
     return html`
-      <button @click=${() => this.pageFlipEvent()}>Page Flip</button>
       <collapsible-action-group
         .userid=${this.userid}
         .identifier=${this.identifier}
@@ -319,30 +380,34 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
-        .autoRenew=${this.autoRenew}
-        .autoRenewTimeConfig=${this.autoRenewTimeConfig}
+        .localCache=${this.localCache}
+        .loanRenewConfig=${this.loanRenewConfig}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
-        ?browseAgainNow=${this.browseAgainNow}
+        ?renewNow=${this.loanRenewResult.renewNow}
+        @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
-      ${this.timerCountdownTemplate} ${this.toastMessageTemplate}
+      ${this.timerCountdownTemplate}
     `;
   }
 
-  // will move this function to bookreader...
-  async pageFlipEvent() {
-    try {
-      // dispatch event to say book page has flipped
-      document.querySelector("ia-book-actions").dispatchEvent(
-        new CustomEvent("autoRenewAttempt", {
-          detail: { bookPageChange: true },
-        })
-      );
-    } catch (error) { console.log(error) }
+  /**
+   * 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();
+    }
   }
 
   /**
@@ -483,11 +548,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() {
@@ -498,20 +565,23 @@ export default class IABookActions extends LitElement {
     return css`
       :host {
         display: block;
-        background: var(--primaryBGColor, #000);
-        color: var(--primaryTextColor, #fff);
       }
+
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
+        background: var(--primaryBGColor, #000);
+        color: var(--primaryTextColor, #fff);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
       }
 
-      toast-message {
-        --messageHeightFromTop: 18%;
+      toast-template {
+        --toastTopMargin: 80px;
+        --toastBGColor: #333;
+        --toastFontColor: #fff;
       }
     `;
   }

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);
   });