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

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

@@ -71,6 +71,14 @@
       float: left;
       margin: 2px;
     }
+
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+  
+    modal-manager[mode='closed'] {
+      display: none;
+    }
   </style>
 </head>
 
@@ -85,6 +93,7 @@
       defaultLendingStatus,
       canBrowseAndBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
 
     const userid = '@neeraj-archive';
     const identifier = 'naturalhistoryof00unse_4111';
@@ -92,13 +101,17 @@
 
     let iaBookActions = document.querySelector('ia-book-actions');
 
+    const modalConfig = new ModalConfig();
+    modalConfig.headerColor = '#d9534f';
+
     // set defaultLendingStatus for unavailable (without borrowables) book
-    iaBookActions.userid = '';
+    iaBookActions.userid = userid;
     iaBookActions.identifier = identifier;
     iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
-    iaBookActions.lendingStatus = defaultLendingStatus;
+    iaBookActions.lendingStatus = canBrowseAndBorrow;
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.barType = '';
+    iaBookActions.modalConfig = modalConfig;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
 
@@ -112,6 +125,29 @@
       });
     });
 
+    document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
+      if (window.location.href.indexOf('?error=true') !== -1) {
+        item.checked = true;
+      }
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('error', true);
+        } else {
+          separate = '';
+          searchParams.delete('error');
+        }
+
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
+    
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.checked) {
@@ -219,6 +255,9 @@
     <fieldset>
       <legend>Dev testing for book action bar</legend>
         <table class="initial">
+          <tr colspan='5'>
+            <td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
+          </tr>
           <tr>
             <td class="userState">
               <label><input type="checkbox" name="user" value="isAdmin" />isAdmin</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.6",
+  "version": "0.0.7-03",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -20,7 +20,9 @@
   "dependencies": {
     "@internetarchive/ia-icons": "^1.2.2",
     "@internetarchive/icon-bookmark": "^1.1.3",
+    "@internetarchive/icon-close": "^1.1.3",
     "@internetarchive/icon-info": "^1.2.6",
+    "@internetarchive/modal-manager": "^0.1.0",
     "@internetarchive/shared-resize-observer": "^0.0.1",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0"

package/src/assets/styles/collapsible-action-group.js

@@ -6,6 +6,9 @@ export default css`
     height: 3.5rem;
     padding: 1rem 0;
   }
+  .actiongroup {
+    display: flex;
+  }
   .action-buttons {
     display: inline-flex;
     align-items: center;
@@ -80,7 +83,7 @@ export default css`
     padding: 0 0.6rem;
     margin-left: 0;
   }
-  .action-loader {
+  .actionloader {
     vertical-align: middle;
     visibility: hidden;
     padding: 0.9rem 0.2rem;
@@ -129,9 +132,14 @@ export default css`
     display: initial;
     font-size: 1.4rem;
   }
-
   .unavailable {
     opacity: 0.7;
     pointer-events: none;
   }
+
+  .disabled {
+    opacity: 0.8;
+    pointer-events: none;
+    visibility: visible;
+  }
 `;

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

@@ -1,5 +1,6 @@
 import { html } from 'lit-element';
 import { nothing } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map';
 
 import ActionsHandler from '../core/services/actions-handler/actions-handler.js';
 
@@ -25,6 +26,8 @@ export class CollapsibleActionGroup extends ActionsHandler {
       width: { type: Number },
       hasAdminAccess: { type: Boolean },
       dropdownArrow: { type: String },
+      disabled: { type: Boolean },
+      borrowType: { type: String },
     };
   }
 
@@ -42,6 +45,9 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.initialButton = false;
     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) {
@@ -50,6 +56,42 @@ export class CollapsibleActionGroup extends ActionsHandler {
         this.resetActions();
       }
     }
+
+    // this is execute to fetch loan token
+    if (changed.has('borrowType')) {
+      this.emitEnableBookAccess();
+    }
+  }
+
+  /**
+   * Handles events when user is borrowing book and wants to have access to read
+   *
+   * @fires CollapsibleActionGroup#enableBookAccess
+   */
+  emitEnableBookAccess() {
+    // send consecutiveLoanCounts for browsed books only.
+    if (this.borrowType === 'browsing') {
+      this.consecutiveLoanCounts =
+        localStorage.getItem('consecutive-loan-count') ?? 1;
+    }
+
+    // event category and action for browsing book access
+    const eventCategory = `${this.borrowType}BookAccess`;
+    const eventAction = `${
+      this.borrowType === 'browsing' ? 'BrowseCounts-' : 'Counts-'
+    }${this.consecutiveLoanCounts}`;
+
+    this.dispatchEvent(
+      new CustomEvent('enableBookAccess', {
+        detail: {
+          event: {
+            category: eventCategory, // brosingBookAccess | borrowingBookAccess
+            action: eventAction, // (BrowseCounts-N|Counts-N)
+          },
+          borrowType: this.borrowType,
+        },
+      })
+    );
   }
 
   /**
@@ -94,13 +136,20 @@ export class CollapsibleActionGroup extends ActionsHandler {
 
   render() {
     return html`
-      ${this.getLoaderIcon}
-      <section class="action-buttons primary">
-        ${this.renderPrimaryActions}
-      </section>
-      <section class="action-buttons secondary">
-        ${this.renderSecondaryActions}
-      </section>
+      <div
+        class="${classMap({
+          actiongroup: true,
+          disabled: this.disabled,
+        })}"
+      >
+        ${this.getLoaderIcon}
+        <section class="action-buttons primary">
+          ${this.renderPrimaryActions}
+        </section>
+        <section class="action-buttons secondary">
+          ${this.renderSecondaryActions}
+        </section>
+      </div>
     `;
   }
 
@@ -177,11 +226,13 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   /**
-   * Click handler to emit custom event on action click
-   * @param { string } eventName
-   * @param { object } gaEvent
+   * Handles click events when user click 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';
@@ -225,7 +276,14 @@ export class CollapsibleActionGroup extends ActionsHandler {
    * @returns { HTMLElement }
    */
   get getLoaderIcon() {
-    return html`<img class="action-loader" alt="" src="${this.loaderIcon}" />`;
+    return html`<img
+      class="${classMap({
+        actionloader: true,
+        disabled: this.disabled,
+      })}"
+      alt=""
+      src="${this.loaderIcon}"
+    />`;
   }
 
   /**

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

@@ -8,24 +8,15 @@ export default function ActionsHandlerService(options) {
   const option = {
     action: null,
     identifier: '',
-    data: {},
     success() {},
-    error: null,
-    loader: true,
-    type: 'POST',
+    error() {},
     ...options,
   };
 
-  if (option.loader) {
-    showActionButtonLoader();
-  }
+  let baseHost = '/services/loans/loan';
+  const location = window?.location;
 
-  let baseHost = '';
-  if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/`;
-  } else {
-    baseHost = `/services/loans/loan`;
-  }
+  if (location?.pathname === '/demo/') baseHost = `/demo/`;
 
   let formData = new FormData();
   formData.append('action', option.action);
@@ -36,23 +27,38 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
-      if (response.status === 200) {
-        option.success.call();
+      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...
+      const erroneousActions = ['browse_book', 'borrow_book', 'create_token'];
+      if (shouldReturnError && erroneousActions.includes(option?.action)) {
+        return {
+          success: false,
+          error: option?.action === 'create_token' ? tokenError : borrowError,
+        };
       }
-    })
-    .catch(error => {
-      console.log(error);
-    });
-}
 
-function showActionButtonLoader() {
-  const collapsibleElement = document
-    .querySelector('ia-book-actions')
-    .shadowRoot.querySelector('collapsible-action-group');
-  collapsibleElement.setAttribute('style', 'opacity:0.8; pointer-events:none');
+      // return success response for /demo/ server...
+      if (baseHost == '/demo/1' || baseHost == '/demo/') {
+        return {
+          success: true,
+          message: 'operation executed successfully!',
+        };
+      }
 
-  const actionLoader = collapsibleElement.shadowRoot.querySelector(
-    '.action-loader'
-  );
-  actionLoader.setAttribute('style', 'visibility: visible');
+      // The response is a Response instance.
+      // You parse the data into a useable format using `.json()`
+      return response.json();
+    })
+    .then(data => {
+      // `data` is the parsed version of the JSON returned from the above endpoint.
+      if (!data?.error) {
+        option?.success(data);
+      } else {
+        option?.error(data);
+      }
+    });
 }

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

@@ -7,33 +7,45 @@ import ActionsHandlerService from './actions-handler-service.js';
  *
  * ActionsHandlerService is a function being used to execute
  * APIs based of the request made by user. It consist some parameters are as follows:-
- * 1. action: action name like browse_book, return_book, borrow_book etc...
- * 2. identifier: book name.
- * 3. success: This is callback function which will be executed after the API request
- *    return reponse as a success.
+ * 1. identifier: book name.
  */
 
 export default class ActionsHandler extends LitElement {
   constructor(identifier) {
     super();
     this.identifier = identifier;
-    this.ajaxTimeout = 6000;
+    this.ajaxTimeout = 7000;
+    this.loanTokenPollingDelay =
+      window.location.pathname === '/demo/' ? 2000 : 120000; // 120000 ms = 2 min
+    this.loanTokenInterval = undefined;
     this.bindEvents();
   }
 
+  disconnectedCallback() {
+    this.loanTokenInterval = undefined;
+  }
+
   sendEvent(eventCategory, eventAction) {
     // eslint-disable-next-line no-console
     console?.log('Book action: ', { eventCategory, eventAction });
-    window?.archive_analytics?.send_event(
+    window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,
-      window.location.pathname
+      `identifier=${this.identifier}`
     );
   }
 
   bindEvents() {
     this.addEventListener('browseBook', ({ detail }) => {
       this.handleBrowseIt();
+      this.setConsecutiveLoanCounts();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
+    this.addEventListener('browseBookAgain', ({ detail }) => {
+      this.handleBrowseIt();
+      this.setConsecutiveLoanCounts('browseAgain');
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
@@ -87,59 +99,130 @@ 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) {
+        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 action = 'browse_book';
+    this.dispatchToggleActionGroup();
+
     ActionsHandlerService({
-      action: 'browse_book',
+      action,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
     });
   }
 
   handleReturnIt() {
+    const action = 'return_loan';
+    this.dispatchToggleActionGroup();
+
     ActionsHandlerService({
-      action: 'return_loan',
+      action,
       identifier: this.identifier,
       success: () => {
         this.deleteLoanCookies();
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
     });
   }
 
   handleBorrowIt() {
+    const action = 'borrow_book';
+    this.dispatchToggleActionGroup();
+
     ActionsHandlerService({
-      action: 'borrow_book',
+      action,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
     });
   }
 
   handleReserveIt() {
+    const action = 'join_waitlist';
+    this.dispatchToggleActionGroup();
+
     ActionsHandlerService({
-      action: 'join_waitlist',
+      action,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
     });
   }
 
   handleRemoveFromWaitingList() {
+    const action = 'leave_waitlist';
+    this.dispatchToggleActionGroup();
+
     ActionsHandlerService({
-      action: 'leave_waitlist',
+      action,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
+    });
+  }
+
+  handleLoanTokenPoller() {
+    const action = 'create_token';
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action,
+      error: data => {
+        this.dispatchActionError(action, data);
+        clearInterval(this.loanTokenInterval); // stop token fetch api
+      },
     });
   }
 
+  dispatchActionError(action, data = {}) {
+    this.dispatchEvent(
+      new CustomEvent('lendingActionError', {
+        detail: { action, data },
+      })
+    );
+  }
+
+  dispatchToggleActionGroup() {
+    this.dispatchEvent(new CustomEvent('toggleActionGroup'));
+  }
+
   handleLoginOk() {
     /* eslint class-methods-use-this: "off" */
     const target = `/account/login?referer=${encodeURIComponent(
@@ -172,6 +255,23 @@ export default class ActionsHandler extends LitElement {
     }, this.ajaxTimeout);
   }
 
+  // save consecutive loan count for borrow
+  setConsecutiveLoanCounts(action = '') {
+    const { localStorage } = window;
+    if (localStorage) {
+      let newCount = 1;
+      const storageKey = `consecutive-loan-count`;
+      const existingCount = Number(localStorage.getItem(storageKey));
+
+      // want to increase browse-count by 1 if,
+      // you consecutive reading a book.
+      if (action === 'browseAgain') {
+        newCount = existingCount ? existingCount + 1 : 1;
+      }
+      localStorage.setItem(storageKey, newCount);
+    }
+  }
+
   deleteLoanCookies() {
     const date = new Date();
     date.setTime(date.getTime() - 24 * 60 * 60 * 1000); // one day ago

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

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

package/src/ia-book-actions.js

@@ -2,6 +2,7 @@
 import { html, css, LitElement } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { ModalConfig } from '@internetarchive/modal-manager';
 
 import './components/collapsible-action-group.js';
 import './components/book-title-bar.js';
@@ -22,6 +23,7 @@ export default class IABookActions extends LitElement {
       bwbPurchaseUrl: { type: String },
       barType: { type: String },
       sharedObserver: { attribute: false },
+      disableActionGroup: { type: Boolean },
     };
   }
 
@@ -40,6 +42,7 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
+    this.disableActionGroup = false;
   }
 
   disconnectedCallback() {
@@ -51,6 +54,7 @@ export default class IABookActions extends LitElement {
       this.sharedObserver = new SharedResizeObserver();
       this.setupResizeObserver();
     }
+
     this.setupLendingToolbarActions();
   }
 
@@ -67,8 +71,7 @@ export default class IABookActions extends LitElement {
   }
 
   browseHasExpired() {
-    const browsingExpired = true;
-    const currStatus = { ...this.lendingStatus, browsingExpired };
+    const currStatus = { ...this.lendingStatus, browsingExpired: true };
     this.lendingStatus = currStatus;
   }
 
@@ -140,10 +143,10 @@ export default class IABookActions extends LitElement {
       return action != null;
     });
 
-    if (
-      this.lendingStatus.user_has_browsed &&
-      !this.lendingStatus.browseHasExpired
-    ) {
+    this.borrowType = actions.borrowType;
+    if (this.borrowType === 'browsing') {
+      // start timer for browsing.
+      // when browse is completed, we shows browse-again button
       this.startBrowseTimer();
     }
   }
@@ -172,13 +175,97 @@ export default class IABookActions extends LitElement {
         .primaryActions=${this.primaryActions}
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
-        .hasAdminAccess=${this.hasAdminAccess}
+        .borrowType=${this.borrowType}
+        ?hasAdminAccess=${this.hasAdminAccess}
+        ?disabled=${this.disableActionGroup}
+        @lendingActionError=${this.handleLendingActionError}
+        @toggleActionGroup=${this.handleToggleActionGroup}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
     `;
   }
 
+  /*
+   * 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(event) {
+    // toggle activity loader
+    this.handleToggleActionGroup();
+
+    const action = event?.detail?.action;
+    const errorMsg = event?.detail?.data?.error;
+
+    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 (action === 'browse_book') {
+        currStatus = {
+          ...this.lendingStatus,
+          available_to_browse: false,
+        };
+      } else if (action === 'borrow_book') {
+        currStatus = {
+          ...this.lendingStatus,
+          available_to_borrow: false,
+        };
+      }
+      this.lendingStatus = currStatus;
+    }
+  }
+
+  /* show error message if something went wrong */
+  async showErrorModal(errorMsg, action) {
+    this.disableActionGroup = false;
+
+    this.modal = document.querySelector('#action-bar-modal');
+    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({
+      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="/">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: modalConfig,
+    });
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }

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

@@ -1,5 +1,6 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import '../../src/components/collapsible-action-group.js';
+import Sinon from 'sinon';
 
 const container = ({
   primaryActions = [
@@ -23,10 +24,12 @@ const container = ({
       text: 'Purchase',
     },
   ],
+  borrowType = '',
 } = {}) =>
   html`<collapsible-action-group
     .primaryActions=${primaryActions}
     .secondaryActions=${secondaryActions}
+    .borrowType=${borrowType}
   ></collapsible-action-group>`;
 
 describe('<collapsible-action-group>', () => {
@@ -39,6 +42,22 @@ describe('<collapsible-action-group>', () => {
     const primaryButton = primaryActionContainer.querySelector('.ia-button');
     expect(primaryButton.innerText).to.equal('Borrow for 1 hour');
   });
+
+  it('check if loader is active and action-group is disabled', async () => {
+    const el = await fixture(container());
+
+    const primaryActionContainer = el.shadowRoot.querySelector('.primary');
+    primaryActionContainer
+      .querySelector('.ia-button')
+      .dispatchEvent(new CustomEvent('toggle-loader'));
+    el.disabled = true;
+    await el.updateComplete;
+
+    expect(el.disabled).to.be.true;
+    expect(el.shadowRoot.querySelector('div').classList.contains('disabled')).to
+      .be.true;
+  });
+
   it('fires analytics events', async () => {
     const el = await fixture(container());
     const primaryActionContainer = el.shadowRoot.querySelector('.primary');
@@ -66,3 +85,27 @@ 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');
+  });
+});

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

@@ -106,6 +106,64 @@ describe('Primary Actions data', () => {
 });
 
 describe('Borrow status actions', () => {
+  it('Update available_to_browse key when book is not available to borrow', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        lendingStatus: {
+          is_lendable: true,
+          available_to_browse: true,
+          available_to_borrow: true,
+        },
+      })
+    );
+
+    const errorEvent = new CustomEvent('lendingActionError');
+    el.addEventListener('lendingActionError', () => {
+      el.handleLendingActionError({
+        detail: {
+          action: 'browse_book',
+          data: { error: 'not available to borrow' },
+        },
+      });
+    });
+    el.dispatchEvent(errorEvent);
+    await el.updateComplete;
+
+    // removed available_to_browse from lending bar
+    expect(el.lendingStatus.available_to_browse).to.be.false;
+    expect(el.primaryActions[0].text).to.equal('Borrow for 14 days');
+  });
+
+  it('Update available_to_borrow key when book is not available to borrow', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        lendingStatus: {
+          is_lendable: true,
+          available_to_browse: true,
+          available_to_borrow: true,
+        },
+      })
+    );
+
+    const errorEvent = new Event('lendingActionError');
+    el.addEventListener('lendingActionError', () => {
+      el.handleLendingActionError({
+        detail: {
+          action: 'borrow_book',
+          data: { error: 'not available to borrow' },
+        },
+      });
+    });
+    el.dispatchEvent(errorEvent);
+    await el.updateComplete;
+
+    // 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');
+  });
+
   it('Check action for borrowable book without user', async () => {
     const el = await fixture(
       container({