@internetarchive/ia-book-actions 0.1.11-b3 → 0.1.11-b31

package/demo/index.html

@@ -356,5 +356,6 @@
         </table>
     </fieldset>
   </div>
+  <modal-manager></modal-manager>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.1.11-b3",
+  "version": "0.1.11-b31",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/core/services/actions-handler/actions-handler-service.js

@@ -21,7 +21,7 @@ export default async function ActionsHandlerService(options) {
   const tokenError = 'loan token not found. please try again later.';
   const borrowError =
     'This book is not available to borrow at this time. Please try again later.';
-  const erroneousActions = ['browse_book', 'borrow_book', 'create_token'];
+  const erroneousActions = ['browse_book', 'borrow_book', 'create_token', 'renew_loan'];
   const shouldReturnError =
     location?.href?.indexOf('?error=true') !== -1 &&
     location?.hostname !== 'archive.org';

package/src/core/services/actions-handler/actions-handler.js

@@ -142,7 +142,13 @@ export default class ActionsHandler extends LitElement {
       action,
       identifier: this.identifier,
       success: data => {
-        console.log("RENEW_LOAN --- ", data, action, data.loan, this.identifier);
+        console.log(
+          'RENEW_LOAN --- ',
+          data,
+          action,
+          data.loan,
+          this.identifier
+        );
         if (data?.success === true && data?.loan?.renewal === true) {
           this.setBrowseTimeSession();
           this.dispatchEvent(

package/src/ia-book-actions.js

@@ -18,7 +18,7 @@ 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';
+import { LoanRenewHelper } from './core/services/loan-renew-helper.js'
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -77,7 +77,6 @@ export default class IABookActions extends LitElement {
     this.barType = 'action'; // 'title'|'action'
     this.sharedObserver = undefined;
     this.disableActionGroup = false;
-    this.modal = undefined;
     this.tokenDelay = 120; // in seconds
 
     // private props
@@ -105,7 +104,7 @@ export default class IABookActions extends LitElement {
      *  loanTotalTime: number, - total seconds a loan does have
      *  loanRenewAtLast: number, - check for loan renew at last
      *  pageChangedInLast: number, - consider loan renew eligible if viewed new page
-    */
+     */
     this.loanRenewTimeConfig = {
       loanTotalTime: 3600, // 1 hour
       loanRenewAtLast: 660, // 11 minutes
@@ -257,7 +256,9 @@ export default class IABookActions extends LitElement {
     // initial timer state for 1-hour loan
     if (this.borrowType === 'browsed' && !this.loanRenewResult.renewNow) {
       setTimeout(() => {
-        console.log('IN TIMEOUT OF --- setupLendingToolbarActions, firing resetTimerCountState');
+        console.log(
+          'IN TIMEOUT OF --- setupLendingToolbarActions, firing resetTimerCountState'
+        );
         this.resetTimerCountState();
       }, 100);
     }
@@ -306,19 +307,12 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
-  /**
-   * 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');
-    }
+  /** @returns HTMLElement */
+  get modal() {
+    const modalOnDom = document.querySelector('modal-manager');
 
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+    modalOnDom.id = 'action-bar-modal';
+    return modalOnDom;
   }
 
   /**
@@ -326,7 +320,11 @@ export default class IABookActions extends LitElement {
    */
   async showWarningModal() {
     console.log('****** showWarningModal ******');
-    await this.useModalManager();
+    // clear modal
+    this.modal.customModalContent = nothing;
+    this.modal?.closeModal();
+    console.log("MODAL CLOSED ___ ", this.modal.customModalContent);
+    this.loanRenewResult = { texts: '', renewNow: false };
 
     // if secondsLeft < 60, consider it 1 minute
     let { secondsLeft } = this.loanRenewResult;
@@ -336,30 +334,28 @@ export default class IABookActions extends LitElement {
       secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
     }
 
-    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
-    );
+    const config = new ModalConfig({
+      headline: 'Are you still here?',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: this.loanRenewHelper?.getMessageTexts(
+        this.loanRenewResult.texts,
+        secondsLeft
+      )
+    });
 
-    const customContent = html`<br />
-      <div id="custom-buttons" style="display:flex;justify-content:center;">
+    const customModalContent = html`<br />
+      <div id="book-action-bar-custom-buttons" style="display:flex;justify-content:center;">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
-          @click=${async event => {
-            await this.changeModalState(event);
-            this.loanRenewResult = { texts: '', renewNow: true };
-          }}
+          @click=${event => this.patronWantsToRenewBook(event)}
         >
           Keep reading
         </button>
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
-          @click=${event => {
-            this.changeModalState(event);
+          @click=${() => {
+            // this.changeModalState(event);
             document.querySelector('ia-book-actions').disableActionGroup = true;
             this.returnNow = true;
           }}
@@ -368,7 +364,77 @@ export default class IABookActions extends LitElement {
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
+
+    await this.modal?.showModal({ config, customModalContent });
+  }
+
+  async showWarningDisabledModal() {
+    console.log('****** showWarningDisabledModal ******');
+
+    // if secondsLeft < 60, consider it 1 minute
+    let { secondsLeft } = this.loanRenewResult;
+    if (secondsLeft === undefined) {
+      secondsLeft = this.lendingStatus.secondsLeftOnLoan;
+    } else {
+      secondsLeft = secondsLeft > 60 ? secondsLeft : 60;
+    }
+
+    const config = new ModalConfig({
+      headline: 'Are you still here?',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: this.loanRenewHelper?.getMessageTexts(
+        this.loanRenewResult.texts,
+        secondsLeft
+      )
+    });
+
+
+        // this doesn't really work? shows empty button
+
+        // if (event.target === undefined) return;
+
+        // const button = event.target;
+        // button.disabled = true;
+        // 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;
+
+
+    const customModalContent = html`<br />
+      <div id="disabled-book-action-bar-custom-buttons" style="display:flex;justify-content:center; opacity:0.8; pointer-events:none;">
+        <button
+          disabled
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
+        >
+          <ia-activity-indicator
+            mode="processing"
+            style=${modalButtonStyle.loaderIcon}
+          ></ia-activity-indicator>
+        </button>
+        <button
+          disabled
+          style="${modalButtonStyle.iaButton} ${modalButtonStyle.return}"
+        >
+          Return the book
+        </button>
+      </div> `;
+
+    await this.modal?.showModal({ config, customModalContent });
+  }
+
+  
+
+  async patronWantsToRenewBook(event) {
+    // this.changeModalState(event);
+    console.log("patron wants to renew book!!!!", this.loanRenewResult);
+    this.loanRenewResult = { texts: '', renewNow: true };
+    console.log("patron wants to renew book!!!! loanRenewResult set as: ", this.loanRenewResult);
   }
 
   /**
@@ -378,18 +444,22 @@ export default class IABookActions extends LitElement {
    *
    * @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;
+  changeModalState() {
+    this.showWarningDisabledModal();
+    // this doesn't really work? shows empty button
+
+    // if (event.target === undefined) return;
+
+    // const button = event.target;
+    // button.disabled = true;
+    // 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;
   }
 
   /**
@@ -397,15 +467,15 @@ export default class IABookActions extends LitElement {
    */
   async showExpiredModal() {
     console.log('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 config = new ModalConfig({
+      headline: '',
+      showCloseButton: false,
+      closeOnBackdropClick: false,
+      message: 'This book has been returned due to inactivity.'
+    });
 
-    const customContent = html`<br />
+    const customModalContent = html`<br />
       <div style="text-align: center">
         <button
           style="${modalButtonStyle.iaButton} ${modalButtonStyle.renew}"
@@ -417,15 +487,7 @@ export default class IABookActions extends LitElement {
         </button>
       </div> `;
 
-    this.modal?.showModal({ config, customModalContent: customContent });
-  }
-
-  /**
-   * close/hide modal-manager
-   */
-  async closeModalManager() {
-    this.modal = document.querySelector('modal-manager');
-    this.modal?.closeModal();
+    await this.modal?.showModal({ config, customModalContent });
   }
 
   /**
@@ -508,7 +570,11 @@ export default class IABookActions extends LitElement {
 
   async startBrowseTimer() {
     clearTimeout(this.browseTimer);
-    console.log('startBrowseTimerstartBrowseTimer just cleared timer', this.browseTimer, this.lendingStatus);
+    console.log(
+      'startBrowseTimerstartBrowseTimer just cleared timer',
+      this.browseTimer,
+      this.lendingStatus
+    );
 
     const {
       browsingExpired,
@@ -521,7 +587,10 @@ export default class IABookActions extends LitElement {
     }
 
     this.browseTimer = setTimeout(() => {
-      console.log('start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan', secondsLeftOnLoan);
+      console.log(
+        'start `this.browseTimer will fire his.browseHasExpired() - secondsLeftOnLoan',
+        secondsLeftOnLoan
+      );
       this.browseHasExpired();
     }, secondsLeftOnLoan * 1000);
   }
@@ -533,11 +602,22 @@ export default class IABookActions extends LitElement {
     const timerCountdown = this._shadowRoot.querySelector('timer-countdown');
     if (!timerCountdown) return;
 
-    const secondsLeft = Number.parseInt((Number(this.lendingStatus.secondsLeftOnLoan)), 10);
-    const strokeDashOffset =
-      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315;
+    const secondsLeft = Number.parseInt(
+      Number(this.lendingStatus.secondsLeftOnLoan),
+      10
+    );
+    const firstStrokeDashOffset = Number.parseInt(
+      (secondsLeft / this.loanRenewTimeConfig.loanTotalTime) * 315 * 1.5,
+      10
+    );
+    const actualStrokeDashOffset =
+      firstStrokeDashOffset > 315 ? 315 : firstStrokeDashOffset;
 
-      console.log('resetTimerCountState === ', { secondsLeft, strokeDashOffset});
+    console.log('resetTimerCountState === ', {
+      secondsLeft,
+      firstStrokeDashOffset,
+      actualStrokeDashOffset,
+    });
 
     // set seconds left in loan expire
     timerCountdown.style?.setProperty('--secondsLeftOnLoan', `${secondsLeft}s`);
@@ -545,7 +625,7 @@ export default class IABookActions extends LitElement {
     // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
       '--strokeLeftOnLoan',
-      `${Number(strokeDashOffset)}` // the perimeter of the circle = (π * 2 * radius)
+      `${actualStrokeDashOffset}` // the perimeter of the circle = (π * 2 * radius)
     );
 
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
@@ -574,14 +654,6 @@ export default class IABookActions extends LitElement {
     ></book-title-bar>`;
   }
 
-  get timerCountdownTemplate() {
-    return this.borrowType === 'browsed'
-      ? html`<timer-countdown
-          .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
-        ></timer-countdown>`
-      : nothing;
-  }
-
   get bookActionBar() {
     return html`
       <collapsible-action-group
@@ -606,7 +678,10 @@ export default class IABookActions extends LitElement {
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
-      ${this.timerCountdownTemplate}
+      <timer-countdown
+        .secondsLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
+        class=${this.borrowType === 'browsed' ? '' : 'hide'}
+      ></timer-countdown>
     `;
   }
 
@@ -628,11 +703,10 @@ export default class IABookActions extends LitElement {
         secondsLeftOnLoan: Math.round(this.lendingStatus.secondsLeftOnLoan), // stale? how to fix
       });
 
-
       // Now, let's reset loan duration & this.lendingStatus
       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,
@@ -642,17 +716,23 @@ export default class IABookActions extends LitElement {
       this.lendingStatus = currStatus;
 
       console.log('~~~ handleLoanAutoRenewed - new this.lendingStatus', {
-        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan
+        secondsLeftOnLoan: this.lendingStatus.secondsLeftOnLoan,
       });
-  
+
       /**
        * reset timer countdown states
        */
       await this.resetTimerCountState();
 
       // close the modal
-      this.modal?.remove();
-      this.modal?.showModal({ config: {}, customModalContent: `` });
+      this.modal.removeAttribute('id');
+      // const editedActionButtons = this.modal.shadowRoot.querySelector('#book-action-bar-custom-buttons');
+      // if (editedActionButtons) {
+      //   editedActionButtons.parentElement.removeChild(editedActionButtons);
+      // }
+      this.modal.customModalContent = nothing;
+      this.modal?.closeModal();
+      console.log("MODAL CLOSED ___ ", this.modal.customModalContent);
 
       window?.Sentry?.captureMessage(sentryLogs.bookHasRenewed);
     }
@@ -679,7 +759,10 @@ export default class IABookActions extends LitElement {
       // if really updated, escape from here
       const resync = await this.reSyncTimerIfGoneOff(secondsLeft);
 
-      console.log("*** startTimerCountdown = reSyncTimerIfGoneOff ***", { secondsLeft, resync });
+      console.log('*** startTimerCountdown = reSyncTimerIfGoneOff ***', {
+        secondsLeft,
+        resync,
+      });
 
       if (resync) {
         console.log('have resyncd, will end startTimerCountdown here - ');
@@ -887,7 +970,6 @@ export default class IABookActions extends LitElement {
 
   /* show error message if something went wrong */
   async showErrorModal(errorMsg, action) {
-    await this.useModalManager();
 
     const modalConfig = new ModalConfig({
       title: 'Lending error',
@@ -915,7 +997,7 @@ export default class IABookActions extends LitElement {
         <code>errorLog: ${errorMsg}</code>`;
     }
 
-    this.modal?.showModal({
+    await this.modal?.showModal({
       config: modalConfig,
     });
   }
@@ -952,6 +1034,10 @@ export default class IABookActions extends LitElement {
         display: block;
       }
 
+      .hide {
+        display: none;
+      }
+
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;