@internetarchive/ia-book-actions 0.0.29-alpha10 → 0.0.29-alpha12

package/demo/index.html

@@ -97,7 +97,7 @@
     import { LocalCache } from '@internetarchive/local-cache';
 
     const localCache = new LocalCache({
-      namespace: '1HourLoanStorage',
+      namespace: 'loanRenew',
       defaultTTL: 1 * 60,  // 1 minute
     });
 
@@ -128,14 +128,14 @@
     iaBookActions.tokenDelay = 2000; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
     iaBookActions.localCache = localCache;
-    iaBookActions.autoRenewConfig = {
+    iaBookActions.loanRenewConfig = {
       totalTime: 60, // 60 second = 1 min
       autoCheckAt: 55, // totalTime - 10th minute
-      FlippedInLast: 15, // within last 15 second/minute 
+      pageChangedInLast: 15, // within last 15 second/minute 
     };
 
     let lendingStatus1 = iaBookActions.lendingStatus;
-    let secondsLeftOnLoan = iaBookActions.autoRenewConfig.totalTime;
+    let secondsLeftOnLoan = iaBookActions.loanRenewConfig.totalTime;
 
     document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -212,10 +212,10 @@
             await localCache.set({
               key: `${identifier}-loanTime`,
               value: new Date(), // current time
-              ttl: Number(iaBookActions.autoRenewConfig.totalTime),
-            })
+              ttl: Number(iaBookActions.loanRenewConfig.totalTime),
+            });
 
-            await localCache.delete(`${identifier}-pageFlipTime`);
+            await localCache.delete(`${identifier}-pageChangedTime`);
           } catch (error) {}
           
         } else if(e.target.value === 'browsingExpired') {

package/package.json

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

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

@@ -9,6 +9,10 @@ import CollapsibleActionGroupStyle from '../assets/styles/collapsible-action-gro
 
 import { tabletContainerWidth } from '../core/config/constants.js';
 import { purchaseIcon } from '../assets/data/purchase.js';
+import {
+  analyticsCategories,
+  analyticsActions,
+} from '../core/config/analytics-event-and-category.js';
 import {
   dropdownOpened,
   dropdownClosed,
@@ -28,7 +32,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
       returnUrl: { type: String },
-      browseAgainNow: { type: Boolean },
+      renewNow: { type: Boolean },
     };
   }
 
@@ -48,7 +52,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
     this.returnUrl = '';
-    this.browseAgainNow = false;
+    this.renewNow = false;
   }
 
   updated(changed) {
@@ -59,17 +63,23 @@ export class CollapsibleActionGroup extends ActionsHandler {
       this.resetActions();
     }
 
-    if (changed.has('browseAgainNow') && this.browseAgainNow === true) {
-      this.dispatchAutoRenewBookEvent();
+    if (changed.has('renewNow') && this.renewNow === true) {
+      this.dispatchLoanRenewEvent();
     }
   }
 
   // dispatch this event to loan renew handler
-  dispatchAutoRenewBookEvent() {
+  dispatchLoanRenewEvent() {
+    const { category, action } = {
+      category: analyticsCategories.browse,
+      action: analyticsActions.browseLoanRenew,
+    };
+
+    // listen in action-handler.js to execute ajax call on petabox.
     this.dispatchEvent(
-      new CustomEvent('autoRenewLoan', {
+      new CustomEvent('loanRenew', {
         detail: {
-          event: { autoRenewed1Hour: 'browseBook' },
+          event: { category, action },
         },
       })
     );

package/src/components/timer-countdown.js

@@ -35,9 +35,9 @@ export default class TimerCountdown extends LitElement {
       // execute 50th minute check
       if (Math.round(this.time) === this.autoCheckAt) {
         this.dispatchEvent(
-          new CustomEvent('autoRenewAttempt', {
+          new CustomEvent('IABookActions:loanRenew', {
             detail: {
-              bookPageChange: false,
+              isPageChanged: false,
             },
             bubbles: true,
             composed: true,

package/src/components/toast-message.js

@@ -5,27 +5,24 @@ export class ToastMessage extends LitElement {
     return {
       texts: { type: String },
       dismisOnClick: { type: Boolean },
-      hideToast: { type: Boolean },
       clostAfter: { type: Number },
     };
   }
 
   constructor() {
     super();
-    this.texts = '';
-    this.textClass = '';
-    this.hideToast = false;
+    this.texts = null;
     this.clostAfter = 0;
   }
 
   render() {
-    return !this.hideToast
+    return this.texts
       ? html`
           <span
-            class="toast-message fade-in ${this.textClass}"
+            class="toast-message fade-in"
             title="Click/tap to close"
             @click=${() => {
-              this.dismisOnClick ? (this.hideToast = true) : nothing;
+              this.dismisOnClick ? this.texts = null : nothing;
             }}
             >${this.texts}</span
           >
@@ -40,6 +37,7 @@ export class ToastMessage extends LitElement {
       :host {
         display: inline-block;
       }
+
       .toast-message {
         z-index: 2;
         position: absolute;

package/src/core/config/analytics-event-and-category.js

@@ -13,6 +13,7 @@ export const analyticsCategories = {
 export const analyticsActions = {
   browse: 'Borrow-1Hour',
   browseAgain: 'Borrow-Again',
+  browseLoanRenew: 'Borrow-Loan-Renew',
   borrow: 'Borrow-14Days',
   waitlistJoin: 'JoinWaitlist',
   waitlistLeave: 'LeaveWaitlist',

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

@@ -43,8 +43,8 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
-    this.addEventListener('autoRenewLoan', ({ detail }) => {
-      this.handleAutoRenewLoan();
+    this.addEventListener('loanRenew', ({ detail }) => {
+      this.handleLoanRenew();
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
@@ -117,7 +117,7 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
-  handleAutoRenewLoan() {
+  handleLoanRenew() {
     const action = 'renew_loan';
     this.setBrowseTimeSession();
 
@@ -289,11 +289,11 @@ export default class ActionsHandler extends LitElement {
       await this.localCache.set({
         key: `${this.identifier}-loanTime`,
         value: new Date(), // current time
-        ttl: Number(this.autoRenewConfig.totalTime),
+        ttl: Number(this.loanRenewConfig.totalTime),
       });
 
       // delete flip time
-      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+      await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
       console.log(error);
     }

package/src/core/services/{one-hour-auto-renew.js → one-hour-loan-renew.js}

@@ -4,44 +4,43 @@ import { nothing } from 'lit';
  * This class is used to determine if use is eligible for auto renew loan.
  *
  */
-export class OneHourAutoRenew {
+export class OneHourLoanRenew {
   constructor(
-    isPageClick,
+    isPageChanged,
     identifier,
     localCache,
-    autoRenewConfig
+    loanRenewConfig
   ) {
-    this.isPageClick = isPageClick;
+    this.isPageChanged = isPageChanged;
     this.identifier = identifier;
     this.localCache = localCache;
-    this.autoRenewConfig = autoRenewConfig;
+    this.loanRenewConfig = loanRenewConfig;
 
     // messages for auto return machenism
-    this.autoRenewMessage = 'This book has been renewed for another hour.';
-    this.autoReturnMessage =
+    this.loanRenewMessage = 'This book has been renewed for another hour.';
+    this.loanReturnMessage =
       'This book has been auto-returned due to inactivity.';
-    this.autoReturnWarning =
+    this.loanReturnWarning =
       'This book will be auto-returned in 10 minutes unless you turn a page.';
 
     // private props
-    this.autoRenewResult = {
-      toastTexts: '',
-      hideToast: true,
-      browseAgainNow: false,
+    this.loanRenewResult = {
+      texts: null,
+      renewNow: false,
     };
 
-    return this.handleBookAutoRenew();
+    return this.handleLoanRenew();
   }
 
-  handleBookAutoRenew() {
+  handleLoanRenew() {
     try {
       // when user click/flip on book page
-      if (this.isPageClick) {
-        console.log('page flipped!!');
-        return this.userFlippedBookPage(); // user clicked on page
+      if (this.isPageChanged) {
+        console.log('page changed!!');
+        return this.pageChanged(); // user clicked on page
       }
-
-      return this.autoCheckerTimer(); // auto checker at 50th minute
+      
+      return this.autoChecker(); // auto checker at 50th minute
     } catch (error) {
       console.log(error);
     }
@@ -49,20 +48,11 @@ export class OneHourAutoRenew {
     return nothing;
   }
 
-  // set new pageFlipTime in indexedDB 
-  async setPageFlippedTime() {
-    await this.localCache.set({
-      key: `${this.identifier}-pageFlipTime`,
-      value: new Date(), // current time
-      ttl: Number(this.autoRenewConfig.totalTime),
-    });
-  }
-
-  async userFlippedBookPage() {
+  async pageChanged() {
     const {
       totalTime, // 60
       autoCheckAt, // 50
-    } = this.autoRenewConfig;
+    } = this.loanRenewConfig;
     const currentTime = new Date();
     const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
 
@@ -70,33 +60,32 @@ export class OneHourAutoRenew {
       loanTime,
       totalTime - autoCheckAt,
       'add'
-    ); // 50 seconds
+    );
 
     // if user viewed new page in last 10 minutes, renew immediately
     if (currentTime >= lastTimeFrame) {
-      console.log('1 YES NOW BORROW IT AGAIN NOW!');
-      this.autoRenewResult.toastTexts = this.autoRenewMessage;
-      this.autoRenewResult.hideToast = false;
-      this.autoRenewResult.browseAgainNow = true;
+      console.log('Yes, borrow it again now!');
+      this.loanRenewResult.texts = this.loanRenewMessage;
+      this.loanRenewResult.renewNow = true;
 
-      this.setNewBrowseTime();
+      this.setLoanRenewedTime();
     }
 
-    this.setPageFlippedTime();
-    return this.autoRenewResult;
+    this.setPageChangedTime();
+    return this.loanRenewResult;
   }
 
-  async autoCheckerTimer() {
+  async autoChecker() {
     const currentTime = new Date();
-    const { FlippedInLast } = this.autoRenewConfig;
+    const { pageChangedInLast } = this.loanRenewConfig;
     const lastPageFlipTime = await this.localCache.get(
-      `${this.identifier}-pageFlipTime`
+      `${this.identifier}-pageChangedTime`
     );
 
     // last 15 min if used flipped a page.
     const lastFlipTimeFrame = this.changeTime(
       currentTime,
-      FlippedInLast,
+      pageChangedInLast,
       'sub'
     ); // 15 seconds
 
@@ -105,29 +94,37 @@ export class OneHourAutoRenew {
       lastPageFlipTime <= lastFlipTimeFrame
     ) {
       // not viewed
-      console.log('Not viewed, warning message!');
-      this.autoRenewResult.toastTexts = this.autoReturnWarning;
-      this.autoRenewResult.browseAgainNow = false;
-      this.autoRenewResult.hideToast = false;
+      console.log('Not viewed, don\'t borrow it!');
+      this.loanRenewResult.texts = this.loanReturnWarning;
+      this.loanRenewResult.renewNow = false;
     } else if (lastPageFlipTime >= lastFlipTimeFrame) {
       // viewed in last time frame
-      console.log('Viewed, auto renew and message!');
-      this.autoRenewResult.toastTexts = this.autoRenewMessage;
-      this.autoRenewResult.browseAgainNow = true;
-      this.autoRenewResult.hideToast = false;
+      console.log('Yes viewed, borrow it again!');
+      this.loanRenewResult.texts = this.loanRenewMessage;
+      this.loanRenewResult.renewNow = true;
 
-      this.setNewBrowseTime();
+      this.setLoanRenewedTime();
     }
 
-    return this.autoRenewResult;
+    return this.loanRenewResult;
+  }
+
+
+  // save page changed time in indexedDB 
+  async setPageChangedTime() {
+    await this.localCache.set({
+      key: `${this.identifier}-pageChangedTime`,
+      value: new Date(), // current time
+      ttl: Number(this.loanRenewConfig.totalTime),
+    });
   }
 
-  async setNewBrowseTime() {
+  async setLoanRenewedTime() {
     try {
       // last 15 min if used flipped a page.
       const expireDate = this.changeTime(
         new Date(),
-        this.autoRenewConfig.totalTime,
+        this.loanRenewConfig.totalTime,
         'add'
       ); // 15 seconds
 
@@ -135,11 +132,11 @@ export class OneHourAutoRenew {
       await this.localCache.set({
         key: `${this.identifier}-loanTime`,
         value: expireDate, // expireDate time
-        ttl: Number(this.autoRenewConfig.totalTime),
+        ttl: Number(this.loanRenewConfig.totalTime),
       });
 
-      // delete pageFlipTime when book is auto renew at nth minute
-      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+      // delete pageChangedTime when book is auto renew at nth minute
+      await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
       console.log(error);
     }

package/src/ia-book-actions.js

@@ -15,7 +15,7 @@ import './components/toast-message.js';
 import { mobileContainerWidth } from './core/config/constants.js';
 import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { LoanTokenPoller } from './core/services/loan-token-poller.js';
-import { OneHourAutoRenew } from './core/services/one-hour-auto-renew.js';
+import { OneHourLoanRenew } from './core/services/one-hour-loan-renew.js';
 
 export const events = {
   browseExpired: 'IABookReader:BrowsingHasExpired',
@@ -41,8 +41,8 @@ export default class IABookActions extends LitElement {
       modal: { Object },
       tokenDelay: { type: Number },
       localCache: { type: Object },
-      autoRenewConfig: { type: Object },
-      autoRenewResult: { type: Object },
+      loanRenewConfig: { type: Object },
+      loanRenewResult: { type: Object },
     };
   }
 
@@ -62,17 +62,18 @@ export default class IABookActions extends LitElement {
     this.modal = undefined;
     this.tokenDelay = 120000; // 2 minutes
     this.localCache = new LocalCache({
-      namespace: '1HourLoanStorage',
+      namespace: 'loanRenew',
     });
 
     // loan auto renew
-    this.autoRenewConfig = {};
-    this.autoRenewResult = {
-      toastTexts: '',
-      hideToast: true,
-      browseAgainNow: false,
+    this.isPageChanged = false;
+    this.loanRenewConfig = {};
+    this.loanRenewResult = {
+      texts: null,
+      renewNow: false,
     };
 
+
     // private props
     this.primaryActions = [];
     this.primaryTitle = '';
@@ -83,7 +84,7 @@ export default class IABookActions extends LitElement {
     this.consecutiveLoanCounts = 1; // consecutive loan count
     this.browserTimer = undefined;
 
-    this.bindAutoRenewEvent();
+    this.bindLoanRenewEvents();
   }
 
   disconnectedCallback() {
@@ -111,45 +112,53 @@ export default class IABookActions extends LitElement {
     }
   }
 
-  bindAutoRenewEvent() {
-    // dispatched this event from timer-countdown
-    this.addEventListener('autoRenewAttempt', async event => {
-      const isPageClick = event.detail.bookPageChange;
+  bindLoanRenewEvents() {
+    // dispatched this event from bookreader page changed
+    this.addEventListener('BookReader:pageChanged', e => {
 
-      // early return if user is not browsed book
-      if (isPageClick && this.borrowType !== 'browsed') return nothing;
+      // early return if book is not browsed (1 hour borrow)
+      if (this.borrowType !== 'browsed') return nothing;
 
-      this.autoRenewResult = await new OneHourAutoRenew(
-        isPageClick,
-        this.identifier,
-        this.localCache,
-        this.autoRenewConfig
-      );
+      this.isPageChanged = true;
+      this.executeLoanRenew();
+    })
 
-      this.toastTexts = this.autoRenewResult.toastTexts;
-      this.hideToast = this.autoRenewResult.hideToast;
-      this.browseAgainNow = this.autoRenewResult.browseAgainNow;
+    // dispatched this event from timer-countdown
+    this.addEventListener('IABookActions:loanRenew', e => {
+      this.isPageChanged = false;
+      this.executeLoanRenew();
+    });
+  }
 
-      if (this.autoRenewResult.browseAgainNow) {
-        this.tokenPoller.disconnectedInterval();
-        await this.browseHasRenew();
-      }
+  async executeLoanRenew() {
+    this.loanRenewResult = await new OneHourLoanRenew(
+      this.isPageChanged,
+      this.identifier,
+      this.localCache,
+      this.loanRenewConfig
+    );
 
-      return nothing;
-    });
+    console.log(this.loanRenewResult)
+
+    if (this.loanRenewResult.renewNow) {
+      this.tokenPoller.disconnectedInterval();
+      await this.browseHasRenew();
+    }
+
+    return nothing;
   }
 
   async browseHasExpired() {
     const currStatus = { ...this.lendingStatus, browsingExpired: true };
     this.lendingStatus = currStatus;
-    this.autoRenewResult.browseAgainNow = false;
+    this.loanRenewResult.renewNow = false;
 
     // remove respected key:value
     await this.localCache.delete(`${this.identifier}-loanTime`);
-    await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+    await this.localCache.delete(`${this.identifier}-pageChangedTime`);
 
     // show message after browsed book is expired.
-    this.autoRenewResult.toastTexts = 'This book has been auto-returned due to inactivity.';
+    this.loanRenewResult.texts = 'This book has been auto-returned due to inactivity.';
   }
 
   async browseHasRenew() {
@@ -278,7 +287,7 @@ export default class IABookActions extends LitElement {
     // - start token poller immediately
     setTimeout(() => {
       this.startLoanTokenPoller();
-    }, this.autoRenewResult.browseAgainNow ? this.tokenDelay : 100);
+    }, this.loanRenewResult.renewNow ? this.tokenDelay : 100);
   }
 
   render() {
@@ -304,7 +313,7 @@ export default class IABookActions extends LitElement {
     return this.borrowType === 'browsed'
       ? html`<timer-countdown
           time=${Number(this.lendingStatus.secondsLeftOnLoan)}
-          .autoCheckAt=${this.autoRenewConfig.autoCheckAt}
+          .autoCheckAt=${this.loanRenewConfig.autoCheckAt}
         ></timer-countdown>`
       : nothing;
   }
@@ -312,16 +321,15 @@ export default class IABookActions extends LitElement {
   get toastMessageTemplate() {
     return html`
       <toast-message
-        .texts=${this.autoRenewResult.toastTexts}
+        .texts=${this.loanRenewResult.texts}
         ?dismisOnClick=${Boolean(true)}
-        ?hideToast=${this.autoRenewResult.hideToast}
       ></toast-message>
     `;
   }
 
   get bookActionBar() {
     return html`
-      <button @click=${() => this.pageFlipEvent()}>Page Flip</button>
+      <button @click=${() => this.pageChangedEvent()}>Page Change</button>
       <collapsible-action-group
         .userid=${this.userid}
         .identifier=${this.identifier}
@@ -332,10 +340,10 @@ export default class IABookActions extends LitElement {
         .borrowType=${this.borrowType}
         .returnUrl=${this.returnUrl}
         .localCache=${this.localCache}
-        .autoRenewConfig=${this.autoRenewConfig}
+        .loanRenewConfig=${this.loanRenewConfig}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
-        ?browseAgainNow=${this.autoRenewResult.browseAgainNow}
+        ?renewNow=${this.loanRenewResult.renewNow}
         @lendingActionError=${this.handleLendingActionError}
         @toggleActionGroup=${this.handleToggleActionGroup}
       >
@@ -346,11 +354,11 @@ export default class IABookActions extends LitElement {
   }
 
   // will move this function to bookreader...
-  pageFlipEvent() {
+  pageChangedEvent() {
     // dispatch event to say book page has flipped
     document.querySelector('ia-book-actions').dispatchEvent(
-      new CustomEvent('autoRenewAttempt', {
-        detail: { bookPageChange: true },
+      new CustomEvent('BookReader:pageChanged', {
+        detail: { isPageChanged: true },
         bubbles: true,
         composed: true,
       })