@internetarchive/ia-book-actions 0.0.7-0 → 0.0.7-11

package/README.md

@@ -1,69 +1,115 @@
-[![Build Status](https://travis-ci.com/internetarchive/iaux-your-webcomponent.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-your-webcomponent) [![codecov](https://codecov.io/gh/internetarchive/iaux-your-webcomponent/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-your-webcomponent)
+# Component for lendable and embed items
 
-# Internet Archive Javascript WebComponent Template
+The book action button component build on LitElement with support for custom content and light DOM elements.
 
-This is a base template for creating Javascript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
-
-## Usage
-
-1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
-2. Clone your new repo and update the things below.
-
-### Things to update in your copy
-1. Remove this section
-2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
-3. `README.md` (this file). Update the readme in general, but also the badge URLs
-4. `package.json` Update the name and description
-5. Rename the `your-webcomponent.ts` and its associated `.test` file
-6. Update `.travis.yml` with the proper secure key. See the [Travis docs](https://blog.travis-ci.com/2014-03-13-slack-notifications/) for more information.
-
-## Local Demo with `web-dev-server`
+## Installation
 ```bash
-yarn start
+yarn install --save @internetarchive/ia-book-actions
 ```
-To run a local development server that serves the basic demo located in `demo/index.html`
 
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
+## Usage of Book Actions
+```html
+<!-- index.html -->
+<style>
+  html {
+    font-size: 10px;
+    /* This is to match petabox's base font size */
+  }
+  body {
+    margin: 0;
+    text-align: center;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  #demo {
+    height: 50px;
+  }
+  ia-book-actions {
+    --white: #fff;
+    --black: #000;
+    --primaryBGColor: var(--black);
+    --secondaryBGColor: #222;
+    --tertiaryBGColor: #333;
+    --primaryTextColor:  var(--white);
+    --primaryCTAFill: #194880;
+    --primaryCTABorder: #c5d1df;
+    --secondaryCTAFill: #333;
+    --secondaryCTABorder: #999;
+    --secondaryCTAFillRGB: 51, 51, 51;
+    --primaryErrorCTAFill: #e51c26;
+    --primaryErrorCTABorder: #f8c6c8;
+    --primaryCTAFillRGB: 25, 72, 128;
+    --primaryErrorCTAFillRGB: 229, 28, 38;
+    --primaryDisableCTAFill: #767676;
+  }
+</style>
+
+<ia-book-actions></ia-book-actions>
+
+<script type="module">
+    import '@internetarchive/ia-book-actions.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
+    import {
+      defaultLendingStatus,
+      canBrowseAndBorrow,
+    } from '../src/assets/data/lending-get-status-service.js';
+
+    let iaBookActions = document.querySelector('ia-book-actions');
+    iaBookActions.userid = '@neeraj-archive';
+    iaBookActions.identifier = 'naturalhistoryof00unse_4111';
+    iaBookActions.bookTitle = 'This is test title for any book';
+    iaBookActions.lendingStatus = {}; // lendinStatus in json
+    iaBookActions.bwbPurchaseUrl = 'https://bwb.com/produce/123';
+    iaBookActions.barType = ''; // title|action
+</script>
 ```
 
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+![Book Action Bar](./assets/ia-book-action-screen.png "Book Action Bar Demo")
 
-```bash
-yarn run test:watch
+## Usage of Book Title
+```html
+<!-- along with above properties, set barType to 'title' -->
+<script type="module">
+  iaBookActions.barType = 'title'; // title|action
+</script>
 ```
+![Book Title Bar](./assets/ia-book-title-screen.png "Book Title Bar Demo")
 
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
-```bash
-yarn run lint
-```
+### Config Options
 
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
+All of the config options:
+
+```javascript
+let iaBookActions = document.querySelector('ia-book-actions');
+const modalConfig = new ModalConfig(); // to show info/error modal 
+
+// set defaultLendingStatus for unavailable (without borrowables) book
+iaBookActions.userid = '@jack';
+iaBookActions.identifier = 'jack-sparrow';
+iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
+iaBookActions.lendingStatus = {active_borrows: 0, active_browses: 0}, // complete lendingStatus object
+iaBookActions.bwbPurchaseUrl = ''; // BWB purchase URl if any 
+iaBookActions.barType = '';
+iaBookActions.modalConfig = modalConfig;
 ```
+
+# Development
+
+## Prerequisite
 ```bash
-yarn run lint:prettier
+yarn install
 ```
 
-To automatically fix many linting errors, run
+## Start Development Server
 ```bash
-yarn run format
+yarn start
 ```
 
-You can format using ESLint and Prettier individually as well
+## Testing
 ```bash
-yarn run format:eslint
+yarn test
 ```
+
+## Linting
 ```bash
-yarn run format:prettier
+yarn lint
 ```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.

package/demo/index.html

@@ -76,13 +76,9 @@
       overflow: hidden;
     }
   
-    modal-manager {
+    modal-manager[mode='closed'] {
       display: none;
     }
-  
-    modal-manager[mode='open'] {
-      display: block;
-    }
   </style>
 </head>
 
@@ -108,6 +104,11 @@
     const modalConfig = new ModalConfig();
     modalConfig.headerColor = '#d9534f';
 
+    let lendingBarPostInit = function lendingBarPostInit() {
+      setTimeout(function() {
+        console.log('executed');
+      }, 100);
+    }
     // set defaultLendingStatus for unavailable (without borrowables) book
     iaBookActions.userid = userid;
     iaBookActions.identifier = identifier;
@@ -116,6 +117,7 @@
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.barType = '';
     iaBookActions.modalConfig = modalConfig;
+    iaBookActions.lendingBarPostInit = lendingBarPostInit;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.7-0",
+  "version": "0.0.7-11",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,6 +22,7 @@
     "@internetarchive/icon-bookmark": "^1.1.3",
     "@internetarchive/icon-close": "^1.1.3",
     "@internetarchive/icon-info": "^1.2.6",
+    "@internetarchive/local-cache": "^0.2.0",
     "@internetarchive/modal-manager": "^0.1.0",
     "@internetarchive/shared-resize-observer": "^0.0.1",
     "lit-element": "^2.4.0",

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

@@ -27,7 +27,6 @@ export class CollapsibleActionGroup extends ActionsHandler {
       hasAdminAccess: { type: Boolean },
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
-      borrowType: { type: String },
     };
   }
 
@@ -46,45 +45,12 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.title = '';
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
-    this.borrowType = ''; // (browsed|borrowed)
-    this.consecutiveLoanCounts = 1; // consecutive loan count
   }
 
   updated(changed) {
-    if (changed.has('width')) {
-      if (this.isBelowTabletContainer) {
-        this.resetActions();
-      }
-    }
-
-    // this is execute to fetch loan token
-    if (changed.has('borrowType')) {
-      this.emitEnableBookAccess();
-    }
-  }
-
-  /* emit custom event to fetch loan token */
-  emitEnableBookAccess() {
-    // send consecutiveLoanCounts for browsed books only.
-    // for borrowed books, we just send [Counts-1]
-    if (this.borrowType === 'browsed') {
-      this.consecutiveLoanCounts =
-        localStorage.getItem('consecutive-loan-count') ?? 1;
+    if (changed.has('width') && this.isBelowTabletContainer) {
+      this.resetActions();
     }
-
-    this.dispatchEvent(
-      new CustomEvent('enableBookAccess', {
-        detail: {
-          event: {
-            category: `${this.borrowType}BookAccess`, // browsedBookAccess | borrowedBookAccess
-            action: `${
-              this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
-            }${this.consecutiveLoanCounts}`, // (BrowseCounts-1|Counts-X)
-          },
-          borrowType: this.borrowType,
-        },
-      })
-    );
   }
 
   /**
@@ -219,11 +185,13 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   /**
-   * Click handler to emit custom event on action click
-   * @param { string } eventName
-   * @param { object } gaEvent
+   * 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
    *   @param { string } gaEvent.action
+   *
+   * @fires CollapsibleActionGroup#{eventName} - (will be browseBook, borrowBook etc...)
    */
   clickHandler(eventName, gaEvent) {
     this.dropdownState = 'close';

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

@@ -13,12 +13,15 @@ export default function ActionsHandlerService(options) {
     ...options,
   };
 
-  let baseHost = '';
-  if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/`;
-  } else {
-    baseHost = `/services/loans/loan`;
-  }
+  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();
   formData.append('action', option.action);
@@ -29,18 +32,16 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
-      let shouldReturnError =
-        window.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)) {
+      if (shouldReturnError && erroneousActions.includes(option?.action)) {
         return {
           success: false,
-          error: option.action === 'create_token' ? tokenError : borrowError,
+          error: option?.action === 'create_token' ? tokenError : borrowError,
         };
       }
 
@@ -58,7 +59,7 @@ export default function ActionsHandlerService(options) {
     })
     .then(data => {
       // `data` is the parsed version of the JSON returned from the above endpoint.
-      if (!data.error) {
+      if (!data?.error) {
         option?.success(data);
       } else {
         option?.error(data);

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

@@ -1,4 +1,6 @@
 import { LitElement } from 'lit-element';
+import { LocalCache } from '@internetarchive/local-cache';
+
 import { URLHelper } from '../../config/url-helper.js';
 import ActionsHandlerService from './actions-handler-service.js';
 
@@ -15,16 +17,10 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = identifier;
     this.ajaxTimeout = 6000;
-    this.loanTokenPollingDelay =
-      window.location.pathname === '/demo/' ? 2000 : 120000; // 120000 ms = 2 min
-    this.loanTokenInterval = null;
+    this.localCache = new LocalCache();
     this.bindEvents();
   }
 
-  disconnectedCallback() {
-    this.loanTokenInterval = undefined;
-  }
-
   sendEvent(eventCategory, eventAction) {
     // eslint-disable-next-line no-console
     console?.log('Book action: ', { eventCategory, eventAction });
@@ -99,128 +95,117 @@ export default class ActionsHandler extends LitElement {
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
-
-    this.addEventListener('enableBookAccess', ({ detail }) => {
-      const borrowType = detail?.borrowType;
-
-      // fetch loan token for browsed/borrowed book and set an interval
-      if (borrowType) {
-        console.log('token poll started...');
-
-        this.loanTokenInterval = setInterval(() => {
-          this.handleLoanTokenPoller();
-        }, this.loanTokenPollingDelay);
-
-        const { category, action } = detail?.event;
-        this.sendEvent(category, action);
-      } else {
-        // if book is not browsed, just clear token polling interval
-        clearInterval(this.loanTokenInterval);
-      }
-    });
   }
 
   handleBrowseIt() {
-    const context = 'browse_book';
-    this.ActionError(context);
+    const action = 'browse_book';
+    this.dispatchToggleActionGroup();
 
     ActionsHandlerService({
-      action: context,
+      action,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
       error: data => {
-        this.ActionError(context, data);
+        this.dispatchActionError(action, data);
       },
     });
   }
 
   handleReturnIt() {
-    const context = 'return_loan';
-    this.ActionError(context);
+    const action = 'return_loan';
+    this.dispatchToggleActionGroup();
 
     ActionsHandlerService({
-      action: context,
+      action,
       identifier: this.identifier,
       success: () => {
         this.deleteLoanCookies();
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
       error: data => {
-        this.ActionError(context, data);
+        this.dispatchActionError(action, data);
       },
     });
   }
 
   handleBorrowIt() {
-    const context = 'borrow_book';
-    this.ActionError(context);
+    const action = 'borrow_book';
+    this.dispatchToggleActionGroup();
 
     ActionsHandlerService({
-      action: context,
+      action,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
       error: data => {
-        this.ActionError(context, data);
+        this.dispatchActionError(action, data);
       },
     });
   }
 
   handleReserveIt() {
-    const context = 'join_waitlist';
-    this.ActionError(context);
+    const action = 'join_waitlist';
+    this.dispatchToggleActionGroup();
 
     ActionsHandlerService({
-      action: context,
+      action,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        this.ActionError(context, data);
+        this.dispatchActionError(action, data);
       },
     });
   }
 
   handleRemoveFromWaitingList() {
-    const context = 'leave_waitlist';
-    this.ActionError(context);
+    const action = 'leave_waitlist';
+    this.dispatchToggleActionGroup();
 
     ActionsHandlerService({
-      action: context,
+      action,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        this.ActionError(context, data);
+        this.dispatchActionError(action, data);
       },
     });
   }
 
-  handleLoanTokenPoller() {
-    const context = 'create_token';
-    ActionsHandlerService({
-      identifier: this.identifier,
-      action: context,
-      error: data => {
-        this.ActionError(context, data);
-        clearInterval(this.loanTokenInterval); // stop token fetch api
-      },
-    });
-  }
 
-  ActionError(context, data = {}) {
+  /**
+   * 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', {
-        detail: { context, data },
+        detail: { action, data },
       })
     );
   }
 
+  /**
+   * 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'));
+  }
+
   handleLoginOk() {
     /* eslint class-methods-use-this: "off" */
     const target = `/account/login?referer=${encodeURIComponent(
@@ -254,19 +239,25 @@ 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 this.localCache.get(storageKey);
 
-      // want to increase browse-count by 1 if,
-      // you consecutive reading a book.
-      if (action === 'browseAgain') {
+      // increase browse-count by 1 when you consecutive reading a book.
+      if (action === 'browseAgain' && existingCount !== undefined) {
         newCount = existingCount ? existingCount + 1 : 1;
       }
-      localStorage.setItem(storageKey, newCount);
+
+      // set new value
+      await this.localCache.set({
+        key: storageKey,
+        value: newCount,
+        ttl: 7200, // 2 hours
+      });
+    } catch (error) {
+      console.log(error);
     }
   }
 

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

@@ -75,9 +75,9 @@ export default class GetLendingActions {
     const disableBorrow = lendingStatus.loanCount >= lendingStatus.maxLoans;
 
     let primaryTitleText = '';
-    let isBrowsed =
+    let isBrowsing =
       lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
-    if (isBrowsed) {
+    if (isBrowsing) {
       primaryTitleText = this.getBrowseCountdownTitle();
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
@@ -96,7 +96,7 @@ export default class GetLendingActions {
         this.actionsConfig.adminAccessConfig(),
         this.actionsConfig.purchaseConfig(),
       ],
-      borrowType: isBrowsed ? 'browsed' : 'borrowed',
+      borrowType: isBrowsing ? 'browsed' : 'borrowed',
     };
   }
 

package/src/core/services/loan-token-poller.js

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit-element';
+import { LocalCache } from '@internetarchive/local-cache';
+
+import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+
+/**
+ * This class is used to create loan token for borrowed books
+ *
+ * ActionsHandlerService is a function being used to execute
+ */
+export class LoanTokenPoller extends LitElement {
+  constructor() {
+    super();
+    this.identifier = '';
+    this.callback = () => {};
+    this.loanTokenPollingDelay = window.location.pathname === '/demo/' ? 2000 : 120000; // 120000 ms = 2 min
+    this.loanTokenInterval = undefined;
+    this.localCache = new LocalCache();
+  }
+
+  disconnectedCallback() {
+    this.loanTokenInterval = undefined;
+  }
+
+  async enableBookAccess(identifier, borrowType, callback) {
+    this.identifier = identifier
+    this.callback = callback;
+    let consecutiveLoanCounts = 1;
+
+    if (borrowType) {
+      // send consecutiveLoanCounts for browsed books only.
+      if (borrowType === 'browsed') {
+        try {
+          const existingCount = await this.localCache.get(
+            'consecutive-loan-count'
+          );
+          consecutiveLoanCounts = existingCount ?? 1;
+        } catch (error) {
+          console.log(error);
+        }
+      }
+
+      // Do an initial token, then set an interval
+      this.handleLoanTokenPoller();
+
+      this.loanTokenInterval = setInterval(() => {
+        this.handleLoanTokenPoller();
+      }, this.loanTokenPollingDelay);
+
+      // event category and action for browsing book access
+      const category = `${borrowType}BookAccess`;
+      const action = `${
+        borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
+      }${consecutiveLoanCounts}`;
+      console.log(consecutiveLoanCounts)
+      this.sendEvent(category, action);
+    } else {
+      // if book is not browsed, just clear token polling interval
+      clearInterval(this.loanTokenInterval);
+    }
+  }
+
+  sendEvent(eventCategory, eventAction) {
+    // eslint-disable-next-line no-console
+    console?.log('Book action: ', { eventCategory, eventAction });
+    window?.archive_analytics?.send_event_no_sampling(
+      eventCategory,
+      eventAction,
+      `identifier=${this.identifier}`
+    );
+  }
+
+  async handleLoanTokenPoller() {
+    const action = 'create_token';
+    // await new Promise(r => setTimeout(r, 3000));
+    console.log(this.callback)
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action,
+      error: data => {
+        console.log('error', data);
+        this.handleLendingActionError({detail: { action, data }})
+        // this.dispatchActionError(action, data);
+        clearInterval(this.loanTokenInterval); // stop token fetch api
+        this.callback();
+      },
+      success: () => {
+        this.callback();
+      }
+    });
+  }
+
+  /**
+   * 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 = {}) {
+    console.log('disptaced');
+    this.dispatchEvent(
+      new CustomEvent('lendingActionError', {
+        detail: { action, data },
+      })
+    );
+  }
+}

package/src/ia-book-actions.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { html, css, LitElement } from 'lit-element';
+import { html, css } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalConfig } from '@internetarchive/modal-manager';
@@ -10,11 +10,10 @@ import './components/text-group.js';
 import './components/info-icon.js';
 
 import GetLendingActions from './core/services/get-lending-actions.js';
-import getRealTimeLendingStatus from './core/services/get-realtime-lending-status.js';
-
 import { mobileContainerWidth } from './core/config/constants.js';
+import { LoanTokenPoller } from './core/services/loan-token-poller.js';
 
-export default class IABookActions extends LitElement {
+export default class IABookActions extends LoanTokenPoller {
   static get properties() {
     return {
       userid: { type: String },
@@ -23,10 +22,11 @@ export default class IABookActions extends LitElement {
       lendingStatus: { type: Object },
       width: { type: Number },
       bwbPurchaseUrl: { type: String },
+      lendingBarPostInit: { type: Function },
       barType: { type: String },
       sharedObserver: { attribute: false },
       disableActionGroup: { type: Boolean },
-      modalConfig: { type: Object },
+      modal: { Object },
     };
   }
 
@@ -38,16 +38,20 @@ export default class IABookActions extends LitElement {
     this.lendingStatus = {};
     this.width = 0;
     this.bwbPurchaseUrl = '';
+    this.lendingBarPostInit = () => {};
     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;
-    this.modalConfig = {};
-    this.realtimeInternal = 0; // store intervalID
+    this.borrowType = ''; // (browsed|borrowed)
+    this.consecutiveLoanCounts = 1; // consecutive loan count
   }
 
   disconnectedCallback() {
@@ -59,29 +63,10 @@ export default class IABookActions extends LitElement {
       this.sharedObserver = new SharedResizeObserver();
       this.setupResizeObserver();
     }
-
-    if (!Object.keys(this.modalConfig).length) {
-      this.modalConfig = new ModalConfig();
-      this.modalConfig.headerColor = '#d9534f';
-    }
-    this.setupLendingToolbarActions();
-
-    // fetch latest lending status after an internal
-    if (
-      this.lendingStatus.user_has_browsed ||
-      this.lendingStatus.user_has_borrowed
-    ) {
-      this.realtimeInternal = setInterval(() => {
-        const latestLendingStatus = getRealTimeLendingStatus(
-          'naturalhistoryof00unse_4'
-        );
-        console.log(latestLendingStatus);
-        if (latestLendingStatus) this.lendingStatus = latestLendingStatus;
-      }, 30000); // 60000 ms = 1 min
-    }
   }
 
   updated(changed) {
+    // console.log(changed)
     if (changed.has('lendingStatus') || changed.has('bwbPurchaseUrl')) {
       this.setupLendingToolbarActions();
       this.update();
@@ -172,14 +157,28 @@ export default class IABookActions extends LitElement {
       // when browse is completed, we shows browse-again button
       this.startBrowseTimer();
     }
+
+    console.log('this.borrowType', this.borrowType);
+
+    /**
+     * this.lendingBarPostInit() callback function use to:-
+     * - disptach lendingFlow::PostInit event
+     * - initialize bookreader using br.init()
+     */
+    if (this.borrowType) {
+      // enable access of borrowed/browsed books
+      this.enableBookAccess(this.identifier, this.borrowType, this.lendingBarPostInit);
+    } else {
+      this.lendingBarPostInit();
+    }
   }
 
   render() {
-    return html`
-      <section class="lending-wrapper">
-        ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
-      </section>
-    `;
+    if (this.barType === 'title') {
+      return html`<section class="lending-wrapper">${this.bookTitleBar}</section>`;
+    }
+
+    return html`<section class="lending-wrapper">${this.bookActionBar}</section>`;
   }
 
   get bookTitleBar() {
@@ -202,6 +201,7 @@ export default class IABookActions extends LitElement {
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
         @lendingActionError=${this.handleLendingActionError}
+        @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
@@ -209,27 +209,41 @@ export default class IABookActions extends LitElement {
   }
 
   /*
-   * handle lending errors occure on different operation like
+   * custom event handler to toggle action group visibility
+   *
+   * @event IABookActions#toggleActionGroup
+   */
+  handleToggleActionGroup() {
+    this.disableActionGroup = !this.disableActionGroup;
+  }
+
+  /*
+   * handle lending errors occure during different operation like
    * browse book, borrow book, borrowed book token etc...
+   *
+   * @event IABookActions#lendingActionError
+   * @param {Object} event - The employee who is responsible for the project
+   *  @param {string} event.detail.action - action when error occurred like 'browseBook', 'borrowBook'
+   *  @param {string} event.detail.data.error - error message
    */
-  handleLendingActionError(e) {
+  handleLendingActionError(event) {
     // toggle activity loader
-    this.disableActionGroup = !this.disableActionGroup;
+    this.handleToggleActionGroup();
 
-    const context = e?.detail?.context;
-    const errorMsg = e?.detail?.data?.error;
+    const action = event?.detail?.action;
+    const errorMsg = event?.detail?.data?.error;
 
-    if (errorMsg) this.showErrorModal(context, errorMsg);
+    if (errorMsg) this.showErrorModal(errorMsg, action);
 
     // update action bar state if book is not available to browse or borrow.
     if (errorMsg && errorMsg.match(/not available to borrow/gm)) {
       let currStatus = this.lendingStatus;
-      if (context === 'browse_book') {
+      if (action === 'browse_book') {
         currStatus = {
           ...this.lendingStatus,
           available_to_browse: false,
         };
-      } else if (context === 'borrow_book') {
+      } else if (action === 'borrow_book') {
         currStatus = {
           ...this.lendingStatus,
           available_to_borrow: false,
@@ -240,24 +254,42 @@ export default class IABookActions extends LitElement {
   }
 
   /* show error message if something went wrong */
-  async showErrorModal(context, errorMsg) {
-    // add modal-manager in DOM to show alert message
-    this.modal = document.createElement('modal-manager');
-    this.modal.id = 'action-bar-modal';
-    await document.body.appendChild(this.modal);
+  async showErrorModal(errorMsg, action) {
+    this.disableActionGroup = false;
 
-    // fallback if <modal-manager> is not found!
+    // check if this.modal passed as prop
     if (!this.modal) {
-      alert(errorMsg);
-      return;
+      this.modal = document.querySelector('modal-manager');
+
+      // check the DOM if <modal-manager> already there
+      if (!this.modal) this.modal = document.createElement('modal-manager');
     }
 
-    this.disableActionGroup = false;
-    this.modalConfig.title = 'Lending error';
-    this.modalConfig.message = errorMsg;
+    this.modal.id = 'action-bar-modal';
+    await document.body.appendChild(this.modal);
+
+    const modalConfig = new ModalConfig({
+      title: 'Lending error',
+      message: errorMsg,
+      headerColor: '#d9534f',
+    });
+
+    if (action === 'create_token') {
+      modalConfig.closeOnBackdropClick = false;
+      modalConfig.showCloseButton = false;
+      modalConfig.message = html` Uh oh, something went wrong trying to access
+        this book.<br />
+        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}"
+          >info@archive.org</a
+        >`;
+    }
 
     this.modal.showModal({
-      config: this.modalConfig,
+      config: modalConfig,
     });
   }
 

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 browsed', async () => {
-    await fixture(container({ borrowType: 'browsed' }));
-    expect(localStorage.getItem).to.be.calledOnce;
-    expect(localStorage.getItem).to.be.calledWith('consecutive-loan-count');
-  });
-
-  it('test localStorage function when borrowType is borrowed', async () => {
-    await fixture(container({ borrowType: 'borrowed' }));
-    expect(localStorage.getItem).to.not.be.calledOnce;
-    expect(localStorage.getItem).to.not.be.calledWith('consecutive-loan-count');
-  });
-});

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

@@ -122,7 +122,7 @@ describe('Borrow status actions', () => {
     el.addEventListener('lendingActionError', () => {
       el.handleLendingActionError({
         detail: {
-          context: 'browse_book',
+          action: 'browse_book',
           data: { error: 'not available to borrow' },
         },
       });
@@ -151,7 +151,7 @@ describe('Borrow status actions', () => {
     el.addEventListener('lendingActionError', () => {
       el.handleLendingActionError({
         detail: {
-          context: 'borrow_book',
+          action: 'borrow_book',
           data: { error: 'not available to borrow' },
         },
       });

package/src/core/services/get-realtime-lending-status.js

@@ -1,27 +0,0 @@
-/*
- * Helper function to fetch real-time lending status
- */
-export default function getRealTimeLendingStatus(identifier) {
-  let url = `https://ia-petabox-neeraj.archive.org/services/book/lending-info.php?identifier=${identifier}`;
-
-  if (window.location.pathname === '/demo/') {
-    url = ''; // change URL to prevent error on localhost
-  }
-
-  fetch(url)
-    .then(response => {
-      // return { response_code: '400', data: 'error happened' };
-      return response.json();
-    })
-    .then(data => {
-      let newLendingInfo = data;
-      const newLendingStatus = data?.lendingStatus;
-      newLendingInfo = { ...newLendingInfo, ...newLendingStatus };
-      newLendingInfo.lendingStatus = '';
-
-      return newLendingInfo;
-    })
-    .catch(data => {
-      return data;
-    });
-}