@internetarchive/ia-book-actions 0.0.6-7 → 0.0.6-8-04

package/demo/index.html

@@ -72,14 +72,16 @@
       margin: 2px;
     }
 
-    #ui-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: black;
-      opacity: 0.3;
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+  
+    modal-manager {
+      display: none;
+    }
+  
+    modal-manager[mode='open'] {
+      display: block;
     }
   </style>
 </head>
@@ -95,6 +97,7 @@
       defaultLendingStatus,
       canBrowseAndBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
 
     const userid = '@neeraj-archive';
     const identifier = 'naturalhistoryof00unse_4111';
@@ -102,13 +105,20 @@
 
     let iaBookActions = document.querySelector('ia-book-actions');
 
+    // render modal-manager
+    const modal = document.createElement('modal-manager');
+    const modalConfig = new ModalConfig();
+    modalConfig.headerColor = '#d9534f';
+    document.body.appendChild(modal);
+
     // set defaultLendingStatus for unavailable (without borrowables) book
-    iaBookActions.userid = '';
+    iaBookActions.userid = userid;
     iaBookActions.identifier = identifier;
     iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
     iaBookActions.lendingStatus = canBrowseAndBorrow;
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.barType = '';
+    iaBookActions.modalConfig = modalConfig;
 
     let lendingStatus1 = iaBookActions.lendingStatus;
 
@@ -122,6 +132,29 @@
       });
     });
 
+    document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
+      if (window.location.href.indexOf('?error=true') !== -1) {
+        item.checked = true;
+      }
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('error', true);
+        } else {
+          separate = '';
+          searchParams.delete('error');
+        }
+
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
+    
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.checked) {
@@ -156,7 +189,7 @@
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
-          lendingStatus1.secondsLeftOnLoan = 30;
+          lendingStatus1.secondsLeftOnLoan = 10;
           lendingStatus1.browsingExpired = false;
         } else if(e.target.value === 'browsingExpired') {
           lendingStatus1.user_has_browsed = true;
@@ -229,6 +262,9 @@
     <fieldset>
       <legend>Dev testing for book action bar</legend>
         <table class="initial">
+          <tr colspan='5'>
+            <td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
+          </tr>
           <tr>
             <td class="userState">
               <label><input type="checkbox" name="user" value="isAdmin" />isAdmin</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.6-7",
+  "version": "0.0.6-8-04",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -20,8 +20,9 @@
   "dependencies": {
     "@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/icon-info": "^1.2.6",
+    "@internetarchive/modal-manager": "^0.2.1",
     "@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,7 +27,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       hasAdminAccess: { type: Boolean },
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
-      bookHasBrowsed: { type: Boolean },
+      borrowType: { type: String },
     };
   }
 
@@ -46,13 +46,8 @@ 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();
-    }
+    this.borrowType = ''; // (browsed|borrowed)
+    this.consecutiveLoanCounts = 1; // consecutive loan count
   }
 
   updated(changed) {
@@ -62,19 +57,31 @@ export class CollapsibleActionGroup extends ActionsHandler {
       }
     }
 
-    // this is execute on demo page only
-    if (changed.has('bookHasBrowsed')) {
-      this.emitFetchLoanToken();
+    // this is execute to fetch loan token
+    if (changed.has('borrowType')) {
+      this.emitEnableBookAccess();
     }
   }
 
   /* emit custom event to fetch loan token */
-  emitFetchLoanToken() {
+  emitEnableBookAccess() {
+    // send consecutiveLoanCounts for browsed books only.
+    // for borrowed books, we just send [Counts-1]
+    if (this.borrowType === 'browsed') {
+      this.consecutiveLoanCounts =
+        localStorage.getItem('consecutive-loan-count') ?? 1;
+    }
+
     this.dispatchEvent(
-      new CustomEvent('fetchLoanToken', {
+      new CustomEvent('enableBookAccess', {
         detail: {
-          event: { category: 'action' },
-          bookHasBrowsed: this.bookHasBrowsed,
+          event: {
+            category: `${this.borrowType}BookAccess`, // browsedBookAccess | borrowedBookAccess
+            action: `${
+              this.borrowType === 'browsed' ? 'BrowseCounts-' : 'Counts-'
+            }${this.consecutiveLoanCounts}`, // (BrowseCounts-1|Counts-X)
+          },
+          borrowType: this.borrowType,
         },
       })
     );

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

@@ -8,11 +8,8 @@ export default function ActionsHandlerService(options) {
   const option = {
     action: null,
     identifier: '',
-    data: {},
     success() {},
     error() {},
-    loader: true,
-    type: 'POST',
     ...options,
   };
 
@@ -32,17 +29,32 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .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.',
-          };
-        }
+      let shouldReturnError =
+        window.location.href.indexOf('?error=true') !== -1;
+      const tokenError = 'loan token not found. please try again later.';
+      const borrowError =
+        'This book is not available to borrow at this time. Please try again later.';
+
+      // return error reponse if query param has ?error=true param...
+      if (option.action == 'create_token' && shouldReturnError) {
+        return {
+          success: false,
+          error: tokenError,
+        };
+      }
 
+      if (shouldReturnError) {
+        return {
+          status: true,
+          error: borrowError,
+        };
+      }
+
+      // return success response for /demo/ server...
+      if (baseHost == '/demo/1' || baseHost == '/demo/') {
         return {
-          error:
-            'This book is not available to borrow at this time. Please try again later.',
+          success: true,
+          message: 'operation executed successfully!',
         };
       }
 

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

@@ -15,24 +15,37 @@ export default class ActionsHandler extends LitElement {
     super();
     this.identifier = identifier;
     this.ajaxTimeout = 6000;
-    this.loanTokenPollingDelay = 20000; // 20000 ms = 20 sec
+    this.loanTokenPollingDelay =
+      window.location.pathname === '/demo/' ? 2000 : 120000; // 120000 ms = 2 min
     this.loanTokenInterval = null;
     this.bindEvents();
   }
 
+  disconnectedCallback() {
+    this.loanTokenInterval = undefined;
+  }
+
   sendEvent(eventCategory, eventAction) {
     // eslint-disable-next-line no-console
     console?.log('Book action: ', { eventCategory, eventAction });
-    window?.archive_analytics?.send_event(
+    window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,
-      window.location.pathname
+      `identifier=${this.identifier}`
     );
   }
 
   bindEvents() {
     this.addEventListener('browseBook', ({ detail }) => {
       this.handleBrowseIt();
+      this.setConsecutiveLoanCounts();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
+    this.addEventListener('browseBookAgain', ({ detail }) => {
+      this.handleBrowseIt();
+      this.setConsecutiveLoanCounts('browseAgain');
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
@@ -87,16 +100,19 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
-    this.addEventListener('fetchLoanToken', ({ detail }) => {
-      const bookHasBrowsed = detail?.bookHasBrowsed;
+    this.addEventListener('enableBookAccess', ({ detail }) => {
+      const borrowType = detail?.borrowType;
 
-      // fetch loan token and set an interval
-      if (bookHasBrowsed) {
+      // fetch loan token for browsed/borrowed book and set an interval
+      if (borrowType) {
         console.log('token poll started...');
 
         this.loanTokenInterval = setInterval(() => {
           this.handleLoanTokenPoller();
         }, this.loanTokenPollingDelay);
+
+        const { category, action } = detail?.event;
+        this.sendEvent(category, action);
       } else {
         // if book is not browsed, just clear token polling interval
         clearInterval(this.loanTokenInterval);
@@ -187,22 +203,18 @@ export default class ActionsHandler extends LitElement {
 
   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);
+        clearInterval(this.loanTokenInterval); // stop token fetch api
       },
     });
   }
 
   ActionError(context, data = {}) {
+    console.log(context, data);
     this.dispatchEvent(
       new CustomEvent('lendingActionError', {
         detail: { context, data },
@@ -242,6 +254,23 @@ export default class ActionsHandler extends LitElement {
     }, this.ajaxTimeout);
   }
 
+  // save consecutive loan count for borrow
+  setConsecutiveLoanCounts(action = '') {
+    const { localStorage } = window;
+    if (localStorage) {
+      let newCount = 1;
+      const storageKey = `consecutive-loan-count`;
+      const existingCount = Number(localStorage.getItem(storageKey));
+
+      // want to increase browse-count by 1 if,
+      // you consecutive reading a book.
+      if (action === 'browseAgain') {
+        newCount = existingCount ? existingCount + 1 : 1;
+      }
+      localStorage.setItem(storageKey, newCount);
+    }
+  }
+
   deleteLoanCookies() {
     const date = new Date();
     date.setTime(date.getTime() - 24 * 60 * 60 * 1000); // one day ago

package/src/core/services/get-lending-actions.js

@@ -75,7 +75,9 @@ export default class GetLendingActions {
     const disableBorrow = lendingStatus.loanCount >= lendingStatus.maxLoans;
 
     let primaryTitleText = '';
-    if (lendingStatus.user_has_browsed) {
+    let isBrowsed =
+      lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
+    if (isBrowsed) {
       primaryTitleText = this.getBrowseCountdownTitle();
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
@@ -94,6 +96,7 @@ export default class GetLendingActions {
         this.actionsConfig.adminAccessConfig(),
         this.actionsConfig.purchaseConfig(),
       ],
+      borrowType: isBrowsed ? 'browsed' : 'borrowed',
     };
   }
 

package/src/ia-book-actions.js

@@ -2,12 +2,12 @@
 import { html, css, LitElement } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { ModalConfig } from '@internetarchive/modal-manager';
 
 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,9 +23,8 @@ export default class IABookActions extends LitElement {
       bwbPurchaseUrl: { type: String },
       barType: { type: String },
       sharedObserver: { attribute: false },
-      disable: { type: Boolean },
-      dialogVisible: { type: Boolean },
-      bookHasBrowsed: { type: Boolean },
+      disableActionGroup: { type: Boolean },
+      modalConfig: { type: Object },
     };
   }
 
@@ -45,8 +44,7 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = [];
     this.lendingOptions = {};
     this.disableActionGroup = false;
-    this.dialogVisible = false;
-    this.bookHasBrowsed = false;
+    this.modalConfig = {};
   }
 
   disconnectedCallback() {
@@ -58,6 +56,11 @@ export default class IABookActions extends LitElement {
       this.sharedObserver = new SharedResizeObserver();
       this.setupResizeObserver();
     }
+
+    if (!this.modalConfig) {
+      this.modalConfig = new ModalConfig();
+      this.modalConfig.headerColor = '#d9534f';
+    }
     this.setupLendingToolbarActions();
   }
 
@@ -146,12 +149,10 @@ export default class IABookActions extends LitElement {
       return action != null;
     });
 
-    this.bookHasBrowsed =
-      this.lendingStatus.user_has_browsed &&
-      !this.lendingStatus.browsingExpired;
-    if (this.bookHasBrowsed) {
-      // start timer for 1-hour borrowed book.
-      // when 1 hour is completed, we shows browse-again button
+    this.borrowType = actions.borrowType;
+    if (this.borrowType === 'browsed') {
+      // start timer for browsed.
+      // when browse is completed, we shows browse-again button
       this.startBrowseTimer();
     }
   }
@@ -161,21 +162,9 @@ 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}
@@ -192,9 +181,9 @@ export default class IABookActions extends LitElement {
         .primaryActions=${this.primaryActions}
         .secondaryActions=${this.secondaryActions}
         .width=${this.width}
-        .hasAdminAccess=${this.hasAdminAccess}
-        .disabled=${this.disableActionGroup}
-        .bookHasBrowsed=${this.bookHasBrowsed}
+        .borrowType=${this.borrowType}
+        ?hasAdminAccess=${this.hasAdminAccess}
+        ?disabled=${this.disableActionGroup}
         @lendingActionError=${this.handleLendingActionError}
       >
       </collapsible-action-group>
@@ -209,10 +198,7 @@ export default class IABookActions extends LitElement {
     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);
+    if (errorMsg) this.showErrorModal(context, errorMsg);
 
     // update action bar state if book is not available to browse or borrow.
     if (errorMsg && errorMsg.match(/not available to borrow/gm)) {
@@ -232,22 +218,35 @@ 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 = [];
+  /* show error message if something went wrong */
+  showErrorModal(context, errorMsg) {
+    this.modal = document.querySelector('modal-manager');
+
+    // fallback if <modal-manager> is not found!
+    if (!this.modal) {
+      alert(errorMsg);
+      return;
+    }
+
+    this.disableActionGroup = false;
+    this.modalConfig.title = 'Sorry!';
+    this.modalConfig.message = errorMsg;
 
     if (context === 'create_token') {
-      this.dialogActions = [
-        {
-          className: 'ia-button primary',
-          text: 'Back to Item Details',
-          href: `/details/${this.lendingStatus.bookUrl}`,
-        },
-      ];
+      this.modalConfig.message = html`<p class="headline">
+        Uh oh, something went wrong trying to access this book. Please
+        <a href="#">refresh</a> to try again or send us an email to
+        <a
+          href="mailto:info@archive.org?subject=Help: cannot access my borrowed book: ${this
+            .identifier}"
+          >info@archive.org</a
+        >
+      </p>`;
     }
+
+    this.modal.showModal({
+      config: this.modalConfig,
+    });
   }
 
   get iconClass() {

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

@@ -130,7 +130,6 @@ describe('Borrow status actions', () => {
     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');

package/src/components/dialog-alert.js

@@ -1,139 +0,0 @@
-/* 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);