@internetarchive/ia-book-actions 0.0.5 → 0.0.6-4

package/src/components/book-title-bar.js

@@ -0,0 +1,93 @@
+import { html, css } from 'lit-element';
+
+import {
+  analyticsCategories,
+  analyticsActions,
+} from '../core/config/analytics-event-and-category.js';
+import ActionsHandler from '../core/services/actions-handler/actions-handler.js';
+
+import { archiveLogo } from '../assets/data/archive-logo.js';
+
+export class BookTitleBar extends ActionsHandler {
+  static get properties() {
+    return {
+      identifier: { type: String },
+      bookTitle: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.identifier = '';
+    this.bookTitle = '';
+    this.analyticsCategories = analyticsCategories;
+    this.analyticsActions = analyticsActions;
+  }
+
+  /**
+   * Click handler to emit custom event on action click
+   */
+  clickHandler() {
+    const { category, action } = {
+      category: this.analyticsCategories.bookReaderHeader,
+      action: this.analyticsActions.titleBar,
+    };
+
+    this.dispatchEvent(
+      new CustomEvent('bookTitleBar', {
+        detail: {
+          event: { category, action },
+        },
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <a
+        class="embed-link"
+        @click=${() => {
+          this.clickHandler();
+        }}
+        href="/details/${this.identifier}"
+      >
+        <span>${archiveLogo}</span>
+        <span class="title">${this.bookTitle}</span>
+      </a>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        padding: 0 10px;
+        height: 3.4rem;
+        display: flex;
+      }
+      .embed-link {
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        color: var(--primaryTextColor, #fff);
+        font-size: 1.4rem;
+      }
+      .embed-link .title {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-align: left;
+        line-height: initial;
+      }
+      .embed-link svg {
+        margin-right: 0.5rem;
+        display: block;
+      }
+      .embed-link:hover {
+        text-decoration: underline;
+      }
+    `;
+  }
+}
+
+window.customElements.define('book-title-bar', BookTitleBar);

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/config/analytics-event-and-category.js

@@ -6,9 +6,8 @@ export const analyticsCategories = {
   browse: 'BookReader-ReadingBrowse',
   preview: 'BookReader-Preview',
   satisfactionMetric: 'DetailsPage-Book',
-  purchase: 'BookReaderHeader',
-  unavailable: 'BookReader-Preview',
-  admin: 'Admin',
+  bookReaderHeader: 'BookReader-Header',
+  adminAccess: 'Admin-Access',
 };
 
 export const analyticsActions = {
@@ -21,4 +20,6 @@ export const analyticsActions = {
   login: 'LogIn',
   purchase: 'BWBPurchase',
   unavailable: 'Book-Unavailable',
+  printDisability: 'Print-Disability',
+  titleBar: 'Book-Title-Bar',
 };

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

@@ -33,7 +33,7 @@ export default class ActionsConfig {
     this.analyticsActions = analyticsActions;
   }
 
-  browseBookConfig() {
+  firstBrowseConfig() {
     return {
       id: 'browseBook',
       text: 'Borrow for 1 hour',
@@ -45,10 +45,22 @@ export default class ActionsConfig {
     };
   }
 
+  browseAgainConfig() {
+    return {
+      id: 'browseBookAgain',
+      text: 'Borrow again',
+      className: 'primary',
+      analyticsEvent: {
+        category: this.analyticsCategories.browse,
+        action: this.analyticsActions.browseAgain,
+      },
+    };
+  }
+
   returnBookConfig() {
     const eventCategory = this.lendingStatus.user_has_browsed
-      ? 'browse'
-      : 'borrow';
+      ? this.analyticsCategories.browse
+      : this.analyticsCategories.borrow;
 
     return {
       id: 'returnNow',
@@ -77,7 +89,7 @@ export default class ActionsConfig {
       analyticsEvent: {
         category: this.lendingStatus.user_has_browsed
           ? this.analyticsCategories.browse
-          : this.analyticsCategories.borrow,
+          : this.analyticsCategories.preview,
         action: this.analyticsActions.borrow,
       },
     };
@@ -161,7 +173,7 @@ export default class ActionsConfig {
       target: '_blank',
       className: 'purchase dark',
       analyticsEvent: {
-        category: this.analyticsCategories.purchase,
+        category: this.analyticsCategories.bookReaderHeader,
         action: this.analyticsActions.purchase,
       },
     };
@@ -179,8 +191,8 @@ export default class ActionsConfig {
       target: '_self',
       className: 'print-disability',
       analyticsEvent: {
-        category: this.analyticsCategories.purchase,
-        action: this.analyticsActions.purchase,
+        category: this.analyticsCategories.bookReaderHeader,
+        action: this.analyticsActions.printDisability,
       },
     };
   }
@@ -198,7 +210,7 @@ export default class ActionsConfig {
       target: '_self',
       className: 'danger',
       analyticsEvent: {
-        category: this.analyticsCategories.admin,
+        category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.borrow,
       },
     };
@@ -216,7 +228,7 @@ export default class ActionsConfig {
       target: '_self',
       className: 'ia-button',
       analyticsEvent: {
-        category: this.analyticsCategories.admin,
+        category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.doneBorrowing,
       },
     };
@@ -229,7 +241,7 @@ export default class ActionsConfig {
       className: 'primary unavailable',
       disabled: true,
       analyticsEvent: {
-        category: this.analyticsCategories.unavailable,
+        category: this.analyticsCategories.preview,
         action: this.analyticsActions.unavailable,
       },
     };

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,21 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
-      if (response.status === 200) {
-        option.success.call();
+      if (baseHost == '/demo/1' || baseHost == '/demo/') {
+        return {"error":"Unexpected error.\nPlease email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you. \nMessage:UNAVAILABLE"};
       }
+
+      // 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,17 +7,14 @@ 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 = 5000;
+    this.ajaxTimeout = 6000;
     this.bindEvents();
   }
 
@@ -82,56 +79,101 @@ export default class ActionsHandler extends LitElement {
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
+
+    this.addEventListener('bookTitleBar', ({ detail }) => {
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
   }
 
   handleBrowseIt() {
+    const context = 'browse_book';
+    this.toggleActionBarState(context);
+
     ActionsHandlerService({
-      action: 'browse_book',
+      action: context,
       identifier: this.identifier,
       success: () => {
         this.handleReadItNow();
       },
+      error: data => {
+        console.log(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 => {
+        console.log(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 => {
+        console.log(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 => {
+        console.log(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 => {
+        console.log(data);
+        alert(data.error);
+        this.toggleActionBarState(context);
+      },
     });
   }
 
@@ -184,4 +226,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/core/services/get-lending-actions.js

@@ -2,7 +2,6 @@
 /* eslint no-console: "off" */
 /* eslint no-nested-ternary: "off" */
 /* eslint-disable */
-import { nothing } from 'lit-html';
 import { URLHelper } from '../config/url-helper.js';
 import {
   analyticsCategories,
@@ -104,7 +103,7 @@ export default class GetLendingActions {
     const leaveWaitlist = this.actionsConfig.leaveWaitlistConfig();
     const borrowBook = this.actionsConfig.borrowBookConfig();
     const browseBook = lendingStatus.available_to_browse
-      ? this.actionsConfig.browseBookConfig()
+      ? this.actionsConfig.firstBrowseConfig()
       : null;
 
     const dropdownOptions = browseBook ? [browseBook, borrowBook] : [];
@@ -150,7 +149,7 @@ export default class GetLendingActions {
       primaryTitle: 'You are on the waitlist for this book.',
       primaryActions: [
         this.actionsConfig.leaveWaitlistConfig(),
-        this.actionsConfig.browseBookConfig(),
+        this.actionsConfig.firstBrowseConfig(),
       ],
       primaryColor: 'primary',
       secondaryActions: [
@@ -160,10 +159,18 @@ export default class GetLendingActions {
     };
   }
 
+  // check restricted item behaviour here /activemeasuresse0000ridt
   restrictedAction() {
-    // check restricted item behaviour here /activemeasuresse0000ridt
+    const lendingStatus = this.lendingStatus || {};
+    const anotherPatronUsing =
+      lendingStatus.max_browsable_copies &&
+      !lendingStatus.available_lendable_copies;
+    const title = anotherPatronUsing
+      ? 'Another patron is using this book. Please check back later.'
+      : 'This book is not available at this time.';
+
     return {
-      primaryTitle: 'This book is not available at this time.',
+      primaryTitle: title,
       primaryActions: [this.actionsConfig.unavailableBookConfig()],
       primaryColor: 'primary',
       secondaryActions: [
@@ -192,7 +199,9 @@ export default class GetLendingActions {
       borrow = this.actionsConfig.unavailableBookConfig();
     }
 
-    const actions = [borrow, waitlist].filter(action => {
+    const printDisability = this.actionsConfig.printDisabilityConfig();
+
+    const actions = [borrow, waitlist, printDisability].filter(action => {
       return action !== null;
     });
 
@@ -255,25 +264,9 @@ export default class GetLendingActions {
       : possibleTitles.one_hour;
 
     // one hour borrow config
-    const oneHrBorrowText = browsingHasExpired
-      ? 'Borrow again'
-      : 'Borrow for 1 hour';
-    const browseAgainEvent = {
-      category: this.analyticsCategories.browse,
-      action: this.analyticsActions.browseAgain,
-    };
-    const firstBrowseEvent = {
-      category: this.analyticsCategories.preview,
-      action: this.analyticsActions.browse,
-    };
-    const oneHrBorrowEvent = browsingHasExpired
-      ? browseAgainEvent
-      : firstBrowseEvent;
-
-    const oneHrBorrow = this.actionsConfig.browseBookConfig(
-      oneHrBorrowText,
-      oneHrBorrowEvent
-    );
+    const oneHrBorrow = browsingHasExpired
+      ? this.actionsConfig.browseAgainConfig()
+      : this.actionsConfig.firstBrowseConfig();
 
     const borrow = this.actionsConfig.borrowBookConfig();
     const waitlist = this.actionsConfig.waitlistConfig();
@@ -308,10 +301,7 @@ export default class GetLendingActions {
       return this.loggedOutOptions();
     }
 
-    const canBrowse =
-      lendingStatus.available_to_browse ||
-      (!lendingStatus.available_to_browse && lendingStatus.browsingExpired);
-    if (canBrowse) {
+    if (lendingStatus.available_to_browse || lendingStatus.browsingExpired) {
       return this.borrow1HrAction();
     }
 
@@ -378,7 +368,8 @@ export default class GetLendingActions {
       lendingStatus.user_is_printdisabled;
 
     const patronIsReading =
-      lendingStatus.user_has_borrowed || lendingStatus.user_has_browsed;
+      lendingStatus.user_has_borrowed ||
+      (lendingStatus.user_has_browsed && !lendingStatus.browsingExpired);
 
     const notBorrowed =
       !lendingStatus.user_has_borrowed && !lendingStatus.user_has_browsed;
@@ -414,7 +405,7 @@ export default class GetLendingActions {
       lendingActions = this.leaveWaitlistAction();
     } else if (userCanAccessPrintDisabled) {
       lendingActions = this.borrowPrintDisabledAction();
-    } else if (canBorrow) {
+    } else if (canBorrow || lendingStatus.browsingExpired) {
       lendingActions = this.borrowAction();
     } else if (lendingStatus.isPrintDisabledOnly) {
       lendingActions = this.onlyPrintDisabledAction();