@internetarchive/ia-book-actions 0.0.29 → 0.1.1

package/src/ia-book-actions.js

@@ -1,17 +1,22 @@
 /* eslint-disable camelcase */
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
+import { ToastConfig } from '@internetarchive/toast-manager';
+import { LocalCache } from '@internetarchive/local-cache';
 
 import './components/collapsible-action-group.js';
 import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
+import './components/timer-countdown.js';
 
 import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
+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';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -36,6 +41,9 @@ export default class IABookActions extends LitElement {
       disableActionGroup: { type: Boolean },
       modal: { Object },
       tokenDelay: { type: Number },
+      localCache: { type: Object },
+      loanRenewTimeConfig: { type: Object },
+      loanRenewResult: { type: Object },
     };
   }
 
@@ -53,7 +61,7 @@ export default class IABookActions extends LitElement {
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.modal = undefined;
-    this.tokenDelay = 120000; // 2 minutes
+    this.tokenDelay = 120; // in seconds
 
     // private props
     this.primaryActions = [];
@@ -63,15 +71,51 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
+    this.suppressToast = false;
+    this.browseTimer = undefined;
+
+    /**
+     * contains one hour auto-loan-renew time configuration
+     *
+     * @type {object} loanRenewTimeConfig
+     * @property {number} loanTotalTime - total seconds a loan does have
+     * @property {number} loanRenewAtLast - check for loan renew at last
+     * @property {number} pageChangedInLast - consider loan renew eligible if viewed new page
+     */
+    this.loanRenewTimeConfig = {};
+
+    /**
+     * contains one hour auto-loan-renew response
+     *
+     * @type {object} loanRenewResult
+     * @property {string} texts - texts messages need to show in toast message
+     * @property {boolean} renewNow - key to determine if need to renew now
+     * @property {number} secondsLeft - seconds left in active loan
+     */
+    this.loanRenewResult = { texts: '', renewNow: false, secondsLeft: 0 };
+
+    /**
+     * need showdowRoot opened for resetTimerCountState
+     * @see IABookActions::resetTimerCountState
+     */
+    this._shadowRoot = this.attachShadow({ mode: 'open' });
   }
 
   disconnectedCallback() {
     this.tokenPoller?.disconnectedInterval();
-    window?.Sentry?.captureMessage('disconnectedCallback');
+    window?.Sentry?.captureMessage(sentryLogs.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();
@@ -90,27 +134,6 @@ export default class IABookActions extends LitElement {
     }
   }
 
-  browseHasExpired() {
-    const currStatus = { ...this.lendingStatus, browsingExpired: true };
-    this.lendingStatus = currStatus;
-  }
-
-  startBrowseTimer() {
-    const {
-      browsingExpired,
-      user_has_browsed,
-      secondsLeftOnLoan,
-    } = this.lendingStatus;
-    if (!user_has_browsed || browsingExpired) {
-      return;
-    }
-
-    const timeLeft = secondsLeftOnLoan * 1000;
-    setTimeout(() => {
-      this.browseHasExpired();
-    }, timeLeft);
-  }
-
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -144,6 +167,8 @@ export default class IABookActions extends LitElement {
   /** End SharedObserver resize handler */
 
   async setupLendingToolbarActions() {
+    this.suppressToast = false;
+
     this.lendingOptions = new GetLendingActions(
       this.userid,
       this.identifier,
@@ -169,10 +194,8 @@ export default class IABookActions extends LitElement {
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
-      if (!this.tokenPoller.disconnectedInterval) {
-        window?.Sentry?.captureMessage(
-          'setupLendingToolbarActions hasExpired - no tokenPoller'
-        );
+      if (!this.tokenPoller) {
+        window?.Sentry?.captureMessage(sentryLogs.bookWasExpired);
       }
       this.tokenPoller?.disconnectedInterval();
       /** Global event - always fire */
@@ -183,12 +206,13 @@ export default class IABookActions extends LitElement {
           composed: true,
         })
       );
+
+      // early return if book is already expired
       return;
     }
 
     if (this.borrowType === 'browsed') {
       // start timer for browsed.
-      // when browse is completed, we shows browse-again button
       this.startBrowseTimer();
     }
 
@@ -198,7 +222,214 @@ export default class IABookActions extends LitElement {
       return;
     }
 
-    this.startLoanTokenPoller();
+    // initial timer state for 1-hour loan
+    if (this.borrowType === 'browsed' && !this.loanRenewResult.renewNow) {
+      setTimeout(() => {
+        this.resetTimerCountState();
+      }, 100);
+    }
+
+    /**
+     * 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 book is renew while reading, let's wait to execute create-token api
+      this.loanRenewResult.renewNow ? this.tokenDelay * 1000 : 100
+    );
+  }
+
+  /**
+   * Bind 1 hour loan auto renew event,
+   * There are two events we want to use,
+   * 1. BookReader:userAction - dispatched from bookreader side
+   * 2. click event to refresh the page when book is auto expired
+   * 3. IABookActions:loanRenew - dispatched from timer-countdown component
+   */
+  bindLoanRenewEvents() {
+    /**
+     * dispatched this event from bookreader page changed
+     */
+    window.addEventListener('BookReader:userAction', () => {
+      if (this.borrowType === 'browsed') {
+        this.suppressToast = false;
+        this.autoLoanRenewChecker(true);
+      }
+
+      return nothing;
+    });
+
+    /**
+     * detect click-event on document to close toast-template
+     */
+    document.addEventListener('click', e => {
+      if (this.loanRenewHelper && this.loanRenewResult.secondsLeft > 0) {
+        this.suppressToast = true;
+      }
+
+      // reload when user click on book-page and book is EXPIRED
+      const hasExpired =
+        'browsingExpired' in this.lendingStatus &&
+        this.lendingStatus?.browsingExpired;
+      if (hasExpired && e.target.nodeName !== 'IA-BOOK-ACTIONS') {
+        window.location?.reload();
+      }
+    });
+
+    /**
+     * this event dispatched from timer-countdown component for:
+     * 1. user turned book page after showing auto-returned warning message
+     * 2. show warning message having remaining time
+     * @see TimerCountdown::timerCountdown
+     */
+    this.addEventListener('IABookActions:loanRenew', async event => {
+      await this.autoLoanRenewChecker(false);
+
+      // show warning message with remaining time to auto returned it.
+      if (this.loanRenewResult.renewNow === false) {
+        this.loanRenewResult.secondsLeft = event.detail.secondsLeft;
+        this.showToastMessage();
+      }
+    });
+  }
+
+  /**
+   * To determine if need to be renewed browsed book
+   * @see LoanRenewHelper
+   *
+   * @param {Boolean} hasPageChanged
+   */
+  async autoLoanRenewChecker(hasPageChanged = false) {
+    this.loanRenewHelper = new LoanRenewHelper(
+      hasPageChanged,
+      this.identifier,
+      this.localCache,
+      this.loanRenewTimeConfig
+    );
+
+    await this.loanRenewHelper.handleLoanRenew();
+    this.loanRenewResult = this.loanRenewHelper.result;
+  }
+
+  /**
+   * Show toast messages on some specific loan renew features. e.g.
+   * - show message when book is auto renewed
+   * - show message when book is expired
+   * - show message having remaining time when book is about to auto returned
+   */
+  async showToastMessage() {
+    if (this.suppressToast) return;
+
+    const iaBookActions = document.querySelector('ia-book-actions')?.shadowRoot;
+    if (!iaBookActions) return;
+
+    let toastTemplate = iaBookActions.querySelector('toast-template');
+    if (!toastTemplate) {
+      toastTemplate = document.createElement('toast-template');
+    }
+    await iaBookActions.appendChild(toastTemplate);
+
+    // if secondsLeft < 60, consider it 1 minute
+    let { secondsLeft } = this.loanRenewResult;
+    secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
+
+    const config = new ToastConfig();
+    config.dismisOnClick = true;
+    config.texts = this.loanRenewHelper?.getMessageTexts(
+      this.loanRenewResult.texts,
+      secondsLeft
+    );
+
+    toastTemplate.showToast({
+      config,
+    });
+  }
+
+  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.browseTimer);
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      return;
+    }
+
+    this.browseTimer = setTimeout(() => {
+      this.browseHasExpired();
+    }, secondsLeftOnLoan * 1000);
+  }
+
+  /**
+   * Execute when loan is expired
+   */
+  async browseHasExpired() {
+    this.tokenPoller?.disconnectedInterval();
+
+    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.suppressToast = false;
+    this.showToastMessage();
+
+    window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
+  }
+
+  /**
+   * Reset timer animation state after book renewed
+   */
+  async resetTimerCountState() {
+    const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
+    if (!timerCountdown) return;
+
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+    const strokeDashOffset =
+      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315;
+
+    // set seconds left in loan expire
+    timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
+
+    // set circle stroke offset left in loan expire
+    timerCountdown.style?.setProperty(
+      '--strokeLeftOnLoan',
+      `${Number(strokeDashOffset)}` // the perimeter of the circle = (π * 2 * radius)
+    );
+
+    const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
+    animationCircle.style.animationName = 'none';
+    setTimeout(() => {
+      animationCircle.style.animationName = 'circletimer';
+    }, 100);
   }
 
   render() {
@@ -220,6 +451,16 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
+  get timerCountdownTemplate() {
+    return this.borrowType === 'browsed'
+      ? html`<timer-countdown
+          .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
+          .loanRenewAtLast=${this.loanRenewTimeConfig.loanRenewAtLast}
+        ></timer-countdown>`
+      : nothing;
+  }
+
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -231,23 +472,56 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
+        .localCache=${this.localCache}
+        .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
+        ?renewNow=${this.loanRenewResult.renewNow}
+        @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
+      ${this.timerCountdownTemplate}
     `;
   }
 
+  /**
+   * 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();
+
+      this.suppressToast = false;
+      await this.showToastMessage();
+      await this.browseHasRenew();
+      await this.resetTimerCountState();
+
+      window?.Sentry?.captureMessage(`${sentryLogs.bookHasRenewed}`);
+      // TODO: analytics?? for consecutive renew.....
+
+      // testing console....
+      console.log(sentryLogs.bookHasRenewed, {
+        loanRenewResult: this.loanRenewResult,
+        browseHasRenew: this.lendingStatus.secondsLeftOnLoan,
+        resetTimerCountState: this._shadowRoot.querySelector('timer-countdown'),
+      });
+    }
+  }
+
   /**
    * enable access of borrowed/browsed books
+   * @see LoanTokenPoller
    */
   startLoanTokenPoller() {
     if (this.tokenPoller) {
-      window?.Sentry?.captureMessage('startLoanTokenPoller clearing interval');
-      this.tokenPoller.disconnectedInterval();
+      window?.Sentry?.captureMessage(sentryLogs.clearTokenPoller);
+      this.tokenPoller?.disconnectedInterval();
     }
     const successCallback = () => {
       this.lendingBarPostInit();
@@ -272,7 +546,7 @@ export default class IABookActions extends LitElement {
       this.borrowType,
       successCallback,
       errorCallback,
-      this.tokenDelay // 1000 ms = 1 sec
+      this.tokenDelay // in seconds
     );
   }
 
@@ -303,6 +577,20 @@ export default class IABookActions extends LitElement {
 
     if (errorMsg) this.showErrorModal(errorMsg, action);
 
+    // if error related to loan token
+    // - clear tokenPoller interval
+    // - set user_has_browsed to `false`
+    if (action === 'create_token') {
+      this.tokenPoller?.disconnectedInterval();
+
+      const currStatus = {
+        ...this.lendingStatus,
+        user_has_browsed: false,
+        available_to_browse: true,
+      };
+      this.lendingStatus = currStatus;
+    }
+
     // update action bar state if book is not available to browse or borrow.
     if (errorMsg && errorMsg.match(/not available to borrow/gm)) {
       let currStatus = this.lendingStatus;
@@ -358,7 +646,8 @@ export default class IABookActions extends LitElement {
           href="mailto:info@archive.org?subject=Help: cannot access my borrowed book: ${this
             .identifier}"
           >info@archive.org</a
-        >`;
+        ><br /><br />
+        <code>errorLog: ${errorMsg}</code>`;
     }
 
     this.modal.showModal({
@@ -379,11 +668,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() {
@@ -394,17 +685,24 @@ 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-template {
+        --toastTopMargin: 80px;
+        --toastBGColor: #333;
+        --toastFontColor: #fff;
+      }
     `;
   }
 }

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

@@ -6,7 +6,7 @@ const container = ({
     {
       analyticsEvent: { action: 'Browse', category: 'Lending' },
       className: 'ia-button primary',
-      text: 'Borrow for 1 hour',
+      text: 'Borrow',
       id: 'browseBook',
     },
     {
@@ -40,7 +40,7 @@ describe('<collapsible-action-group>', () => {
       .true;
 
     const primaryButton = primaryActionContainer.querySelector('.ia-button');
-    expect(primaryButton.innerText).to.equal('Borrow for 1 hour');
+    expect(primaryButton.innerText).to.equal('Borrow');
   });
 
   it('check if loader is active and action-group is disabled', async () => {

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

@@ -0,0 +1,45 @@
+import { html, fixture, expect, aTimeout } from '@open-wc/testing';
+import '../../src/components/timer-countdown.js';
+
+const container = ({ secondsLeftOnLoan, loanRenewTimeConfig } = {}) =>
+  html`<timer-countdown
+    .secondsLeftOnLoan=${secondsLeftOnLoan}
+    .loanRenewTimeConfig=${loanRenewTimeConfig}
+  ></timer-countdown>`;
+
+describe('<timer-countdown>', () => {
+  it('timer interval is undefined when loan is expired', async () => {
+    const el = await fixture(
+      container({
+        secondsLeftOnLoan: 0, // in seconds
+        loanRenewTimeConfig: {
+          loanTotalTime: 14, // in seconds
+          loanRenewAtLast: 5, // in seconds
+          pageChangedInLast: 5, // in seconds
+        },
+      })
+    );
+
+    await el.updateComplete;
+    expect(el.timerInterval).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
+        },
+      })
+    );
+
+    await aTimeout(1900);
+    await el.updateComplete;
+
+    expect(el.secondsLeftOnLoan).to.equal(2);
+    expect(el.timerInterval).to.not.be.undefined;
+  });
+});

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

@@ -25,7 +25,7 @@ describe('Get Lending Actions', () => {
 
     expect(actions.primaryTitle).to.equal(bookTitles.available_1hr);
     expect(actions.primaryActions.length).to.equal(3);
-    expect(actions.primaryActions[0].text).to.equal('Borrow for 1 hour');
+    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');
   });
@@ -111,7 +111,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.claim_waitlist);
         expect(actions.primaryActions.length).to.equal(3);
         expect(actions.primaryActions[0].text).to.equal('Borrow for 14 days');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(actions.primaryActions[2].text).to.equal('Leave Waitlist');
         expect(spy.called).to.be.true;
       });
@@ -138,7 +138,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(claimSpy.called).to.be.false;
         expect(waitlistSpy.called).to.be.true;
       });
@@ -162,7 +162,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(waitlistSpy.called).to.be.true;
       });
     });