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

package/demo/index.html

@@ -131,7 +131,7 @@
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 65, loanRenewAtLast: 60, pageChangedInLast: 15 };
+    let loanTotalTime2Min = { loanTotalTime: 10, loanRenewAtLast: 5, pageChangedInLast: 8 };
     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.7",
+  "version": "0.1.9-alpha1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/assets/data/lending-get-status-service.js

@@ -100,7 +100,7 @@ export const canBrowseAndBorrow = {
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
   daysLeftOnLoan: 0,
-  isAdmin: true,
+  isAdmin: false,
   isArchiveOrgLending: true,
   isAvailable: false,
   isAvailableForBrowsing: false,

package/src/components/timer-countdown.js

@@ -194,6 +194,8 @@ export default class TimerCountdown extends LitElement {
         right: 0;
         margin-right: 10px;
         position: absolute;
+        height: 20px;
+        width: 20px;
       }
 
       @keyframes circletimer {

package/src/core/config/constants.js

@@ -1,2 +1,9 @@
-export const mobileContainerWidth = 550;
-export const tabletContainerWidth = 767;
+/**
+ * hide the primary texts below this resolution
+ */
+export const mobileContainerWidth = 700;
+
+/**
+ * shift the actions buttons in dropdown
+ */
+export const tabletContainerWidth = 895;

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

@@ -40,7 +40,7 @@ import ActionsConfig from './actions-config.js';
  * @enum {string}
  */
 export const bookTitles = {
-  available_1hr: 'Renews each hour as long as pages are turned.',
+  available_1hr: 'Renews automatically as long as pages are turned.',
   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: '',
+  session_expired: 'Renews automatically as long as pages are turned.',
   unavailable: 'This book is not available at this time.',
 };
 
@@ -98,8 +98,7 @@ export class GetLendingActions {
     let isBrowsing =
       lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
     if (isBrowsing) {
-      primaryTitleText =
-        'Returns automatically after 25 minutes of inactivity.';
+      primaryTitleText = bookTitles.available_1hr;
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
     }

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

@@ -16,7 +16,7 @@ export class LoanRenewHelper {
     this.loanRenewMessage =
       'This book has been renewed for #time #unitsOfTime.';
     this.loanReturnWarning =
-      'This book will be automatically returned in #time #unitsOfTime unless you turn a page.';
+      'With no action, this book will be auto-returned in #time #unitsOfTime.';
 
     // private props
     this.result = {

package/src/ia-book-actions.js

@@ -23,6 +23,15 @@ export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
 };
 
+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;',
+  refresh:
+    'background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline',
+};
+
 export default class IABookActions extends LitElement {
   static get properties() {
     return {
@@ -62,6 +71,7 @@ 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
@@ -287,7 +297,7 @@ export default class IABookActions extends LitElement {
         'browsingExpired' in this.lendingStatus &&
         this.lendingStatus?.browsingExpired;
       if (hasExpired && e.target.nodeName !== 'IA-BOOK-ACTIONS') {
-        window.location?.reload();
+        // window.location?.reload();
       }
     });
 
@@ -323,7 +333,9 @@ export default class IABookActions extends LitElement {
         secondsLeft -= 60;
 
         this.loanRenewResult.secondsLeft = secondsLeft;
-        this.showToastMessage();
+
+        // this.showToastMessage();
+        this.showModalManager();
       }
     });
   }
@@ -347,17 +359,126 @@ export default class IABookActions extends LitElement {
   }
 
   /**
+   * create / select the modal-manager component on DOM
+   *
+   * @memberof IABookActions
+   */
+  async useModalManager() {
+    if (!this.modal) {
+      this.modal = document.querySelector('modal-manager');
+
+      if (!this.modal) this.modal = document.createElement('modal-manager');
+    }
+
+    this.modal.id = 'action-bar-modal';
+    await document.body.appendChild(this.modal);
+  }
+
+  async showModalManager(type = '') {
+    if (this.suppressToast) return;
+
+    await this.useModalManager();
+
+    // if secondsLeft < 60, consider it 1 minute
+    let { secondsLeft } = this.loanRenewResult;
+    if (secondsLeft === undefined) {
+      secondsLeft = this.lendingStatus.secondsLeftOnLoan;
+    } else {
+      secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
+    }
+
+    let customContent = '';
+
+    const config = new ModalConfig();
+
+    config.headline = 'Are you still here?';
+    config.showCloseButton = false;
+    config.closeOnBackdropClick = false;
+
+    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> `;
+    }
+
+    this.modal.showModal({ config, customModalContent: customContent });
+  }
+
+  /**
+   * close/hide modal-manager
+   */
+  async closeModalManager() {
+    console.log('** closeModalManager');
+    this.modal = document.querySelector('modal-manager');
+    if (this.modal) {
+      this.modal?.closeModal();
+    }
+  }
+
+  /**
+   * @deprecated
+   * create / select the toast-template component on DOM
+   *
+   * @memberof IABookActions
+   */
+  async useToastManager() {
+    if (!this.toast) {
+      this.toast = this.shadowRoot.querySelector('toast-template');
+
+      if (!this.toast) this.toast = document.createElement('toast-template');
+    }
+
+    await this.shadowRoot.appendChild(this.toast);
+  }
+
+  /**
+   * @deprecated
    * close/hide toast message
    */
   async closeToastManager() {
     console.log('** closeToastManager');
-    const toastTemplate = this.shadowRoot.querySelector('toast-template');
-    if (toastTemplate) {
-      toastTemplate?.remove();
+    this.toast = this.shadowRoot.querySelector('toast-template');
+    if (this.toast) {
+      this.toast?.remove();
     }
   }
 
   /**
+   * @deprecated
    * Show toast messages on some specific loan renew features. e.g.
    * - show message when book is auto renewed
    * - show message when book is expired
@@ -370,11 +491,7 @@ export default class IABookActions extends LitElement {
     });
     if (this.suppressToast) return;
 
-    let toastTemplate = this.shadowRoot.querySelector('toast-template');
-    if (!toastTemplate) {
-      toastTemplate = document.createElement('toast-template');
-    }
-    await this.shadowRoot.appendChild(toastTemplate);
+    await this.useToastManager();
 
     // if secondsLeft < 60, consider it 1 minute
     let { secondsLeft } = this.loanRenewResult;
@@ -391,7 +508,7 @@ export default class IABookActions extends LitElement {
       secondsLeft
     );
 
-    toastTemplate.showToast({
+    this.toast?.showToast({
       config,
     });
   }
@@ -445,8 +562,9 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult.texts =
       'This book has been automatically returned due to inactivity.';
 
-    this.suppressToast = false;
-    this.showToastMessage();
+    // this.suppressToast = false;
+    // this.showToastMessage();
+    this.showModalManager('expired');
 
     window?.Sentry?.captureMessage(sentryLogs.browseHasExpired);
   }
@@ -547,9 +665,12 @@ export default class IABookActions extends LitElement {
 
       this.suppressToast = false;
       await this.browseHasRenew();
-      await this.showToastMessage();
+      // await this.showToastMessage();
       await this.resetTimerCountState();
 
+      // close the modal
+      await this.modal?.closeModal();
+
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
 
       // testing console....
@@ -656,16 +777,7 @@ export default class IABookActions extends LitElement {
 
   /* show error message if something went wrong */
   async showErrorModal(errorMsg, action) {
-    // check if this.modal passed as prop
-    if (!this.modal) {
-      this.modal = document.querySelector('modal-manager');
-
-      // check the DOM if <modal-manager> already there
-      if (!this.modal) this.modal = document.createElement('modal-manager');
-    }
-
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+    await this.useModalManager();
 
     const modalConfig = new ModalConfig({
       title: 'Lending error',
@@ -676,7 +788,7 @@ export default class IABookActions extends LitElement {
 
     if (action === 'create_token') {
       const refreshButton = html`<button
-        style="background:none;font-size:inherit;border:0;padding:0;color:#0000ee;cursor:pointer;text-decoration:underline"
+        style="${modalButtonStyle.refresh}"
         @click=${() => window.location.reload(true)}
       >
         refresh