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

package/demo/index.html

@@ -71,6 +71,16 @@
       float: left;
       margin: 2px;
     }
+
+    #ui-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+      opacity: 0.3;
+    }
   </style>
 </head>
 
@@ -96,7 +106,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 = '';
 
@@ -146,7 +156,7 @@
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
-          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.secondsLeftOnLoan = 30;
           lendingStatus1.browsingExpired = false;
         } else if(e.target.value === 'browsingExpired') {
           lendingStatus1.user_has_browsed = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.6-3",
+  "version": "0.0.6-7",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -21,6 +21,7 @@
     "@internetarchive/ia-icons": "^1.2.2",
     "@internetarchive/icon-bookmark": "^1.1.3",
     "@internetarchive/icon-info": "^1.2.6",
+    "@internetarchive/icon-close": "^1.1.3",
     "@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;

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

@@ -27,6 +27,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       hasAdminAccess: { type: Boolean },
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
+      bookHasBrowsed: { type: Boolean },
     };
   }
 
@@ -45,6 +46,13 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.title = '';
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
+    this.bookHasBrowsed = false;
+  }
+
+  firstUpdated() {
+    if (this.bookHasBrowsed) {
+      this.emitFetchLoanToken();
+    }
   }
 
   updated(changed) {
@@ -53,6 +61,23 @@ export class CollapsibleActionGroup extends ActionsHandler {
         this.resetActions();
       }
     }
+
+    // this is execute on demo page only
+    if (changed.has('bookHasBrowsed')) {
+      this.emitFetchLoanToken();
+    }
+  }
+
+  /* emit custom event to fetch loan token */
+  emitFetchLoanToken() {
+    this.dispatchEvent(
+      new CustomEvent('fetchLoanToken', {
+        detail: {
+          event: { category: 'action' },
+          bookHasBrowsed: this.bookHasBrowsed,
+        },
+      })
+    );
   }
 
   /**

package/src/components/dialog-alert.js

@@ -0,0 +1,139 @@
+/* eslint-disable */
+import { LitElement, html, css } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+
+import '@internetarchive/icon-close/icon-close.js';
+import buttonBaseStyle from '../assets/styles/ia-button.js';
+
+export class ShowDialog extends LitElement {
+  static get properties() {
+    return {
+      title: { type: String },
+      body: { type: String },
+      actions: { type: Array },
+      opened: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.title = 'Error';
+    this.body =
+      'Unexpected error: loan does not exist. Please try deleting your archive.org cookie.';
+    this.actions = [];
+    this.opened = false;
+  }
+
+  updated(changed) {
+    if (changed.get('opened') === false) {
+      this.addOverlay();
+    } else {
+      this.removeOverlay();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="${classMap({
+          dialog: true,
+          opened: this.opened,
+          closed: !this.opened,
+        })}"
+      >
+        <div class="dialog-head">
+          ${this.title}
+          <ia-icon-close
+            @click="${() =>
+              this.dispatchEvent(new CustomEvent('dialogAlertClose'))}"
+          ></ia-icon-close>
+        </div>
+        <div class="dialog-body">${this.body}</div>
+        <div class="dialog-foot">${this.renderActionButton}</div>
+      </div>
+    `;
+  }
+
+  /* exceptional case to use dom element */
+  addOverlay() {
+    if (this.opened && !document.getElementById('ui-overlay')) {
+      const overlayElement = document.createElement('div');
+      overlayElement.id = 'ui-overlay';
+      document.getElementsByTagName('body')[0].appendChild(overlayElement);
+    }
+  }
+
+  /* exceptional case to use dom element */
+  removeOverlay() {
+    const overlayElement = document.getElementById('ui-overlay');
+    if (overlayElement) overlayElement.remove();
+  }
+
+  get renderActionButton() {
+    if (!this.actions) return;
+
+    return this.actions.map(
+      action =>
+        html`<a class=${action.className} href=${action.href}>
+          ${action.text}
+        </button>`
+    );
+  }
+
+  static get styles() {
+    const dialogStyle = css`
+      :host {
+        color: #343434;
+        font-size: 1.6rem;
+      }
+      .dialog {
+        position: absolute;
+        background: #fff;
+        border-radius: 1.2rem;
+        z-index: 3000;
+        flex-direction: column;
+        min-width: 300px;
+        max-width: 400px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        border: 2px solid #ccc;
+        border-radius: 12px;
+        box-shadow: 0px 0px 27px 6px rgb(66 66 66 / 80%);
+      }
+      .dialog-head,
+      .dialog-body,
+      .dialog-foot {
+        padding: 1rem;
+        user-select: none;
+        text-align: left;
+      }
+      .dialog-body {
+        border: 1px solid #d8d8d8;
+      }
+      ia-icon-close {
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+        width: 2.5rem;
+        height: 2.5rem;
+        vertical-align: middle;
+        --iconFillColor: #333;
+        cursor: pointer;
+      }
+      .opened {
+        display: flex;
+      }
+      .closed {
+        display: none;
+      }
+      a {
+        text-decoration: none;
+      }
+    `;
+
+    return [buttonBaseStyle, dialogStyle];
+  }
+}
+
+customElements.define('show-dialog', ShowDialog);

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

@@ -18,7 +18,7 @@ export default function ActionsHandlerService(options) {
 
   let baseHost = '';
   if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/1`;
+    baseHost = `/demo/`;
   } else {
     baseHost = `/services/loans/loan`;
   }
@@ -32,8 +32,18 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
+      // test changes, (won't affect you)
       if (baseHost == '/demo/1' || baseHost == '/demo/') {
-        return { error: 'There was an error.' };
+        if (option.action == 'create_token') {
+          return {
+            error: 'loan token not found. please try again later.',
+          };
+        }
+
+        return {
+          error:
+            'This book is not available to borrow at this time. Please try again later.',
+        };
       }
 
       // The response is a Response instance.
@@ -42,7 +52,6 @@ export default function ActionsHandlerService(options) {
     })
     .then(data => {
       // `data` is the parsed version of the JSON returned from the above endpoint.
-      console.log(data.error);
       if (!data.error) {
         option?.success(data);
       } else {

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

@@ -15,6 +15,8 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = identifier;
     this.ajaxTimeout = 6000;
+    this.loanTokenPollingDelay = 20000; // 20000 ms = 20 sec
+    this.loanTokenInterval = null;
     this.bindEvents();
   }
 
@@ -84,29 +86,43 @@ export default class ActionsHandler extends LitElement {
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
+
+    this.addEventListener('fetchLoanToken', ({ detail }) => {
+      const bookHasBrowsed = detail?.bookHasBrowsed;
+
+      // fetch loan token and set an interval
+      if (bookHasBrowsed) {
+        console.log('token poll started...');
+
+        this.loanTokenInterval = setInterval(() => {
+          this.handleLoanTokenPoller();
+        }, this.loanTokenPollingDelay);
+      } else {
+        // if book is not browsed, just clear token polling interval
+        clearInterval(this.loanTokenInterval);
+      }
+    });
   }
 
   handleBrowseIt() {
     const context = 'browse_book';
-    this.toggleLoader(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
       identifier: this.identifier,
       success: () => {
-        // this.handleReadItNow();
+        this.handleReadItNow();
       },
       error: data => {
-        console.log(data);
-        alert(data.error);
-        this.toggleLoader(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleReturnIt() {
     const context = 'return_loan';
-    this.toggleLoader(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -116,16 +132,14 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
       error: data => {
-        console.log(data);
-        alert(data.error);
-        this.toggleLoader(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleBorrowIt() {
     const context = 'borrow_book';
-    this.toggleLoader(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -134,16 +148,14 @@ export default class ActionsHandler extends LitElement {
         this.handleReadItNow();
       },
       error: data => {
-        console.log(data);
-        alert(data.error);
-        this.toggleLoader(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleReserveIt() {
     const context = 'join_waitlist';
-    this.toggleLoader(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -152,16 +164,14 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        console.log(data);
-        alert(data.error);
-        this.toggleLoader(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleRemoveFromWaitingList() {
     const context = 'leave_waitlist';
-    this.toggleLoader(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -170,13 +180,36 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        console.log(data);
-        alert(data.error);
-        this.toggleLoader(context);
+        this.ActionError(context, data);
       },
     });
   }
 
+  handleLoanTokenPoller() {
+    const context = 'create_token';
+    this.ActionError(context);
+
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action: context,
+      loader: false,
+      success: () => {
+        this.handleReadItNow();
+      },
+      error: data => {
+        this.ActionError(context, data);
+      },
+    });
+  }
+
+  ActionError(context, data = {}) {
+    this.dispatchEvent(
+      new CustomEvent('lendingActionError', {
+        detail: { context, data },
+      })
+    );
+  }
+
   handleLoginOk() {
     /* eslint class-methods-use-this: "off" */
     const target = `/account/login?referer=${encodeURIComponent(
@@ -188,9 +221,6 @@ 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);
@@ -226,12 +256,4 @@ 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

@@ -7,6 +7,7 @@ import './components/collapsible-action-group.js';
 import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
+import './components/dialog-alert.js';
 
 import GetLendingActions from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
@@ -23,6 +24,8 @@ export default class IABookActions extends LitElement {
       barType: { type: String },
       sharedObserver: { attribute: false },
       disable: { type: Boolean },
+      dialogVisible: { type: Boolean },
+      bookHasBrowsed: { type: Boolean },
     };
   }
 
@@ -41,7 +44,9 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
-    this.disable = false;
+    this.disableActionGroup = false;
+    this.dialogVisible = false;
+    this.bookHasBrowsed = false;
   }
 
   disconnectedCallback() {
@@ -141,10 +146,12 @@ export default class IABookActions extends LitElement {
       return action != null;
     });
 
-    if (
+    this.bookHasBrowsed =
       this.lendingStatus.user_has_browsed &&
-      !this.lendingStatus.browseHasExpired
-    ) {
+      !this.lendingStatus.browsingExpired;
+    if (this.bookHasBrowsed) {
+      // start timer for 1-hour borrowed book.
+      // when 1 hour is completed, we shows browse-again button
       this.startBrowseTimer();
     }
   }
@@ -154,9 +161,21 @@ export default class IABookActions extends LitElement {
       <section class="lending-wrapper">
         ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
       </section>
+
+      <show-dialog
+        .title=${this.dialogTitle}
+        .body=${this.dialogBody}
+        .actions=${this.dialogActions}
+        ?opened="${this.dialogVisible}"
+        @dialogAlertClose="${() => this.closeDialogAlert()}"
+      ></show-dialog>
     `;
   }
 
+  closeDialogAlert() {
+    this.dialogVisible = false;
+  }
+
   get bookTitleBar() {
     return html`<book-title-bar
       .identifier=${this.identifier}
@@ -174,24 +193,61 @@ export default class IABookActions extends LitElement {
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
         .hasAdminAccess=${this.hasAdminAccess}
-        .disabled=${this.disable}
-        @toggle-loader=${this.toggleLoader}
+        .disabled=${this.disableActionGroup}
+        .bookHasBrowsed=${this.bookHasBrowsed}
+        @lendingActionError=${this.handleLendingActionError}
       >
       </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 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 };
+  handleLendingActionError(e) {
+    // toggle activity loader
+    this.disableActionGroup = !this.disableActionGroup;
+
+    const context = e?.detail?.context;
+    const errorMsg = e?.detail?.data?.error;
+
+    // early exist if you don't have errorMsg
+    if (!errorMsg) return;
+
+    this.initializeDialogAlert(context, errorMsg);
+
+    // 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') {
+        currStatus = {
+          ...this.lendingStatus,
+          available_to_browse: false,
+        };
+      } else if (context === 'borrow_book') {
+        currStatus = {
+          ...this.lendingStatus,
+          available_to_borrow: false,
+        };
+      }
       this.lendingStatus = currStatus;
     }
+  }
 
-    this.disable = !this.disable;
+  /* set props value to show dialog alert */
+  initializeDialogAlert(context, errorMsg) {
+    this.dialogVisible = true;
+    this.dialogTitle = 'Sorry!';
+    this.dialogBody = errorMsg;
+    this.dialogActions = [];
+
+    if (context === 'create_token') {
+      this.dialogActions = [
+        {
+          className: 'ia-button primary',
+          text: 'Back to Item Details',
+          href: `/details/${this.lendingStatus.bookUrl}`,
+        },
+      ];
+    }
   }
 
   get iconClass() {

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

@@ -106,6 +106,65 @@ 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: {
+          context: 'browse_book',
+          data: { error: 'not available to borrow' },
+        },
+      });
+    });
+    el.dispatchEvent(errorEvent);
+    await el.updateComplete;
+
+    console.log(el.lendingStatus);
+    // 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: {
+          context: '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({