@internetarchive/ia-book-actions 0.0.6-1 → 0.0.6-5

package/demo/index.html

@@ -96,7 +96,7 @@
     iaBookActions.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 = '';
 

package/package.json

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

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

@@ -80,7 +80,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 +129,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,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       width: { type: Number },
       hasAdminAccess: { type: Boolean },
       dropdownArrow: { type: String },
+      disabled: { type: Boolean },
     };
   }
 
@@ -42,6 +44,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.initialButton = false;
     this.title = '';
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
+    this.disabled = false;
   }
 
   updated(changed) {
@@ -94,13 +97,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>
     `;
   }
 
@@ -225,7 +235,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

@@ -10,19 +10,15 @@ export default function ActionsHandlerService(options) {
     identifier: '',
     data: {},
     success() {},
-    error: null,
+    error() {},
     loader: true,
     type: 'POST',
     ...options,
   };
 
-  if (option.loader) {
-    showActionButtonLoader();
-  }
-
   let baseHost = '';
   if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/`;
+    baseHost = `/demo/1`;
   } else {
     baseHost = `/services/loans/loan`;
   }
@@ -36,23 +32,25 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
-      if (response.status === 200) {
-        option.success.call();
+      // test changes, (won't affect you)
+      if (baseHost == '/demo/1' || baseHost == '/demo/') {
+        return {
+          error: 'This book is not available to browse at this time. Please try again later.',
+          // error: 'This book is not available to borrow at this time. Please try again later.',
+        };
       }
+
+      // The response is a Response instance.
+      // You parse the data into a useable format using `.json()`
+      return response.json();
     })
-    .catch(error => {
-      console.log(error);
+    .then(data => {
+      // `data` is the parsed version of the JSON returned from the above endpoint.
+      console.log('actual reponse for endpoint', data);
+      if (!data.error) {
+        option?.success(data);
+      } else {
+        option?.error(data);
+      }
     });
 }
-
-function showActionButtonLoader() {
-  const collapsibleElement = document
-    .querySelector('ia-book-actions')
-    .shadowRoot.querySelector('collapsible-action-group');
-  collapsibleElement.setAttribute('style', 'opacity:0.8; pointer-events:none');
-
-  const actionLoader = collapsibleElement.shadowRoot.querySelector(
-    '.action-loader'
-  );
-  actionLoader.setAttribute('style', 'visibility: visible');
-}

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

@@ -7,10 +7,7 @@ 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 {
@@ -90,53 +87,88 @@ export default class ActionsHandler extends LitElement {
   }
 
   handleBrowseIt() {
+    const context = 'browse_book';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'browse_book',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: data => {
+        alert(data.error);
+        this.toggleActionBarState(context, data);
+      },
     });
   }
 
   handleReturnIt() {
+    const context = 'return_loan';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'return_loan',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.deleteLoanCookies();
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
+      error: data => {
+        alert(data.error);
+        this.toggleActionBarState(context);
+      },
     });
   }
 
   handleBorrowIt() {
+    const context = 'borrow_book';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'borrow_book',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: data => {
+        alert(data.error);
+        this.toggleActionBarState(context, data);
+      },
     });
   }
 
   handleReserveIt() {
+    const context = 'join_waitlist';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'join_waitlist',
+      action: context,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: data => {
+        alert(data.error);
+        this.toggleActionBarState(context);
+      },
     });
   }
 
   handleRemoveFromWaitingList() {
+    const context = 'leave_waitlist';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'leave_waitlist',
+      action: context,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: data => {
+        alert(data.error);
+        this.toggleActionBarState(context);
+      },
     });
   }
 
@@ -151,6 +183,9 @@ export default class ActionsHandler extends LitElement {
   handleReadItNow(extraParam) {
     const currentParams = new URLSearchParams(window.location.search);
 
+    // Delete the ?q= parameter just after borrow a book. see: WEBDEV-3979
+    currentParams.delete('q');
+
     if (extraParam) {
       // append extraParam key-value in currentParams
       const extraParams = new URLSearchParams(extraParam);
@@ -186,4 +221,12 @@ export default class ActionsHandler extends LitElement {
     cookie += '; path=/; domain=.archive.org;';
     document.cookie = cookie;
   }
+
+  toggleActionBarState(context, data = {}) {
+    this.dispatchEvent(
+      new CustomEvent('toggle-action-bar-state', {
+        detail: { context, data },
+      })
+    );
+  }
 }

package/src/ia-book-actions.js

@@ -22,6 +22,7 @@ export default class IABookActions extends LitElement {
       bwbPurchaseUrl: { type: String },
       barType: { type: String },
       sharedObserver: { attribute: false },
+      disable: { type: Boolean },
     };
   }
 
@@ -40,6 +41,7 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
+    this.disable = false;
   }
 
   disconnectedCallback() {
@@ -67,8 +69,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;
   }
 
@@ -173,12 +174,31 @@ export default class IABookActions extends LitElement {
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
         .hasAdminAccess=${this.hasAdminAccess}
+        .disabled=${this.disable}
+        @toggle-action-bar-state=${this.toggleActionBarState}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
     `;
   }
 
+  toggleActionBarState(e) {
+    // toggle activity loader
+    this.disable = !this.disable;
+
+    // update action bar states is book is not available to browse or borrow.
+    if (e?.detail?.data?.error) {
+      const errorMsg = e.detail.data.error;
+      if (errorMsg.match(/not available to browse/gm)) {
+        const currStatus = {...this.lendingStatus, available_to_browse: false };
+        this.lendingStatus = currStatus;
+      } else if (errorMsg.match(/not available to borrow/gm)) {
+        const currStatus = { ...this.lendingStatus, available_to_borrow: false };
+        this.lendingStatus = currStatus;
+      }
+    }
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }

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

@@ -39,6 +39,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');