@internetarchive/ia-book-actions 0.0.5-3 → 0.0.5-4-03

package/demo/index.html

@@ -83,12 +83,7 @@
     import '../src/ia-book-actions.js';
     import {
       defaultLendingStatus,
-      canBrowse,
-      browsed,
       canBrowseAndBorrow,
-      browsedAndBorrow,
-      canBrowseAndBorrowod,
-      canBrowseAndJoinWaitlistForBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
 
     const userid = '@neeraj-archive';
@@ -100,11 +95,23 @@
     // set defaultLendingStatus for unavailable (without borrowables) book
     iaBookActions.userid = '';
     iaBookActions.identifier = identifier;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
     iaBookActions.lendingStatus = defaultLendingStatus;
     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) {
@@ -139,6 +146,13 @@
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.browsingExpired = false;
+        } else if(e.target.value === 'browsingExpired') {
+          lendingStatus1.user_has_browsed = true;
+          lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 0;
+          lendingStatus1.browsingExpired = true;
         } else if (e.target.value === 'available_to_browse') {
           lendingStatus1.available_to_browse = true;
           lendingStatus1.user_has_browsed = false;
@@ -192,7 +206,18 @@
 
   <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">
@@ -206,6 +231,7 @@
             <td class="availableToBrowse">
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
+              <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.5-3",
+  "version": "0.0.5-4-03",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

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/data/lending-get-status-service.js

@@ -34,6 +34,7 @@ export const defaultLendingStatus = {
   users_on_waitlist: 0,
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
+  browsingExpired: false,
   daysLeftOnLoan: 0,
   isAdmin: false,
   isArchiveOrgLending: true,
@@ -47,7 +48,7 @@ export const defaultLendingStatus = {
   loanRecord: [],
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 0,
+  secondsLeftOnLoan: 10,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,
@@ -58,139 +59,6 @@ export const defaultLendingStatus = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const canBrowse = {
-  active_borrows: 0,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: null,
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const browsed = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: false,
-  available_to_browse: false,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
 export const canBrowseAndBorrow = {
   active_borrows: 0,
   active_browses: 1,
@@ -261,206 +129,3 @@ export const canBrowseAndBorrow = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const browsedAndBorrow = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndBorrowod = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: true,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndJoinWaitlistForBorrow = {
-  active_borrows: 1,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: true,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: '2021-07-24 18:17:46',
-  last_browse: null,
-  last_waitlist: '2021-07-27 11:03:23',
-  max_borrowable_copies: 1,
-  max_browsable_copies: 2,
-  max_lendable_copies: 2,
-  next_borrow_expiration: '2021-08-02 18:29:41',
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 2,
-  // userid: "",
-  bookUrl: '/details/worldletitutio0000vish',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 2,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};

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/core/config/analytics-event-and-category.js

@@ -6,9 +6,8 @@ export const analyticsCategories = {
   browse: 'BookReader-ReadingBrowse',
   preview: 'BookReader-Preview',
   satisfactionMetric: 'DetailsPage-Book',
-  purchase: 'BookReaderHeader',
-  unavailable: 'BookReader-Preview',
-  admin: 'Admin',
+  bookReaderHeader: 'BookReader-Header',
+  adminAccess: 'Admin-Access',
 };
 
 export const analyticsActions = {
@@ -21,4 +20,6 @@ export const analyticsActions = {
   login: 'LogIn',
   purchase: 'BWBPurchase',
   unavailable: 'Book-Unavailable',
+  printDisability: 'Print-Disability',
+  titleBar: 'Book-Title-Bar',
 };

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

@@ -33,7 +33,7 @@ export default class ActionsConfig {
     this.analyticsActions = analyticsActions;
   }
 
-  browseBookConfig() {
+  firstBrowseConfig() {
     return {
       id: 'browseBook',
       text: 'Borrow for 1 hour',
@@ -45,10 +45,22 @@ export default class ActionsConfig {
     };
   }
 
+  browseAgainConfig() {
+    return {
+      id: 'browseBookAgain',
+      text: 'Borrow again',
+      className: 'primary',
+      analyticsEvent: {
+        category: this.analyticsCategories.browse,
+        action: this.analyticsActions.browseAgain,
+      },
+    };
+  }
+
   returnBookConfig() {
     const eventCategory = this.lendingStatus.user_has_browsed
-      ? 'browse'
-      : 'borrow';
+      ? this.analyticsCategories.browse
+      : this.analyticsCategories.borrow;
 
     return {
       id: 'returnNow',
@@ -77,7 +89,7 @@ export default class ActionsConfig {
       analyticsEvent: {
         category: this.lendingStatus.user_has_browsed
           ? this.analyticsCategories.browse
-          : this.analyticsCategories.borrow,
+          : this.analyticsCategories.preview,
         action: this.analyticsActions.borrow,
       },
     };
@@ -161,7 +173,7 @@ export default class ActionsConfig {
       target: '_blank',
       className: 'purchase dark',
       analyticsEvent: {
-        category: this.analyticsCategories.purchase,
+        category: this.analyticsCategories.bookReaderHeader,
         action: this.analyticsActions.purchase,
       },
     };
@@ -179,8 +191,8 @@ export default class ActionsConfig {
       target: '_self',
       className: 'print-disability',
       analyticsEvent: {
-        category: this.analyticsCategories.purchase,
-        action: this.analyticsActions.purchase,
+        category: this.analyticsCategories.bookReaderHeader,
+        action: this.analyticsActions.printDisability,
       },
     };
   }
@@ -198,7 +210,7 @@ export default class ActionsConfig {
       target: '_self',
       className: 'danger',
       analyticsEvent: {
-        category: this.analyticsCategories.admin,
+        category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.borrow,
       },
     };
@@ -216,7 +228,7 @@ export default class ActionsConfig {
       target: '_self',
       className: 'ia-button',
       analyticsEvent: {
-        category: this.analyticsCategories.admin,
+        category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.doneBorrowing,
       },
     };
@@ -229,7 +241,7 @@ export default class ActionsConfig {
       className: 'primary unavailable',
       disabled: true,
       analyticsEvent: {
-        category: this.analyticsCategories.unavailable,
+        category: this.analyticsCategories.preview,
         action: this.analyticsActions.unavailable,
       },
     };

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/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,
@@ -104,7 +103,7 @@ export default class GetLendingActions {
     const leaveWaitlist = this.actionsConfig.leaveWaitlistConfig();
     const borrowBook = this.actionsConfig.borrowBookConfig();
     const browseBook = lendingStatus.available_to_browse
-      ? this.actionsConfig.browseBookConfig()
+      ? this.actionsConfig.firstBrowseConfig()
       : null;
 
     const dropdownOptions = browseBook ? [browseBook, borrowBook] : [];
@@ -150,7 +149,7 @@ export default class GetLendingActions {
       primaryTitle: 'You are on the waitlist for this book.',
       primaryActions: [
         this.actionsConfig.leaveWaitlistConfig(),
-        this.actionsConfig.browseBookConfig(),
+        this.actionsConfig.firstBrowseConfig(),
       ],
       primaryColor: 'primary',
       secondaryActions: [
@@ -200,7 +199,9 @@ export default class GetLendingActions {
       borrow = this.actionsConfig.unavailableBookConfig();
     }
 
-    const actions = [borrow, waitlist].filter(action => {
+    const printDisability = this.actionsConfig.printDisabilityConfig();
+
+    const actions = [borrow, waitlist, printDisability].filter(action => {
       return action !== null;
     });
 
@@ -263,25 +264,9 @@ export default class GetLendingActions {
       : possibleTitles.one_hour;
 
     // one hour borrow config
-    const oneHrBorrowText = browsingHasExpired
-      ? 'Borrow again'
-      : 'Borrow for 1 hour';
-    const browseAgainEvent = {
-      category: this.analyticsCategories.browse,
-      action: this.analyticsActions.browseAgain,
-    };
-    const firstBrowseEvent = {
-      category: this.analyticsCategories.preview,
-      action: this.analyticsActions.browse,
-    };
-    const oneHrBorrowEvent = browsingHasExpired
-      ? browseAgainEvent
-      : firstBrowseEvent;
-
-    const oneHrBorrow = this.actionsConfig.browseBookConfig(
-      oneHrBorrowText,
-      oneHrBorrowEvent
-    );
+    const oneHrBorrow = browsingHasExpired
+      ? this.actionsConfig.browseAgainConfig()
+      : this.actionsConfig.firstBrowseConfig();
 
     const borrow = this.actionsConfig.borrowBookConfig();
     const waitlist = this.actionsConfig.waitlistConfig();
@@ -316,10 +301,7 @@ export default class GetLendingActions {
       return this.loggedOutOptions();
     }
 
-    const canBrowse =
-      lendingStatus.available_to_browse ||
-      (!lendingStatus.available_to_browse && lendingStatus.browsingExpired);
-    if (canBrowse) {
+    if (lendingStatus.available_to_browse || lendingStatus.browsingExpired) {
       return this.borrow1HrAction();
     }
 
@@ -386,7 +368,8 @@ export default class GetLendingActions {
       lendingStatus.user_is_printdisabled;
 
     const patronIsReading =
-      lendingStatus.user_has_borrowed || lendingStatus.user_has_browsed;
+      lendingStatus.user_has_borrowed ||
+      (lendingStatus.user_has_browsed && !lendingStatus.browsingExpired);
 
     const notBorrowed =
       !lendingStatus.user_has_borrowed && !lendingStatus.user_has_browsed;
@@ -422,7 +405,7 @@ export default class GetLendingActions {
       lendingActions = this.leaveWaitlistAction();
     } else if (userCanAccessPrintDisabled) {
       lendingActions = this.borrowPrintDisabledAction();
-    } else if (canBorrow) {
+    } else if (canBorrow || lendingStatus.browsingExpired) {
       lendingActions = this.borrowAction();
     } else if (lendingStatus.isPrintDisabledOnly) {
       lendingActions = this.onlyPrintDisabledAction();

package/src/ia-book-actions.js

@@ -1,8 +1,10 @@
+/* eslint-disable camelcase */
 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';
 
@@ -14,9 +16,11 @@ 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 },
     };
   }
@@ -25,15 +29,17 @@ 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.lendingOptions = {};
   }
 
   disconnectedCallback() {
@@ -60,6 +66,28 @@ export default class IABookActions extends LitElement {
     }
   }
 
+  browseHasExpired() {
+    const browsingExpired = true;
+    const currStatus = { ...this.lendingStatus, browsingExpired };
+    this.lendingStatus = currStatus;
+  }
+
+  startBrowseTimer() {
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      return;
+    }
+
+    const timeLeft = secondsLeftOnLoan * 1000;
+    setTimeout(() => {
+      this.browseHasExpired();
+    }, timeLeft);
+  }
+
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -111,26 +139,46 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = actions.secondaryActions.filter(action => {
       return action != null;
     });
+
+    if (
+      this.lendingStatus.user_has_browsed &&
+      !this.lendingStatus.browseHasExpired
+    ) {
+      this.startBrowseTimer();
+    }
   }
 
   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>
     `;
   }
 
+  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}
+    `;
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }
@@ -146,7 +194,7 @@ export default class IABookActions extends LitElement {
   get textGroupTemplate() {
     return html`<text-group
       textClass=${this.textClass}
-      texts="${this.primaryTitle}"
+      texts=${this.primaryTitle}
     >
     </text-group>`;
   }
@@ -165,7 +213,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

@@ -1,4 +1,5 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, aTimeout } from '@open-wc/testing';
+
 import '../src/ia-book-actions.js';
 import Sinon from 'sinon';
 
@@ -126,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);
   });
@@ -159,40 +160,79 @@ describe('Borrow status actions', () => {
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
     expect(el.primaryActions[1].text).to.equal('Borrow for 14 days');
   });
+});
 
-  describe('Shared Resize Observer', () => {
-    it('can receive a Shared Resize Observer', async () => {
-      const sharedObserverStub = new SharedResizeObserver();
-      const addObserverSpy = Sinon.spy(sharedObserverStub, 'addObserver');
-      const component = await fixture(html` <ia-book-actions
-        .userid=${'@userid'}
-        .identifier=${'foo'}
-        .lendingStatus=${{
+describe('Browsing expired status', () => {
+  it('Book is browsed but not expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@userid',
+        lendingStatus: {
           is_lendable: true,
           user_has_browsed: true,
-          available_to_browse: true,
-          available_to_borrow: true,
-        }}
-        .sharedObserver=${sharedObserverStub}
-      ></ia-book-actions>`);
-      await component.updateComplete;
-
-      expect(addObserverSpy.callCount).to.equal(1);
-    });
-    it('loads its own resize observer if it is not received', async () => {
-      const component = await fixture(html` <ia-book-actions
-        .userid=${'@userid'}
-        .identifier=${'foo'}
-        .lendingStatus=${{
+          browseHasExpired: false,
+        },
+      })
+    );
+    expect(el.primaryTitle).contains('Borrow ends at ');
+    expect(el.primaryActions[0].text).to.equal('Return now');
+    expect(el.primaryActions[1].text).to.equal('Print Disability Access');
+  });
+
+  it('Book is browsing and going to expire after 1 second', async () => {
+    const el = await fixture(
+      container({
+        userid: '@userid',
+        lendingStatus: {
           is_lendable: true,
           user_has_browsed: true,
-          available_to_browse: true,
-          available_to_borrow: true,
-        }}
-      ></ia-book-actions>`);
+          browseHasExpired: false,
+          secondsLeftOnLoan: 1,
+        },
+      })
+    );
+
+    await aTimeout(1500); // wait for 1.5 second
+    el.updateComplete;
+
+    expect(el.primaryTitle).contains('Your loan has expired.');
+    expect(el.primaryActions[0].text).to.equal('Borrow again');
+  });
+});
+
+describe('Shared Resize Observer', () => {
+  it('can receive a Shared Resize Observer', async () => {
+    const sharedObserverStub = new SharedResizeObserver();
+    const addObserverSpy = Sinon.spy(sharedObserverStub, 'addObserver');
+    const component = await fixture(html` <ia-book-actions
+      .userid=${'@userid'}
+      .identifier=${'foo'}
+      .lendingStatus=${{
+        is_lendable: true,
+        user_has_browsed: true,
+        available_to_browse: true,
+        available_to_borrow: true,
+      }}
+      .sharedObserver=${sharedObserverStub}
+    ></ia-book-actions>`);
+    await component.updateComplete;
+
+    expect(addObserverSpy.callCount).to.equal(1);
+  });
 
-      await component.updateComplete;
-      expect(component.sharedObserver).to.not.be.undefined;
-    });
+  it('loads its own resize observer if it is not received', async () => {
+    const component = await fixture(html` <ia-book-actions
+      .userid=${'@userid'}
+      .identifier=${'foo'}
+      .lendingStatus=${{
+        is_lendable: true,
+        user_has_browsed: true,
+        available_to_browse: true,
+        available_to_borrow: true,
+      }}
+    ></ia-book-actions>`);
+
+    await component.updateComplete;
+    expect(component.sharedObserver).to.not.be.undefined;
   });
 });