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

package/demo/error.html

@@ -0,0 +1,4 @@
+<script>
+return { error: 'ss' }
+
+</script>

package/demo/index.html

@@ -12,7 +12,7 @@
     body {
       margin: 0;
       text-align: center;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
     }
     #demo {
       height: 50px;
@@ -71,10 +71,21 @@
       float: left;
       margin: 2px;
     }
+
+    .ui-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+      opacity: 0.3;
+    }
   </style>
 </head>
 
 <body>
+
   <ia-book-actions></ia-book-actions>
 
   <script type="module">
@@ -95,11 +106,23 @@
     // set defaultLendingStatus for unavailable (without borrowables) book
     iaBookActions.userid = '';
     iaBookActions.identifier = identifier;
-    iaBookActions.lendingStatus = defaultLendingStatus;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
+    iaBookActions.lendingStatus = canBrowseAndBorrow;
     iaBookActions.bwbPurchaseUrl = '';
+    iaBookActions.barType = '';
 
     let lendingStatus1 = iaBookActions.lendingStatus;
 
+    document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.barType = 'title';
+        } else {
+          iaBookActions.barType = 'action';
+        }
+      });
+    });
+
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.checked) {
@@ -191,10 +214,20 @@
       })
     });
 </script>
-
   <div>
     <fieldset>
-      <legend>Dev try for lending banner</legend>
+      <legend>Dev testing for book title bar</legend>
+        <table class="initial">
+          <tr>
+            <td class="titleBar">
+              <label><input type="checkbox" name="title" value="title" />Title Bar</label>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+
+    <fieldset>
+      <legend>Dev testing for book action bar</legend>
         <table class="initial">
           <tr>
             <td class="userState">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.5-4",
+  "version": "0.0.5-5",
   "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/data/archive-logo.js

@@ -0,0 +1,32 @@
+import { html } from 'lit-element';
+
+export const archiveLogo = html`
+  <svg
+    class="ia-logo"
+    width="26"
+    height="26"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/assets/styles/collapsible-action-group.js

@@ -3,6 +3,8 @@ import { css } from 'lit-element';
 export default css`
   :host {
     display: inline-flex;
+    height: 3.5rem;
+    padding: 1rem 0;
   }
   .action-buttons {
     display: inline-flex;

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/show-dialog.js

@@ -0,0 +1,115 @@
+/* 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 {
+      opened: { type: Boolean },
+      title: { type: Boolean },
+      body: { type: Boolean },
+      actions: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+    this.title = 'Error';
+    this.body =
+      'Unexpected error: loan does not exist. Please try deleting your archive.org cookie.';
+    this.actions = [];
+  }
+
+  render() {
+    return html`
+      <div
+        class="${classMap({
+          dialog: true,
+          opened: this.opened,
+          closed: !this.opened,
+        })}"
+      >
+        <div class="dialog-head">
+          ${this.title}
+          <span
+            @click="${() =>
+              this.dispatchEvent(new CustomEvent('dialog.close'))}"
+          >
+            <ia-icon-close fill-color="blue"></ia-icon-close
+          ></span>
+        </div>
+        <div class="dialog-body">${this.body}</div>
+        <div class="dialog-foot">${this.renderActionButton()}</div>
+      </div>
+    `;
+  }
+
+  renderActionButton() {
+    return this.actions.map(
+      action =>
+        html`<button class=${action.className} @click=${action.callback}>
+          ${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;
+        width: 400px;
+        max-width: 500px;
+        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 {
+        float: right;
+        display: inline-block;
+        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/config/analytics-event-and-category.js

@@ -21,4 +21,5 @@ export const analyticsActions = {
   purchase: 'BWBPurchase',
   unavailable: 'Book-Unavailable',
   printDisability: 'Print-Disability',
+  titleBar: 'Book-Title-Bar',
 };

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

@@ -11,6 +11,7 @@ export default function ActionsHandlerService(options) {
     data: {},
     success() {},
     error: null,
+    callback() {},
     loader: true,
     type: 'POST',
     ...options,
@@ -22,7 +23,7 @@ export default function ActionsHandlerService(options) {
 
   let baseHost = '';
   if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/`;
+    baseHost = `/demo/`; // http://localhost:8000/demo/error.html
   } else {
     baseHost = `/services/loans/loan`;
   }
@@ -36,15 +37,90 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
+      console.log('response', response);
+
+      if (baseHost == '/demo/') {
+        // option.callback('{"result": true, "token": "token-response"}');
+        // option.callback('{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}');
+
+        showDialog(
+          option.action,
+          '{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}'
+        );
+        // showDialog('{"result": true, "token": "token-response"}');
+      }
+      // showDialog(option.action, response);
+      // option.callback(response);
+
       if (response.status === 200) {
         option.success.call();
       }
     })
     .catch(error => {
-      console.log(error);
+      console.log('error', error);
+      // option.callback(error);
+
+      if (baseHost == '/demo/') {
+        showDialog(
+          option.action,
+          '{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}'
+        );
+        // showDialog('{"result": true, "token": "token-response"}');
+      } else {
+        showDialog(option.action, error);
+      }
     });
 }
 
+function showDialog(action, xhrResponse) {
+  const showDialog = document
+    .querySelector('ia-book-actions')
+    .shadowRoot.querySelector('show-dialog');
+
+  let title = 'Connection error';
+  let body = 'Please check internet connection.';
+  let actions = [
+    {
+      text: 'Okay',
+      callback: () => {
+        weAreBack();
+        this.updateToken();
+      },
+      className: 'ia-button primary',
+    },
+  ];
+
+  // Specific error
+  const data = JSON.parse(xhrResponse);
+  console.log('data', data);
+  if (data.error) {
+    title = 'Sorry!';
+    body = data.error;
+    // Only go back to item button on error
+    actions = [
+      {
+        text: 'Back to item details',
+        callback: () => {
+          URLHelper.goToUrl(this.lendingStatus.bookUrl);
+        },
+        className: 'ia-button primary',
+      },
+    ];
+  }
+
+  showDialog.opened = true;
+  showDialog.title = title;
+  showDialog.body = body;
+  if (action === 'create_token') {
+    showDialog.actions = actions;
+  }
+
+  const overlayElement = document.createElement('div');
+  overlayElement.className = 'ui-overlay';
+  console.log(overlayElement);
+  document.getElementsByTagName('body')[0].appendChild(overlayElement);
+}
+
 function showActionButtonLoader() {
   const collapsibleElement = document
     .querySelector('ia-book-actions')

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

@@ -82,6 +82,11 @@ 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() {

package/src/core/services/archive-token-poller.js

@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+import { URLHelper } from '../config/url-helper.js';
+
+import '../../components/show-dialog.js';
+
+export default class ArchiveOrgTokenPoller {
+  constructor(identifier, lendingStatus) {
+    this.identifier = identifier;
+    this.lendingStatus = lendingStatus;
+    this.pollingDelay = 6000; // 60000 ms = 1 min
+    this.tokenInterval = null;
+    this.showDialog = document
+      .querySelector('ia-book-actions')
+      .shadowRoot.querySelector('show-dialog');
+  }
+
+  init() {
+    console.log('ArchiveOrgTokenPoller started...');
+    // Do an initial token, then set an interval
+    this.tokenInterval = setInterval(() => {
+      this.updateToken();
+    }, this.pollingDelay);
+  }
+
+  updateToken() {
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action: 'create_token',
+      // callback: (xhrResponse) => {
+      //   console.log('xhrResponse', xhrResponse);
+      //   if (xhrResponse.status === true) {
+      //     this.hideErrorDialog(); // remove overlay and message box...
+      //     // this.showErrorDialog(xhrResponse);
+      //   } else {
+      //     this.showErrorDialog(xhrResponse);
+      //   }
+      // },
+      loader: false,
+    });
+  }
+
+  hideErrorDialog() {
+    this.showDialog.dialogVisible = false;
+  }
+
+  showErrorDialog(xhrResponse) {
+    let title = 'Connection error';
+    let body = 'Please check internet connection.';
+    let actions = [
+      {
+        text: 'Okay',
+        callback: () => {
+          weAreBack();
+          this.updateToken();
+        },
+        className: 'ia-button primary',
+      },
+    ];
+
+    // Specific error
+    const data = JSON.parse(xhrResponse);
+    if (data.error) {
+      title = 'Sorry!';
+      body = data.error;
+      // Only go back to item button on error
+      actions = [
+        {
+          text: 'Back to item details',
+          callback: () => {
+            URLHelper.goToUrl(this.lendingStatus.bookUrl);
+          },
+          className: 'ia-button primary',
+        },
+      ];
+    }
+
+    const showDialog = document
+      .querySelector('ia-book-actions')
+      .shadowRoot.querySelector('show-dialog');
+
+    showDialog.opened = true;
+    showDialog.title = title;
+    showDialog.body = body;
+    showDialog.actions = actions;
+  }
+}

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,

package/src/ia-book-actions.js

@@ -1,13 +1,17 @@
-/* eslint-disable camelcase */
+/* eslint-disable */
 import { html, css, LitElement } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 
 import './components/collapsible-action-group.js';
+import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
+import './components/show-dialog.js';
 
 import GetLendingActions from './core/services/get-lending-actions.js';
+import ArchiveOrgTokenPoller from './core/services/archive-token-poller.js';
+
 import { mobileContainerWidth } from './core/config/constants.js';
 
 export default class IABookActions extends LitElement {
@@ -15,10 +19,13 @@ export default class IABookActions extends LitElement {
     return {
       userid: { type: String },
       identifier: { type: String },
+      bookTitle: { type: String },
       lendingStatus: { type: Object },
       width: { type: Number },
       bwbPurchaseUrl: { type: String },
+      barType: { type: String },
       sharedObserver: { attribute: false },
+      dialogVisible: { type: Boolean },
     };
   }
 
@@ -26,15 +33,18 @@ export default class IABookActions extends LitElement {
     super();
     this.userid = '';
     this.identifier = '';
+    this.bookTitle = '';
     this.lendingStatus = {};
+    this.width = 0;
+    this.bwbPurchaseUrl = '';
+    this.barType = 'action'; // 'title'|'action'
+    this.sharedObserver = undefined;
     this.primaryActions = [];
     this.primaryTitle = '';
     this.primaryColor = 'primary';
     this.secondaryActions = [];
-    this.width = 0;
-    this.bwbPurchaseUrl = '';
     this.lendingOptions = {};
-    this.sharedObserver = undefined;
+    this.dialogVisible = true;
   }
 
   disconnectedCallback() {
@@ -140,24 +150,59 @@ export default class IABookActions extends LitElement {
       !this.lendingStatus.browseHasExpired
     ) {
       this.startBrowseTimer();
+
+      // token poller start from here...
+      const tokenPoller = new ArchiveOrgTokenPoller(
+        this.identifier,
+        this.lendingStatus
+      );
+      tokenPoller.init();
+      return;
     }
   }
 
   render() {
     return html`
       <section class="lending-wrapper">
-        <collapsible-action-group
-          .userid=${this.userid}
-          .identifier=${this.identifier}
-          .primaryColor=${this.primaryColor}
-          .primaryActions=${this.primaryActions}
-          .secondaryActions=${this.secondaryActions}
-          .width=${this.width}
-          .hasAdminAccess=${this.hasAdminAccess}
-        >
-        </collapsible-action-group>
-        ${this.textGroupTemplate} ${this.infoIconTemplate}
+        ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
       </section>
+
+      <show-dialog
+        ?opened="${this.dialogVisible}"
+        @dialog.close="${() => this.closeDialog(this)}"
+      ></show-dialog>
+    `;
+  }
+
+  toggleDialog(e) {
+    this.dialogVisible = !this.dialogVisible;
+  }
+
+  closeDialog(e) {
+    this.dialogVisible = false;
+    console.log('should close...', this.dialogVisible);
+  }
+
+  get bookTitleBar() {
+    return html`<book-title-bar
+      .identifier=${this.identifier}
+      .bookTitle=${this.bookTitle}
+    ></book-title-bar>`;
+  }
+
+  get bookActionBar() {
+    return html`
+      <collapsible-action-group
+        .userid=${this.userid}
+        .identifier=${this.identifier}
+        .primaryColor=${this.primaryColor}
+        .primaryActions=${this.primaryActions}
+        .secondaryActions=${this.secondaryActions}
+        .width=${this.width}
+        .hasAdminAccess=${this.hasAdminAccess}
+      >
+      </collapsible-action-group>
+      ${this.textGroupTemplate} ${this.infoIconTemplate}
     `;
   }
 
@@ -176,7 +221,7 @@ export default class IABookActions extends LitElement {
   get textGroupTemplate() {
     return html`<text-group
       textClass=${this.textClass}
-      texts="${this.primaryTitle}"
+      texts=${this.primaryTitle}
     >
     </text-group>`;
   }
@@ -195,7 +240,6 @@ export default class IABookActions extends LitElement {
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
-        padding: 10px 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;

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

@@ -0,0 +1,39 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import '../../src/components/book-title-bar.js';
+
+const container = ({ identifier, bookTitle } = {}) =>
+  html`<book-title-bar
+    .identifier=${identifier}
+    .bookTitle=${bookTitle}
+  ></book-title-bar>`;
+
+describe('<book-title-bar>', () => {
+  it('check inner texts of title bar', async () => {
+    const el = await fixture(
+      container({
+        identifier: 'goody',
+        bookTitle: 'this is test booktitle',
+      })
+    );
+    const link = el.shadowRoot.querySelector('a');
+    expect(link.innerText).to.equal('this is test booktitle');
+    expect(link.getAttribute('href')).to.equal('/details/goody');
+  });
+
+  it('check if event if firing on valid analytics category action', async () => {
+    const el = await fixture(
+      container({
+        identifier: 'goody',
+        bookTitle: 'this is test booktitle',
+      })
+    );
+
+    const clickButton = () =>
+      el.shadowRoot.querySelector('a').dispatchEvent(new Event('click'));
+    setTimeout(clickButton);
+
+    const { detail } = await oneEvent(el, 'bookTitleBar');
+    expect(detail.event.category).to.equal('BookReader-Header');
+    expect(detail.event.action).to.equal('Book-Title-Bar');
+  });
+});

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

@@ -36,7 +36,7 @@ describe('Get Lending Actions', () => {
     );
     const actions = lendingOptions.getCurrentLendingActions();
 
-    expect(actions.primaryActions.length).to.equal(1);
+    expect(actions.primaryActions.length).to.equal(2);
     expect(actions.primaryTitle).to.equal(
       'This book can be borrowed for 14 days.'
     );

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

@@ -127,7 +127,7 @@ describe('Borrow status actions', () => {
     expect(el.primaryTitle).to.equal(
       'Renewable every hour, pending availability.'
     );
-    expect(el.primaryActions.length).to.equal(1);
+    expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
   });