@internetarchive/ia-book-actions 0.0.7-3 → 0.0.7-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.7-03",
+  "version": "0.0.7-4",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -24,6 +24,7 @@
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/modal-manager": "^0.1.0",
     "@internetarchive/shared-resize-observer": "^0.0.1",
+    "idb-keyval": "^6.0.3",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0"
   },

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

@@ -2,6 +2,7 @@ import { html } from 'lit-element';
 import { nothing } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map';
 
+import { get as indexedDBGet } from 'idb-keyval';
 import ActionsHandler from '../core/services/actions-handler/actions-handler.js';
 
 import buttonBaseStyle from '../assets/styles/ia-button.js';
@@ -64,28 +65,35 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   /**
-   * Handles events when user is borrowing book and wants to have access to read
+   * Dispatches event when patron is borrowing book.
+   * Notes borrow type, and consecutive borrow counts
    *
    * @fires CollapsibleActionGroup#enableBookAccess
    */
-  emitEnableBookAccess() {
+  async emitEnableBookAccess() {
     // send consecutiveLoanCounts for browsed books only.
-    if (this.borrowType === 'browsing') {
-      this.consecutiveLoanCounts =
-        localStorage.getItem('consecutive-loan-count') ?? 1;
+    if (this.borrowType === 'browsed') {
+      try {
+        const existingCount = await indexedDBGet('consecutive-loan-count');
+        if (existingCount !== undefined) {
+          this.consecutiveLoanCounts = existingCount.value ?? 1;
+        }
+      } catch (error) {
+        console.log(error);
+      }
     }
 
     // event category and action for browsing book access
     const eventCategory = `${this.borrowType}BookAccess`;
     const eventAction = `${
-      this.borrowType === 'browsing' ? 'BrowseCounts-' : 'Counts-'
+      this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
     }${this.consecutiveLoanCounts}`;
 
     this.dispatchEvent(
       new CustomEvent('enableBookAccess', {
         detail: {
           event: {
-            category: eventCategory, // brosingBookAccess | borrowingBookAccess
+            category: eventCategory, // browsedBookAccess | borrowedBookAccess
             action: eventAction, // (BrowseCounts-N|Counts-N)
           },
           borrowType: this.borrowType,
@@ -226,7 +234,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   /**
-   * Handles click events when user click on action buttons
+   * Dispatches click events when patron clicks on action buttons
    * @param { string } eventName - actions like 'browseBook', 'borrowBook' etc...
    * @param { object } gaEvent - contains analytics event action and category
    *   @param { string } gaEvent.category

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

@@ -16,6 +16,11 @@ export default function ActionsHandlerService(options) {
   let baseHost = '/services/loans/loan';
   const location = window?.location;
 
+  // return intentional error on dev environment
+  const shouldReturnError =
+    location?.href?.indexOf('?error=true') !== -1 &&
+    location?.hostname !== 'archive.org';
+
   if (location?.pathname === '/demo/') baseHost = `/demo/`;
 
   let formData = new FormData();
@@ -27,12 +32,11 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
-      let shouldReturnError = location?.href?.indexOf('?error=true') !== -1;
       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.';
 
-      // return error reponse if query param has ?error=true param...
+      // return error reponse when not production and has ?error=true param...
       const erroneousActions = ['browse_book', 'borrow_book', 'create_token'];
       if (shouldReturnError && erroneousActions.includes(option?.action)) {
         return {

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

@@ -1,4 +1,6 @@
 import { LitElement } from 'lit-element';
+import { get as indexedDBGet, set as indexedDBSet } from 'idb-keyval';
+
 import { URLHelper } from '../../config/url-helper.js';
 import ActionsHandlerService from './actions-handler-service.js';
 
@@ -211,6 +213,15 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
+  /**
+   * Dispatches event when an error occured on action
+   * Notes:- toggle <collapsible-action-group> visibility (enable/disable).
+   *
+   * @param { String } action - name of action like browse_book, borrow_book
+   * @param { Object } data - erroneous response from api call
+   *
+   * @fires ActionsHandler#lendingActionError
+   */
   dispatchActionError(action, data = {}) {
     this.dispatchEvent(
       new CustomEvent('lendingActionError', {
@@ -219,6 +230,12 @@ export default class ActionsHandler extends LitElement {
     );
   }
 
+  /**
+   * Dispatches event when patron is clicked on action buttons.
+   * Notes:- toggle <collapsible-action-group> disable/enable.
+   *
+   * @fires ActionsHandler#toggleActionGroup
+   */
   dispatchToggleActionGroup() {
     this.dispatchEvent(new CustomEvent('toggleActionGroup'));
   }
@@ -256,19 +273,28 @@ export default class ActionsHandler extends LitElement {
   }
 
   // save consecutive loan count for borrow
-  setConsecutiveLoanCounts(action = '') {
-    const { localStorage } = window;
-    if (localStorage) {
+  async setConsecutiveLoanCounts(action = '') {
+    try {
       let newCount = 1;
       const storageKey = `consecutive-loan-count`;
-      const existingCount = Number(localStorage.getItem(storageKey));
+      const existingCount = await indexedDBGet(storageKey);
+
+      // expire indexDB key-value after 2 hours
+      const expireTime = new Date(
+        Date.now() + (1 / 12) * 24 * 60 * 60 * 1000
+      ).toString();
 
-      // want to increase browse-count by 1 if,
-      // you consecutive reading a book.
-      if (action === 'browseAgain') {
-        newCount = existingCount ? existingCount + 1 : 1;
+      // increase browse-count by 1 when you consecutive reading a book.
+      if (action === 'browseAgain' && existingCount !== undefined) {
+        newCount = existingCount.value ? existingCount.value + 1 : 1;
       }
-      localStorage.setItem(storageKey, newCount);
+
+      await indexedDBSet(storageKey, {
+        value: newCount,
+        expire: expireTime,
+      });
+    } catch (error) {
+      console.log(error);
     }
   }
 

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

@@ -96,7 +96,7 @@ export default class GetLendingActions {
         this.actionsConfig.adminAccessConfig(),
         this.actionsConfig.purchaseConfig(),
       ],
-      borrowType: isBrowsing ? 'browsing' : 'borrowing',
+      borrowType: isBrowsing ? 'browsed' : 'borrowed',
     };
   }
 

package/src/ia-book-actions.js

@@ -24,6 +24,7 @@ export default class IABookActions extends LitElement {
       barType: { type: String },
       sharedObserver: { attribute: false },
       disableActionGroup: { type: Boolean },
+      modal: { Object },
     };
   }
 
@@ -37,12 +38,15 @@ export default class IABookActions extends LitElement {
     this.bwbPurchaseUrl = '';
     this.barType = 'action'; // 'title'|'action'
     this.sharedObserver = undefined;
+    this.disableActionGroup = false;
+    this.modal = undefined;
+
+    // private props
     this.primaryActions = [];
     this.primaryTitle = '';
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
-    this.disableActionGroup = false;
   }
 
   disconnectedCallback() {
@@ -144,8 +148,8 @@ export default class IABookActions extends LitElement {
     });
 
     this.borrowType = actions.borrowType;
-    if (this.borrowType === 'browsing') {
-      // start timer for browsing.
+    if (this.borrowType === 'browsed') {
+      // start timer for browsed.
       // when browse is completed, we shows browse-again button
       this.startBrowseTimer();
     }
@@ -235,11 +239,15 @@ export default class IABookActions extends LitElement {
   async showErrorModal(errorMsg, action) {
     this.disableActionGroup = false;
 
-    this.modal = document.querySelector('#action-bar-modal');
+    // check if this.modal passed as prop
     if (!this.modal) {
-      this.modal = document.createElement('modal-manager');
-      this.modal.id = 'action-bar-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);
 
     const modalConfig = new ModalConfig({
@@ -253,7 +261,8 @@ export default class IABookActions extends LitElement {
       modalConfig.showCloseButton = false;
       modalConfig.message = html` Uh oh, something went wrong trying to access
         this book.<br />
-        Please <a href="/">refresh</a> to try again or send us an email to
+        Please <a href="${() => window.location.reload(true)}">refresh</a> to
+        try again or send us an email to
         <a
           href="mailto:info@archive.org?subject=Help: cannot access my borrowed book: ${this
             .identifier}"

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

@@ -1,6 +1,5 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import '../../src/components/collapsible-action-group.js';
-import Sinon from 'sinon';
 
 const container = ({
   primaryActions = [
@@ -85,27 +84,3 @@ describe('<collapsible-action-group>', () => {
     expect(eAnalytics.action).to.equal('Browse');
   });
 });
-
-describe('fetch loan token and localStorage for browsed/borrowsed book', () => {
-  beforeEach(() => {
-    const localStorageMock = {
-      getItem: Sinon.spy(),
-      setItem: Sinon.spy(),
-    };
-    Object.defineProperty(window, 'localStorage', {
-      value: localStorageMock,
-    });
-  });
-
-  it('test localStorage function when borrowType is browsing', async () => {
-    await fixture(container({ borrowType: 'browsing' }));
-    expect(localStorage.getItem).to.be.calledOnce;
-    expect(localStorage.getItem).to.be.calledWith('consecutive-loan-count');
-  });
-
-  it('test localStorage function when borrowType is borrowing', async () => {
-    await fixture(container({ borrowType: 'borrowing' }));
-    expect(localStorage.getItem).to.not.be.calledOnce;
-    expect(localStorage.getItem).to.not.be.calledWith('consecutive-loan-count');
-  });
-});