@internetarchive/ia-book-actions 0.0.6-6 → 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>
 
@@ -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-6",
+  "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/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

@@ -34,6 +34,12 @@ 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 {
+            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.',
@@ -46,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('actual reponse for endpoint', data);
       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,6 +86,22 @@ 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() {
@@ -97,7 +115,6 @@ export default class ActionsHandler extends LitElement {
         this.handleReadItNow();
       },
       error: data => {
-        alert(data.error);
         this.ActionError(context, data);
       },
     });
@@ -115,8 +132,7 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(`/details/${this.identifier}`, true);
       },
       error: data => {
-        alert(data.error);
-        this.ActionError(context);
+        this.ActionError(context, data);
       },
     });
   }
@@ -132,7 +148,6 @@ export default class ActionsHandler extends LitElement {
         this.handleReadItNow();
       },
       error: data => {
-        alert(data.error);
         this.ActionError(context, data);
       },
     });
@@ -149,8 +164,7 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        alert(data.error);
-        this.ActionError(context);
+        this.ActionError(context, data);
       },
     });
   }
@@ -166,12 +180,36 @@ export default class ActionsHandler extends LitElement {
         URLHelper.goToUrl(URLHelper.getRedirectUrl(), true);
       },
       error: data => {
-        alert(data.error);
-        this.ActionError(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(
@@ -218,12 +256,4 @@ export default class ActionsHandler extends LitElement {
     cookie += '; path=/; domain=.archive.org;';
     document.cookie = cookie;
   }
-
-  ActionError(context, data = {}) {
-    this.dispatchEvent(
-      new CustomEvent('lendingActionError', {
-        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';
@@ -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,7 +193,8 @@ export default class IABookActions extends LitElement {
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
         .hasAdminAccess=${this.hasAdminAccess}
-        .disabled=${this.disable}
+        .disabled=${this.disableActionGroup}
+        .bookHasBrowsed=${this.bookHasBrowsed}
         @lendingActionError=${this.handleLendingActionError}
       >
       </collapsible-action-group>
@@ -184,11 +204,16 @@ export default class IABookActions extends LitElement {
 
   handleLendingActionError(e) {
     // toggle activity loader
-    this.disable = !this.disable;
+    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;
@@ -207,6 +232,24 @@ export default class IABookActions extends LitElement {
     }
   }
 
+  /* 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() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }