@internetarchive/ia-book-actions 0.0.29-alpha22 → 0.0.29-alpha24

package/demo/index.html

@@ -129,7 +129,8 @@
     iaBookActions.loanRenewConfig = {
       totalTime: 20, // 60 second = 1 min
       autoCheckAt: 15, // totalTime - 10th minute
-      pageChangedInLast: 15, // within last 15 second/minute 
+      pageChangedInLast: 15, // within last 15 second/minute
+      env: 'dev', // dev/prod
     };
 
     let lendingStatus1 = iaBookActions.lendingStatus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha22",
+  "version": "0.0.29-alpha24",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,7 +22,7 @@
     "@internetarchive/local-cache": "^0.2.0",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.0.1-alpha8",
+    "@internetarchive/toast-manager": "0.0.1-alpha9",
     "lit": "^2.5.0"
   },
   "devDependencies": {

package/src/components/timer-countdown.js

@@ -3,14 +3,14 @@ import { html, css, LitElement } from 'lit';
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
-      time: { type: Number },
+      timeLeftOnLoan: { type: Number },
       autoCheckAt: { type: Number },
     };
   }
 
   constructor() {
     super();
-    this.time = 0;
+    this.timeLeftOnLoan = 0;
     this.autoCheckAt = 0;
 
     // private props
@@ -22,7 +22,7 @@ export default class TimerCountdown extends LitElement {
   }
 
   updated(changed) {
-    if (changed.has('time') && this.time > 0) {
+    if (changed.has('timeLeftOnLoan') && this.timeLeftOnLoan > 0) {
       clearInterval(this.timerInterval);
       this.timerCountdown();
     }
@@ -30,17 +30,17 @@ export default class TimerCountdown extends LitElement {
 
   timerCountdown() {
     this.timerInterval = setInterval(() => {
-      this.time -= 1;
+      this.timeLeftOnLoan -= 1;
 
       // execute from last 10th minute to 0th minute
       // - 10th - to check if user has viewed
       // - till 0th - to show warning msg with remaining time to auto returned
-      if (Math.round(this.time) <= this.autoCheckAt) {
+      if (Math.round(this.timeLeftOnLoan) <= this.autoCheckAt) {
         this.dispatchEvent(
           new CustomEvent('IABookActions:loanRenew', {
             detail: {
               hasPageChanged: false,
-              timeLeft: Math.round(this.time),
+              timeLeft: Math.round(this.timeLeftOnLoan),
             },
             bubbles: true,
             composed: true,
@@ -49,7 +49,7 @@ export default class TimerCountdown extends LitElement {
       }
 
       // clear interval if timer is < this.autoCheckAt
-      if (this.time < this.autoCheckAt) {
+      if (this.timeLeftOnLoan < this.autoCheckAt) {
         clearInterval(this.timerInterval);
       }
     }, 1000);
@@ -65,6 +65,7 @@ export default class TimerCountdown extends LitElement {
       >
         <circle class="circle" cx="50" cy="50" r="50" />
       </svg>
+      <span>${Math.round(this.timeLeftOnLoan)}</span>
     `;
   }
 

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

@@ -36,7 +36,7 @@ export default class ActionsConfig {
   firstBrowseConfig() {
     return {
       id: 'browseBook',
-      text: 'Borrow for 1 hour',
+      text: 'Borrow', // changed texts from 'Borrow for 1 hour' to 'Borrow'
       className: 'primary',
       analyticsEvent: {
         category: this.analyticsCategories.preview,
@@ -48,7 +48,7 @@ export default class ActionsConfig {
   browseAgainConfig() {
     return {
       id: 'browseBookAgain',
-      text: 'Borrow again',
+      text: 'Borrow', // changed texts fro 'Borrow again' to 'Borrow'
       className: 'primary',
       analyticsEvent: {
         category: this.analyticsCategories.browse,

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

@@ -20,15 +20,12 @@ export class LoanRenewHelper {
     this.result = {
       texts: null,
       renewNow: false,
-      timeLeft: 0,
     };
   }
 
   handleLoanRenew() {
     try {
       if (this.hasPageChanged) {
-        // when user click/flip on book page
-        this.showToastMessage();
         return this.pageChanged(); // user clicked on page
       }
       return this.autoChecker(); // auto checker at 50th minute
@@ -64,6 +61,7 @@ export class LoanRenewHelper {
     if (currentTime >= lastTimeFrame) {
       this.result.texts = this.loanRenewMessage;
       this.result.renewNow = true;
+      console.log('manually renewed by page click!');
     }
 
     this.setPageChangedTime();
@@ -96,10 +94,11 @@ export class LoanRenewHelper {
     ) {
       this.result.texts = this.loanReturnWarning;
       this.result.renewNow = false; // not viewed
-      this.showToastMessage();
+      console.log('not viewed!');
     } else if (lastPageFlipTime >= lastFlipTimeFrame) {
       this.result.texts = '';
       this.result.renewNow = true; // viewed in last time frame
+      console.log('silently renewed!');
     }
 
     return this.result;
@@ -123,6 +122,8 @@ export class LoanRenewHelper {
    * - show warninig msg when book is about to auto returned
    */
   async showToastMessage() {
+    if (this.hideToast) return false;
+
     const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
     let toastTemplate = iaBookActions.querySelector('toast-template');
     if (!toastTemplate) {

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';
@@ -73,6 +74,7 @@ export default class IABookActions extends LitElement {
     // loan auto renew
     this.browserTimer = undefined;
     this.loanRenewConfig = {};
+    this.suppressToast = false;
 
     /**
      * contains loan auto-renew response
@@ -82,6 +84,7 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = {
       texts: null,
       renewNow: false,
+      timeLeft: 0
     };
 
     this._shadowRoot = this.attachShadow({ mode: 'open' });
@@ -234,12 +237,19 @@ export default class IABookActions extends LitElement {
     // dispatched this event from bookreader page changed
     window.addEventListener('BookReader:pageChanged', event => {
       if (this.borrowType === 'browsed' && event.detail.hasPageChanged) {
+        console.log('actual page changed executed!')
         this.autoLoanRenewChecker(true);
       }
 
       return nothing;
     });
 
+    document.addEventListener('click', () => {
+      if (this.loanRenewHelper && this.loanRenewHelper.result.renewNow === false) {
+        this.suppressToast = true;
+      }
+    });
+
     /**
      * this event dispatched from timer-countdown component for:
      * 1. user turned book page after showing auto-returned warning message
@@ -252,8 +262,8 @@ export default class IABookActions extends LitElement {
 
       // show warning message with remaining time to auto returned it.
       if (this.loanRenewHelper.result.renewNow === false) {
-        this.loanRenewHelper.result.timeLeft = eventDetails.timeLeft;
-        this.loanRenewHelper.showToastMessage();
+        this.loanRenewResult.timeLeft = eventDetails.timeLeft;
+        this.showToastMessage();
       }
     });
   }
@@ -271,6 +281,25 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
+  async showToastMessage() {
+    if (this.suppressToast) return false;
+
+    // this.result = this.loanRenewHelper.result;
+    const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
+    let toastTemplate = iaBookActions.querySelector('toast-template');
+    if (!toastTemplate) {
+      toastTemplate = document.createElement('toast-template');
+    }
+    await iaBookActions.appendChild(toastTemplate);
+
+    const config = new ToastConfig();
+    config.texts = this.loanRenewResult.texts?.replace(/#time/, this.loanRenewResult.timeLeft);
+    config.dismisOnClick = true;
+    toastTemplate.showToast({
+      config,
+    });
+  }
+
   async browseHasRenew() {
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
     const secondsLeft = (loanTime - new Date()) / 1000; // different in seconds
@@ -320,7 +349,8 @@ export default class IABookActions extends LitElement {
     this.loanRenewResult.texts =
       'This book has been automatically returned due to inactivity.';
 
-    this.loanRenewHelper.showToastMessage();
+    this.suppressToast = false;
+    this.showToastMessage();
   }
 
   /**
@@ -377,7 +407,7 @@ export default class IABookActions extends LitElement {
   get timerCountdownTemplate() {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
-          .time=${Number(this.lendingStatus.secondsLeftOnLoan)}
+          .timeLeftOnLoan=${Number(this.lendingStatus.secondsLeftOnLoan)}
           .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
         ></timer-countdown>`
       : nothing;
@@ -418,7 +448,9 @@ export default class IABookActions extends LitElement {
   async handleLoanAutoRenewed() {
     if (this.loanRenewResult.renewNow) {
       this.tokenPoller.disconnectedInterval();
-      await this.loanRenewHelper.showToastMessage();
+
+      this.suppressToast = false;
+      await this.showToastMessage();
       await this.browseHasRenew();
       await this.resetTimerCountState();
     }

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 () => {

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

@@ -25,7 +25,7 @@ describe('Get Lending Actions', () => {
 
     expect(actions.primaryTitle).to.equal(bookTitles.available_1hr);
     expect(actions.primaryActions.length).to.equal(3);
-    expect(actions.primaryActions[0].text).to.equal('Borrow for 1 hour');
+    expect(actions.primaryActions[0].text).to.equal('Borrow');
     expect(actions.primaryActions[1].text).to.equal('Borrow for 14 days');
     expect(actions.secondaryActions[1].text).to.equal('Purchase at');
   });
@@ -111,7 +111,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.claim_waitlist);
         expect(actions.primaryActions.length).to.equal(3);
         expect(actions.primaryActions[0].text).to.equal('Borrow for 14 days');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(actions.primaryActions[2].text).to.equal('Leave Waitlist');
         expect(spy.called).to.be.true;
       });
@@ -138,7 +138,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(claimSpy.called).to.be.false;
         expect(waitlistSpy.called).to.be.true;
       });
@@ -162,7 +162,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(waitlistSpy.called).to.be.true;
       });
     });

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

@@ -81,7 +81,7 @@ describe('Primary Actions data', () => {
     );
     const expectedPrimaryActions = [
       {
-        text: 'Borrow for 1 hour',
+        text: 'Borrow', // changed from 'Borrow for 1 hour'
         callback: () => {},
         className: 'ia-button primary',
       },
@@ -161,7 +161,7 @@ describe('Borrow status actions', () => {
 
     // removed available_to_borrow from lending bar
     expect(el.lendingStatus.available_to_borrow).to.be.false;
-    expect(el.primaryActions[0].text).to.equal('Borrow for 1 hour');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
   });
 
   it('Check action for borrowable book without user', async () => {
@@ -251,7 +251,7 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 second
     await el.updateComplete;
 
-    expect(el.primaryActions[0].text).to.equal('Borrow again');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
   });
 
   it('Expiring book cancels interval & emits event', async () => {
@@ -286,7 +286,7 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 sec
 
     expect(eventReceived).to.equal(true);
-    expect(el.primaryActions[0].text).to.equal('Borrow again');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
     expect(el.tokenPoller.loanTokenInterval).to.equal(undefined);
   });
 });