@internetarchive/ia-book-actions 0.1.9-alpha2 → 0.1.9-alpha4

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 10, loanRenewAtLast: 5, pageChangedInLast: 8 };
+    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
     let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.9-alpha2",
+  "version": "0.1.9-alpha4",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -18,6 +18,7 @@
     "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
   },
   "dependencies": {
+    "@internetarchive/ia-activity-indicator": "^0.0.4",
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.12",

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

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

@@ -30,6 +30,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       returnUrl: { type: String },
       autoRenew: { type: Boolean },
       autoReturn: { type: Boolean },
+      returnNow: { type: Boolean },
     };
   }
 
@@ -51,6 +52,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.returnUrl = '';
     this.autoRenew = false;
     this.autoReturn = false;
+    this.returnNow = false;
   }
 
   updated(changed) {
@@ -68,18 +70,22 @@ export class CollapsibleActionGroup extends ActionsHandler {
     if (changed.has('autoReturn') && this.autoReturn === true) {
       this.dispatchLoanEvent('autoReturn');
     }
+
+    if (changed.has('returnNow') && this.returnNow === true) {
+      this.dispatchLoanEvent('returnNow', { borrowType: 'browse' });
+    }
   }
 
   /**
-   * dispatch event when book is auto renewed / returned
+   * dispatch event when book is auto auto-renewed / auto-returned / returned
    * listen these events in action-handler.js to execute ajax call on petabox.
    * @see ActionsHandler
    *
-   * @param {string} event - autoRenew|autoReturn
+   * @param {string} event - autoRenew|autoReturn|returnNow
    * @memberof CollapsibleActionGroup
    */
-  dispatchLoanEvent(event) {
-    this.dispatchEvent(new Event(event));
+  dispatchLoanEvent(event, detail) {
+    this.dispatchEvent(new CustomEvent(event, { detail }));
   }
 
   /**

package/src/components/timer-countdown.js

@@ -41,7 +41,7 @@ export default class TimerCountdown extends LitElement {
      * delay seconds in setInterval function
      * @type {number}
      */
-    this.timerExecutionSeconds = 60;
+    this.timerExecutionSeconds = 30;
   }
 
   disconnectedCallback() {
@@ -66,6 +66,7 @@ export default class TimerCountdown extends LitElement {
     // store current time
     this.timeWhenTimerStart = new Date();
 
+    // this.dispatchLoanRenewEvent(secondsLeft);
     /**
      * set interval in window object
      * @see ia-lending-intervals.js

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

@@ -39,7 +39,7 @@ export class LoanRenewHelper {
   }
 
   /**
-   * Trigger this function when user has browsed a book and change the post
+   * Trigger this function when user has browsed a book and change the page
    * - every time user change the page, we set current time in indexedDB
    * - also check if need to auto renew current loan
    *

package/src/ia-book-actions.js

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+/* eslint-disable class-methods-use-this */
 import { html, css, LitElement, nothing } from 'lit';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -23,11 +24,17 @@ export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
 };
 
+/**
+ * custom styling for modal-manager buttons
+ * TODO: lets allow modal-manager to know ia-button classes
+ */
 export const modalButtonStyle = {
   iaButton:
-    'min-height:3rem;cursor:pointer;color:white;border-radius:0.4rem;border:1px solid transparent;padding:4px 8px;',
-  renew: 'background:#194880;border:1px solid #c5d1df;',
-  return: 'background:#d9534f;color:white;border:1px solid #c5d1df;',
+    'min-height:3.5rem;cursor:pointer;color:white;border-radius:0.4rem;border:1px solid #c5d1df;padding:4px 8px;width:auto;user-select:none;',
+  renew: 'background:#194880;width:110px;',
+  return: 'background:#d9534f;width:120px;',
+  loaderIcon:
+    'display:inline-block;width:20px;height:20px;margin-top:2px;color:white;--activityIndicatorLoadingRingColor:#fff;--activityIndicatorLoadingDotColor:#fff;',
   refresh:
     'background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline',
 };
@@ -71,7 +78,6 @@ export default class IABookActions extends LitElement {
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
     this.modal = undefined;
-    this.toast = undefined;
     this.tokenDelay = 120; // in seconds
 
     // private props
@@ -81,10 +87,19 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = [];
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
-    this.consecutiveLoanCounts = 1; // consecutive loan count
+    this.browseTimer = undefined;
+
+    /** @deprecated */
+    this.toast = undefined;
+    /** @deprecated */
     this.suppressToast = false;
+    /** @deprecated */
     this.suppressAutoRenew = false;
-    this.browseTimer = undefined;
+
+    /**
+     * when user click on [return the book] button on warning modal
+     */
+    this.returnNow = false;
 
     /**
      * contains one hour auto-loan-renew time configuration
@@ -258,19 +273,13 @@ export default class IABookActions extends LitElement {
    * 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
+   * 2. IABookActions:loanRenew - dispatched from timer-countdown component
    */
   bindLoanRenewEvents() {
     /**
      * dispatched this event from bookreader page changed
      */
     window.addEventListener('BookReader:userAction', () => {
-      console.log('** BR user Action', {
-        suppressAutoRenew: this.suppressAutoRenew,
-        borrowType: this.borrowType,
-      });
-
       this.suppressToast = true;
       this.closeToastManager();
 
@@ -283,32 +292,13 @@ export default class IABookActions extends LitElement {
       }
     });
 
-    /**
-     * detect click-event on document to close toast-template
-     */
-    document.addEventListener('click', e => {
-      console.log('*** top level click handler to remove toast on click');
-      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
+     * 1. user turned book page after showing auto-returned warning modal
+     * 2. show warning modal having remaining time
      * @see TimerCountdown::timerCountdown
      */
     this.addEventListener('IABookActions:loanRenew', async event => {
-      console.log('** IABookActions:loanRenew', event.detail);
       await this.autoLoanRenewChecker(false);
 
       /**
@@ -324,18 +314,16 @@ export default class IABookActions extends LitElement {
         this.browseHasExpired();
       }
 
-      // show warning message with remaining time to auto returned it.
+      // show warning modal with remaining time to auto returned it.
       if (this.loanRenewResult.renewNow === false) {
         /**
          * so compensate for the 50 second buffer to handle above race conditions
          * let's reduce 1 min from warning texts and early return the book when 1 min left.
          */
         secondsLeft -= 60;
-
         this.loanRenewResult.secondsLeft = secondsLeft;
 
-        // this.showToastMessage();
-        this.showModalManager();
+        this.showWarningModal();
       }
     });
   }
@@ -360,7 +348,6 @@ export default class IABookActions extends LitElement {
 
   /**
    * create / select the modal-manager component on DOM
-   *
    * @memberof IABookActions
    */
   async useModalManager() {
@@ -374,9 +361,10 @@ export default class IABookActions extends LitElement {
     await document.body.appendChild(this.modal);
   }
 
-  async showModalManager(type = '') {
-    if (this.suppressToast) return;
-
+  /**
+   * Show the waring modal to ask user if they are still reading
+   */
+  async showWarningModal() {
     await this.useModalManager();
 
     // if secondsLeft < 60, consider it 1 minute
@@ -387,57 +375,89 @@ export default class IABookActions extends LitElement {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
-    let customContent = '';
-
     const config = new ModalConfig();
-
     config.headline = 'Are you still here?';
     config.showCloseButton = false;
     config.closeOnBackdropClick = false;
+    config.message = this.loanRenewHelper?.getMessageTexts(
+      this.loanRenewResult.texts,
+      secondsLeft
+    );
 
-    if (type === 'expired') {
-      config.message = 'This book has been returned due to inactivity.';
-      customContent = html`<br />
-        <div style="text-align: center">
-          <button
-            style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-            @click=${() => {
-              window.location?.reload();
-            }}
-          >
-            Okay
-          </button>
-        </div> `;
-    } else {
-      config.message = this.loanRenewHelper?.getMessageTexts(
-        this.loanRenewResult.texts,
-        secondsLeft
-      );
-      customContent = html`<br />
-        <div style="text-align: center">
-          <button
-            style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-            @click=${() => {
-              this.autoLoanRenewChecker(true);
-            }}
-          >
-            Keep reading
-          </button>
-          <button
-            style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-            @click=${() => {
-              this.dispatchEvent(new CustomEvent('returnNow', {}));
-              // this.browseHasExpired();
-            }}
-          >
-            Return the book
-          </button>
-        </div> `;
-    }
+    const customContent = html`<br />
+      <div id="custom-buttons" style="display:flex;justify-content:center;">
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${async event => {
+            this.changeModalState(event);
+            this.autoLoanRenewChecker(true);
+          }}
+        >
+          Keep reading
+        </button>
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
+          @click=${async event => {
+            this.changeModalState(event);
+            document.querySelector('ia-book-actions').disableActionGroup = true;
+            this.returnNow = true;
+          }}
+        >
+          Return the book
+        </button>
+      </div> `;
 
     this.modal.showModal({ config, customModalContent: customContent });
   }
 
+  /**
+   * helper function to change button click states on modal-manager
+   * - add loader on button click
+   * - change button appearance
+   *
+   * @param {Event} event
+   */
+  changeModalState(event) {
+    if (event.target === undefined) return;
+
+    const button = event.target;
+    button.innerHTML = `<ia-activity-indicator
+      mode="processing"
+      style=${modalButtonStyle.loaderIcon}
+    ></ia-activity-indicator>`;
+
+    const parentElement = event.target.parentNode;
+    parentElement.style.pointerEvents = 'none';
+    parentElement.style.opacity = 0.8;
+  }
+
+  /**
+   * Show modal when book is auto returned
+   */
+  async showExpiredModal() {
+    await this.useModalManager();
+
+    const config = new ModalConfig();
+    config.headline = '';
+    config.showCloseButton = false;
+    config.closeOnBackdropClick = false;
+    config.message = 'This book has been returned due to inactivity.';
+
+    const customContent = html`<br />
+      <div style="text-align: center">
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${() => {
+            window.location?.reload();
+          }}
+        >
+          Okay
+        </button>
+      </div> `;
+
+    this.modal?.showModal({ config, customModalContent: customContent });
+  }
+
   /**
    * close/hide modal-manager
    */
@@ -560,11 +580,9 @@ export default class IABookActions extends LitElement {
     // show message after browsed book is expired.
     this.loanRenewResult.renewNow = false;
     this.loanRenewResult.texts =
-      'This book has been automatically returned due to inactivity.';
+      'This book has been returned due to inactivity.';
 
-    // this.suppressToast = false;
-    // this.showToastMessage();
-    this.showModalManager('expired');
+    this.showExpiredModal();
 
     window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
   }
@@ -642,6 +660,7 @@ export default class IABookActions extends LitElement {
         ?disabled=${this.disableActionGroup}
         ?autoRenew=${this.loanRenewResult.renewNow}
         ?autoReturn=${this.lendingStatus.browsingExpired}
+        ?returnNow=${this.returnNow}
         @loanAutoRenewed=${this.handleLoanAutoRenewed}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
@@ -665,11 +684,11 @@ export default class IABookActions extends LitElement {
 
       this.suppressToast = false;
       await this.browseHasRenew();
-      // await this.showToastMessage();
       await this.resetTimerCountState();
 
       // close the modal
-      await this.modal?.closeModal();
+      this.modal?.remove();
+      this.modal?.showModal({ config: {}, customModalContent: `` });
 
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
 
@@ -723,7 +742,7 @@ export default class IABookActions extends LitElement {
     this.disableActionGroup = !this.disableActionGroup;
   }
 
-  /*
+  /**
    * handle lending errors occure during different operation like
    * browse book, borrow book, borrowed book token etc...
    *

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

@@ -80,7 +80,7 @@ describe('Loan Renew Determine', () => {
     );
 
     expect(toastMsg).to.be.equal(
-      'This book will be automatically returned in 2 minutes unless you turn a page.'
+      'With no action, this book will be auto-returned in 2 minutes.'
     );
   });
 });

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

@@ -188,7 +188,9 @@ describe('Borrow status actions', () => {
       },
     ];
 
-    expect(el.primaryTitle).to.equal('');
+    expect(el.primaryTitle).to.equal(
+      'Renews automatically as long as pages are turned.'
+    );
     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);
@@ -274,7 +276,7 @@ describe('Browsing expired status', () => {
     expect(el.loanRenewResult.renewNow).to.equal(false);
     expect(el.loanRenewResult.secondsLeft).to.equal(0);
     expect(el.loanRenewResult.texts).to.equal(
-      'This book has been automatically returned due to inactivity.'
+      'This book has been returned due to inactivity.'
     );
   });