@internetarchive/ia-book-actions 0.0.29-alpha4 → 0.0.29-alpha40

package/src/ia-book-actions.js

@@ -3,6 +3,7 @@ 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';
@@ -10,12 +11,12 @@ 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 { sentryLogs } from './core/config/sentry-events.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 +37,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 },
-      autoRenewConfig: { type: Object },
-      browseAgainNow: { type: Boolean },
+      loanRenewTimeConfig: { type: Object },
+      loanRenewResult: { type: Object },
     };
   }
 
@@ -61,16 +58,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.autoRenewConfig = {},
-    this.autoRenewObj = undefined;
+    this.tokenDelay = 120; // in seconds
 
     // private props
     this.primaryActions = [];
@@ -80,21 +71,52 @@ export default class IABookActions extends LitElement {
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
     this.consecutiveLoanCounts = 1; // consecutive loan count
-    this.browseAgainNow = false;
-    this.browserTimer = undefined;
-    this.hideToast = true;
+    this.suppressToast = false;
+    this.browseTimer = undefined;
+
+    /**
+     * contains one hour auto-loan-renew time configuration
+     *
+     * @type {object} loanRenewTimeConfig
+     * @property {number} loanTotalTime - number of seconds a loan should last
+     * @property {number} loanRenewAtLast - check for loan renew at last
+     * @property {number} pageChangedInLast - consider loan renew eligible if viewed new page
+     * @property {boolean} isDevBox - testing flag
+     */
+    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 };
 
-    this.bindAutoRenewEvent();
-    this.resetTimerCountdown = false;
+    /**
+     * 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();
@@ -102,86 +124,17 @@ export default class IABookActions extends LitElement {
   }
 
   updated(changed) {
-    console.log(changed)
     if (changed.has('lendingStatus') || changed.has('bwbPurchaseUrl')) {
       this.setupLendingToolbarActions();
       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;
-
-      this.autoRenewObj = await new OneHourAutoRenew(
-        isPageFlipped,
-        this.identifier,
-        this.localCache,
-        this.autoRenewConfig,
-        this.lendingStatus.user_has_browsed && !this.lendingStatus.browsingExpired
-      );
-
-      this.toastTexts = this.autoRenewObj.toastTexts;
-      this.hideToast = this.autoRenewObj.hideToast;
-      this.browseAgainNow = this.autoRenewObj.renewNow;
-      if (this.browseAgainNow) {
-        await this.browseHasRenew();
-      }
-    });
-  }
-
-  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 book has been auto-returned due to inactivity.';
-  }
-
-  async browseHasRenew() {
-    const currStatus = { 
-      ...this.lendingStatus,
-      user_has_browsed: true,
-      browsingExpired: false,
-      secondsLeftOnLoan: this.autoRenewConfig.totalTime + 1,
-    };
-    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,
@@ -215,6 +168,8 @@ export default class IABookActions extends LitElement {
   /** End SharedObserver resize handler */
 
   async setupLendingToolbarActions() {
+    this.suppressToast = false;
+
     this.lendingOptions = new GetLendingActions(
       this.userid,
       this.identifier,
@@ -235,13 +190,14 @@ 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(sentryLogs.bookWasExpired);
+      }
       this.tokenPoller?.disconnectedInterval();
       /** Global event - always fire */
       this.dispatchEvent(
@@ -251,12 +207,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();
     }
 
@@ -266,7 +223,212 @@ 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') {
+        console.log('user-action executed!');
+        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) {
+        console.log('clicked-outside');
+        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);
+
+    const config = new ToastConfig();
+    config.dismisOnClick = true;
+    config.texts = this.loanRenewHelper?.getMessageTexts(
+      this.loanRenewResult.texts,
+      this.loanRenewResult.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);
+    console.log(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() {
@@ -291,26 +453,15 @@ export default class IABookActions extends LitElement {
   get timerCountdownTemplate() {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
-          time=${Number(this.remainingTime)}
-          .autoCheckAt=${this.autoRenewConfig.autoCheckAt}
-          ?resetTimerCountdown=${this.resetTimerCountdown}
+          .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .loanRenewAtLast=${this.loanRenewTimeConfig.loanRenewAtLast}
+          .isDevBox=${this.loanRenewTimeConfig.isDevBox}
         ></timer-countdown>`
       : nothing;
   }
 
-  get toastMessageTemplate() {
-    return html`
-      <toast-message
-        .texts=${this.toastTexts}
-        ?dismisOnClick=${true}
-        ?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}
@@ -320,39 +471,56 @@ export default class IABookActions extends LitElement {
         .width=${this.width}
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
-        .autoRenew=${this.autoRenew}
-        .autoRenewConfig=${this.autoRenewConfig}
+        .localCache=${this.localCache}
+        .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
         ?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();
+
+      this.suppressToast = false;
+      await this.showToastMessage();
+      await this.browseHasRenew();
+      await this.resetTimerCountState();
+
+      window?.Sentry?.captureMessage(`${sentryLogs.bookHasRenewed}`);
+      // 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();
@@ -377,7 +545,7 @@ export default class IABookActions extends LitElement {
       this.borrowType,
       successCallback,
       errorCallback,
-      this.tokenDelay // 1000 ms = 1 sec
+      this.tokenDelay // in seconds
     );
   }
 
@@ -408,6 +576,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;
@@ -463,7 +645,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 />
+        errorLog: ${errorMsg}`;
     }
 
     this.modal.showModal({
@@ -484,11 +667,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() {
@@ -499,20 +684,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/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 () => {