@internetarchive/ia-book-actions 0.1.9-alpha1 → 0.1.9-alpha3

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 10, loanRenewAtLast: 5, pageChangedInLast: 8 };
+    let loanTotalTime2Min = { loanTotalTime: 100, loanRenewAtLast: 97, 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-alpha1",
+  "version": "0.1.9-alpha3",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -18,9 +18,10 @@
     "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.8",
+    "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@internetarchive/toast-manager": "0.1.0",
     "lit": "^2.5.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: 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/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

@@ -25,9 +25,11 @@ export const events = {
 
 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;',
+  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',
 };
@@ -54,6 +56,7 @@ export default class IABookActions extends LitElement {
       localCache: { type: Object },
       loanRenewTimeConfig: { type: Object },
       loanRenewResult: { type: Object },
+      _active: { state: true },
     };
   }
 
@@ -81,10 +84,15 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = [];
     this.lendingOptions = {};
     this.borrowType = ''; // (browsed|borrowed)
-    this.consecutiveLoanCounts = 1; // consecutive loan count
     this.suppressToast = false;
     this.suppressAutoRenew = false;
     this.browseTimer = undefined;
+    this._attemptToRenew = false;
+
+    /**
+     * when user click on [return the book] button on warning modal
+     */
+    this.returnNow = false;
 
     /**
      * contains one hour auto-loan-renew time configuration
@@ -258,19 +266,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,28 +285,10 @@ 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 => {
@@ -324,18 +308,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 +342,6 @@ export default class IABookActions extends LitElement {
 
   /**
    * create / select the modal-manager component on DOM
-   *
    * @memberof IABookActions
    */
   async useModalManager() {
@@ -374,9 +355,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 +369,79 @@ 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;${this._attemptToRenew
+          ? 'pointer-events:none;opacity:0.8'
+          : ''}"
+      >
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+          @click=${() => {
+            console.log('clicked on keep reading button');
+            // e.target.parentNode.style.pointerEvents = "none";
+            // e.target.parentNode.style.opacity = "0.8";
+            this._attemptToRenew = true;
+            this.autoLoanRenewChecker(true);
+          }}
+        >
+          ${this._attemptToRenew
+            ? html` <ia-activity-indicator
+                mode="processing"
+                style=${modalButtonStyle.loaderIcon}
+              ></ia-activity-indicator>`
+            : 'Keep reading'}
+        </button>
+        <button
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
+          @click=${() => {
+            this.returnNow = true;
+          }}
+        >
+          Return the book
+        </button>
+      </div> `;
 
     this.modal.showModal({ config, customModalContent: customContent });
   }
 
+  /**
+   * 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 +564,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 +644,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}
@@ -662,14 +665,14 @@ export default class IABookActions extends LitElement {
   async handleLoanAutoRenewed(event) {
     if (this.loanRenewResult.renewNow) {
       window?.IALendingIntervals?.clearAll();
+      this._attemptToRenew = false;
 
       this.suppressToast = false;
       await this.browseHasRenew();
-      // await this.showToastMessage();
       await this.resetTimerCountState();
 
       // close the modal
-      await this.modal?.closeModal();
+      await this.modal.closeModal();
 
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
 
@@ -723,7 +726,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...
    *