@internetarchive/ia-book-actions 0.0.6-5 → 0.0.6-8-01

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>
 
@@ -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-5",
+  "version": "0.0.6-8-01",
   "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,26 @@ export class CollapsibleActionGroup extends ActionsHandler {
         this.resetActions();
       }
     }
+
+    // this is execute on demo page only
+    if (
+      changed.has('bookHasBrowsed') &&
+      window.location.pathname === '/demo/'
+    ) {
+      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,144 @@
+/* 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 },
+      allowClose: { 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;
+    this.allowClose = 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} ${this.closeButton}</div>
+        <div class="dialog-body">${this.body}</div>
+        <div class="dialog-foot">${this.renderActionButton}</div>
+      </div>
+    `;
+  }
+
+  get closeButton() {
+    return this.allowClose
+      ? html`<ia-icon-close
+          @click="${() =>
+            this.dispatchEvent(new CustomEvent('dialogAlertClose'))}"
+        ></ia-icon-close>`
+      : html``;
+  }
+
+  /* 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

@@ -8,17 +8,14 @@ export default function ActionsHandlerService(options) {
   const option = {
     action: null,
     identifier: '',
-    data: {},
     success() {},
     error() {},
-    loader: true,
-    type: 'POST',
     ...options,
   };
 
   let baseHost = '';
   if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/1`;
+    baseHost = `/demo/`;
   } else {
     baseHost = `/services/loans/loan`;
   }
@@ -34,9 +31,20 @@ export default function ActionsHandlerService(options) {
     .then(response => {
       // test changes, (won't affect you)
       if (baseHost == '/demo/1' || baseHost == '/demo/') {
+        if (option.action == 'create_token') {
+          return {
+            success: false,
+            error: 'loan token not found. please try again later.',
+          };
+          return {
+            success: true,
+            token: '1640945898-f77a0cb615190798f1faf2dafe277b2e',
+          };
+        }
+
         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.',
+          error:
+            'This book is not available to borrow at this time. Please try again later.',
         };
       }
 
@@ -46,7 +54,6 @@ export default function ActionsHandlerService(options) {
     })
     .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 {

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

@@ -15,6 +15,9 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = identifier;
     this.ajaxTimeout = 6000;
+    this.loanTokenPollingDelay =
+      window.location.pathname === '/demo/' ? 2000 : 20000; // 20000 ms = 20 sec
+    this.loanTokenInterval = null;
     this.bindEvents();
   }
 
@@ -84,11 +87,27 @@ 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.toggleActionBarState(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -97,15 +116,14 @@ export default class ActionsHandler extends LitElement {
         this.handleReadItNow();
       },
       error: data => {
-        alert(data.error);
-        this.toggleActionBarState(context, data);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleReturnIt() {
     const context = 'return_loan';
-    this.toggleActionBarState(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -115,15 +133,14 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
       error: data => {
-        alert(data.error);
-        this.toggleActionBarState(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleBorrowIt() {
     const context = 'borrow_book';
-    this.toggleActionBarState(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -132,15 +149,14 @@ export default class ActionsHandler extends LitElement {
         this.handleReadItNow();
       },
       error: data => {
-        alert(data.error);
-        this.toggleActionBarState(context, data);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleReserveIt() {
     const context = 'join_waitlist';
-    this.toggleActionBarState(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -149,15 +165,14 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        alert(data.error);
-        this.toggleActionBarState(context);
+        this.ActionError(context, data);
       },
     });
   }
 
   handleRemoveFromWaitingList() {
     const context = 'leave_waitlist';
-    this.toggleActionBarState(context);
+    this.ActionError(context);
 
     ActionsHandlerService({
       action: context,
@@ -166,12 +181,31 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        alert(data.error);
-        this.toggleActionBarState(context);
+        this.ActionError(context, data);
+      },
+    });
+  }
+
+  handleLoanTokenPoller() {
+    const context = 'create_token';
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action: context,
+      error: data => {
+        this.ActionError(context, data);
+        clearInterval(this.loanTokenInterval); // stop token fetch api
       },
     });
   }
 
+  ActionError(context, data = {}) {
+    this.dispatchEvent(
+      new CustomEvent('lendingActionError', {
+        detail: { context, data },
+      })
+    );
+  }
+
   handleLoginOk() {
     /* eslint class-methods-use-this: "off" */
     const target = `/account/login?referer=${encodeURIComponent(
@@ -183,9 +217,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);
@@ -221,12 +252,4 @@ 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

@@ -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';
@@ -22,7 +23,9 @@ export default class IABookActions extends LitElement {
       bwbPurchaseUrl: { type: String },
       barType: { type: String },
       sharedObserver: { attribute: false },
-      disable: { type: Boolean },
+      disableActionGroup: { 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,22 @@ 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}
+        ?allowClose=${this.allowClose}
+        @dialogAlertClose="${() => this.closeDialogAlert()}"
+      ></show-dialog>
     `;
   }
 
+  closeDialogAlert() {
+    this.dialogVisible = false;
+  }
+
   get bookTitleBar() {
     return html`<book-title-bar
       .identifier=${this.identifier}
@@ -173,29 +193,60 @@ export default class IABookActions extends LitElement {
         .primaryActions=${this.primaryActions}
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
-        .hasAdminAccess=${this.hasAdminAccess}
-        .disabled=${this.disable}
-        @toggle-action-bar-state=${this.toggleActionBarState}
+        ?hasAdminAccess=${this.hasAdminAccess}
+        ?disabled=${this.disableActionGroup}
+        ?bookHasBrowsed=${this.bookHasBrowsed}
+        @lendingActionError=${this.handleLendingActionError}
       >
       </collapsible-action-group>
       ${this.textGroupTemplate} ${this.infoIconTemplate}
     `;
   }
 
-  toggleActionBarState(e) {
+  handleLendingActionError(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;
+    this.disableActionGroup = !this.disableActionGroup;
+
+    const context = e?.detail?.context;
+    const errorMsg = e?.detail?.data?.error;
+
+    // initiate dialog-alert if error occured
+    if (errorMsg) 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;
+    }
+  }
+
+  /* set props value to show dialog alert */
+  initializeDialogAlert(context, errorMsg) {
+    this.dialogVisible = true;
+    this.dialogTitle = 'Sorry!';
+    this.dialogBody = errorMsg;
+    this.allowClose = true;
+
+    if (context === 'create_token') {
+      this.allowClose = false;
+      this.dialogActions = [
+        {
+          className: 'ia-button primary',
+          text: 'Back to Item Details',
+          href: this.lendingStatus.bookUrl,
+        },
+      ];
     }
   }
 

package/test/components/dialog-alert.test.js

@@ -0,0 +1,62 @@
+/* eslint-disable */
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../src/components/dialog-alert.js';
+
+const container = ({
+  title = '',
+  body = '',
+  allowClose = false,
+  opened = false,
+} = {}) =>
+  html`<show-dialog
+    .title=${title}
+    .body=${body}
+    ?allowClose=${allowClose}
+    ?opened=${opened}
+  ></show-dialog>`;
+
+describe('<show-dialog>', () => {
+  it('assign values and initiate dialog-alert', async () => {
+    const el = await fixture(
+      container({
+        title: 'internal error!',
+        body: 'there was an internal error',
+        opened: true,
+      })
+    );
+    expect(el.title).to.be.equal('internal error!');
+    expect(el.body).to.be.equal('there was an internal error');
+  });
+
+  it('close button should not render', async () => {
+    const el = await fixture(
+      container({
+        title: 'internal error!',
+        body: 'there was an internal error',
+      })
+    );
+    expect(el.title).to.be.equal('internal error!');
+    expect(el.body).to.be.equal('there was an internal error');
+
+    // close icon is not exist
+    const closeButton = el.shadowRoot.querySelector('ia-icon-close');
+    expect(closeButton).to.be.null;
+  });
+
+  it('close dialog-alert on X icon click', async () => {
+    const el = await fixture(
+      container({
+        title: 'internal error!',
+        body: 'there was an internal error',
+        allowClose: true,
+        opened: true,
+      })
+    );
+
+    const closeButton = el.shadowRoot.querySelector('ia-icon-close');
+    const errorEvent = new CustomEvent('dialogAlertClose');
+    closeButton.dispatchEvent(errorEvent);
+    await el.updateComplete;
+    expect(el.opened).to.be.true;
+  });
+});

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: {
+          context: '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: {
+          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({