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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.6-1",
+  "version": "0.0.6-2",
   "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`;
   }
@@ -34,25 +30,12 @@ export default function ActionsHandlerService(options) {
   fetch(baseHost, {
     method: 'POST',
     body: formData,
-  })
-    .then(response => {
-      if (response.status === 200) {
-        option.success.call();
-      }
-    })
-    .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');
-
-  const actionLoader = collapsibleElement.shadowRoot.querySelector(
-    '.action-loader'
-  );
-  actionLoader.setAttribute('style', 'visibility: visible');
+  }).then(response => {
+    if (response.status === 200) {
+      option?.success(response);
+    } else {
+      option?.error(response);
+    }
+    return;
+  });
 }

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

@@ -90,53 +90,93 @@ export default class ActionsHandler extends LitElement {
   }
 
   handleBrowseIt() {
+    const context = 'browse_book';
+    this.toggleLoader(context);
+
     ActionsHandlerService({
-      action: 'browse_book',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: response => {
+        console.log(response);
+        alert(JSON.stringify(response.error));
+        this.toggleLoader(context);
+      },
     });
   }
 
   handleReturnIt() {
+    const context = 'return_loan';
+    this.toggleLoader(context);
+
     ActionsHandlerService({
-      action: 'return_loan',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.deleteLoanCookies();
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
+      error: response => {
+        console.log(response);
+        alert(JSON.stringify(response.error));
+        this.toggleLoader(context);
+      },
     });
   }
 
   handleBorrowIt() {
+    const context = 'borrow_book';
+    this.toggleLoader(context);
+
     ActionsHandlerService({
-      action: 'borrow_book',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: response => {
+        console.log(response);
+        alert(JSON.stringify(response.error));
+        this.toggleLoader(context);
+      },
     });
   }
 
   handleReserveIt() {
+    const context = 'join_waitlist';
+    this.toggleLoader(context);
+
     ActionsHandlerService({
-      action: 'join_waitlist',
+      action: context,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: response => {
+        console.log(response);
+        alert(JSON.stringify(response.error));
+        this.toggleLoader(context);
+      },
     });
   }
 
   handleRemoveFromWaitingList() {
+    const context = 'leave_waitlist';
+    this.toggleLoader(context);
+
     ActionsHandlerService({
-      action: 'leave_waitlist',
+      action: context,
       identifier: this.identifier,
       success: () => {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
+      error: response => {
+        console.log(response);
+        alert(JSON.stringify(response.error));
+        this.toggleLoader(context);
+      },
     });
   }
 
@@ -151,6 +191,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 +229,12 @@ export default class ActionsHandler extends LitElement {
     cookie += '; path=/; domain=.archive.org;';
     document.cookie = cookie;
   }
+
+  toggleLoader(context) {
+    this.dispatchEvent(
+      new CustomEvent('toggle-loader', {
+        detail: context,
+      })
+    );
+  }
 }

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,26 @@ export default class IABookActions extends LitElement {
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
         .hasAdminAccess=${this.hasAdminAccess}
+        .disabled=${this.disable}
+        @toggle-loader=${this.toggleLoader}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
     `;
   }
 
+  toggleLoader(e) {
+    // if activity loader is disabled and action is browse or borrow,
+    // just change the lendingStatus to dynamic update action buttons
+    if (this.disable && ['browse_book', 'borrow_book'].includes(e.detail)) {
+      console.log('lendingStatus is changed to redraw action-buttons');
+      const currStatus = { ...this.lendingStatus, available_to_browse: false };
+      this.lendingStatus = currStatus;
+    }
+
+    this.disable = !this.disable;
+  }
+
   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');