@internetarchive/ia-book-actions 1.3.0 → 1.4.1-alpha1

package/index.html

@@ -134,12 +134,12 @@
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.modalConfig = modalConfig;
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
-    iaBookActions.tokenDelay = 10; // 2 seconds
-    iaBookActions.timerExecutionSeconds = 3 // 4 seconds
+    iaBookActions.tokenDelay = 2; // 2 seconds
+    iaBookActions.timerExecutionSeconds = 2 // 4 seconds
     iaBookActions.returnUrl = '';
     iaBookActions.localCache = localCache;
 
-    let loanTotalTime2Min = { loanTotalTime: 120, loanRenewAtLast: 110, pageChangedInLast: 30 };
+    let loanTotalTime2Min = { loanTotalTime: 60, loanRenewAtLast: 55, pageChangedInLast: 5 };
     let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 240, pageChangedInLast: 60 };
     let loanTotalTime10Min = { loanTotalTime: 600, loanRenewAtLast: 480, pageChangedInLast: 120 };
     let loanTotalTime30Min = { loanTotalTime: 1800, loanRenewAtLast: 1500, pageChangedInLast: 600 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "1.3.0",
+  "version": "1.4.1-alpha1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",

package/src/components/collapsible-action-group.js

@@ -29,6 +29,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       disabled: { type: Boolean },
       returnUrl: { type: String },
       autoRenew: { type: Boolean },
+      loanRenewType: { type: String },
       autoReturn: { type: Boolean },
       returnNow: { type: Boolean },
     };
@@ -51,6 +52,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.disabled = false;
     this.returnUrl = '';
     this.autoRenew = false;
+    this.loanRenewType = '';
     this.autoReturn = false;
     this.returnNow = false;
   }
@@ -64,7 +66,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     }
 
     if (changed.has('autoRenew') && this.autoRenew) {
-      this.dispatchLoanEvent('autoRenew');
+      this.dispatchLoanEvent('autoRenew', { renewType: this.loanRenewType });
     }
 
     const requestingAutoreturn = changed.has('autoReturn') && this.autoReturn;

package/src/core/config/analytics-event-and-category.js

@@ -13,8 +13,7 @@ export const analyticsCategories = {
 export const analyticsActions = {
   browse: 'Borrow-1Hour',
   browseAgain: 'Borrow-Again',
-  browseAutoRenew: 'AutoRenewBook',
-  browseAutoReturn: 'AutoReturnBook',
+  browseRenew: 'BookRenew',
   borrow: 'Borrow-14Days',
   waitlistJoin: 'JoinWaitlist',
   waitlistLeave: 'LeaveWaitlist',
@@ -25,3 +24,10 @@ export const analyticsActions = {
   printDisability: 'Print-Disability',
   titleBar: 'Book-Title-Bar',
 };
+
+export const analyticsLabels = {
+  browseAutoRenew: 'BookAutoRenew',
+  browseAutoReturn: 'BookAutoReturn',
+  browseManualRenew: 'BookManualRenew',
+  browseManualReturn: 'BookManualReturn',
+};

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

@@ -6,6 +6,7 @@ import log from '../log.js';
 
 import ActionsHandlerService from './actions-handler-service.js';
 import LoanAnanlytics from '../loan-analytics.js';
+import { analyticsCategories, analyticsActions, analyticsLabels } from '../../config/analytics-event-and-category.js';
 import * as Cookies from '../doc-cookies.js';
 
 /**
@@ -52,12 +53,19 @@ export default class ActionsHandler extends LitElement {
       );
     });
 
-    this.addEventListener('autoRenew', async () => {
+    this.addEventListener('autoRenew', async ({ detail }) => {
       this.handleLoanRenewNow();
       await this.loanAnanlytics?.storeLoanStatsCount(
         this.identifier,
         'autorenew'
       );
+
+      const analyticsLabel = detail?.renewType === 'auto' ? analyticsLabels.browseAutoRenew : analyticsLabels.browseManualRenew;
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browseRenew,
+        analyticsLabel
+      );
     });
 
     this.addEventListener('autoReturn', async () => {
@@ -66,12 +74,24 @@ export default class ActionsHandler extends LitElement {
         this.identifier,
         'autoreturn'
       );
+
+      this.loanAnanlytics?.sendEvent(
+        analyticsCategories.browse,
+        analyticsActions.browseAutoReturn,
+        this.identifier
+      );
     });
 
     this.addEventListener('returnNow', ({ detail }) => {
       // use loan stats count when 1-hour borrow is active
       if (detail?.borrowType === 'browse') {
         this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'return');
+
+        this.loanAnanlytics?.sendEvent(
+          analyticsCategories.browse,
+          analyticsActions.browseManualReturn,
+          this.identifier
+        );
       }
 
       this.handleReturnIt('returnNow');
@@ -116,6 +136,8 @@ export default class ActionsHandler extends LitElement {
       const { category, action } = detail.event;
       this.loanAnanlytics?.sendEvent(category, action, this.identifier);
 
+      this.setStickyAdminAccess(true);
+
       // keep existing params and add new one
       const url = new URL(window.location.href);
       url.searchParams.append('admin', 1);
@@ -125,6 +147,8 @@ export default class ActionsHandler extends LitElement {
     this.addEventListener('exitAdminAccess', ({ detail }) => {
       const { category, action } = detail.event;
       this.loanAnanlytics?.sendEvent(category, action, this.identifier);
+
+      this.setStickyAdminAccess(false);
     });
 
     this.addEventListener('bookTitleBar', ({ detail }) => {
@@ -372,4 +396,16 @@ export default class ActionsHandler extends LitElement {
       '.archive.org'
     );
   }
+
+  /**
+   * Set sticky admin access on or off.
+   * @see WEBDEV-6835
+   *
+   * @param {boolean} value - Whether to enable or disable sticky admin access.
+   * @returns {void}
+   */
+  setStickyAdminAccess(value) {
+    const domain = window.location.hostname === 'localhost' ? 'localhost' : '.archive.org';
+    Cookies.setItem('sticky-admin-access', value, '', '/', domain);
+  }
 }

package/src/core/services/loan-analytics.js

@@ -35,6 +35,8 @@ export default class LoanAnanlytics {
     try {
       await this.getLoanStatsCount(action);
 
+      this.sendMatrixStatsEvents(action);
+
       const date = new Date();
       date.setHours(date.getHours() + 2); // 2 hours
 
@@ -101,14 +103,26 @@ export default class LoanAnanlytics {
 
     // store these counts in cookies
     this.lendingEventCounts = { browse, renew, expire };
+  }
 
+  /**
+   * Send auto-renew Matrix stats events to GA
+   * eg
+   * - browse001-autorenew000:browse
+   * - browse001-autorenew001:autorenew
+   * - and so on...
+   *
+   * @param {action} action
+   * @memberof LoanAnanlytics
+   */
+  sendMatrixStatsEvents(action) {
     // obtain GA category, event
     const category = analyticsCategories.browse;
     const event = `browse${this.paddedNumber(
       this.gaStats?.browse
     )}-autorenew${this.paddedNumber(this.gaStats?.renew)}:${action}`;
 
-    // send google analytics events
+    // send events
     this.sendEvent(category, event, this.identifier);
   }
 
@@ -148,9 +162,9 @@ export default class LoanAnanlytics {
     // log(
     //   'eventCategory:-',
     //   eventCategory,
-    //   '\t||\teventAction:-',
+    //   '||\teventAction:-',
     //   eventAction,
-    //   '\t||\tlabel:-',
+    //   '||\tlabel:-',
     //   label
     // );
 

package/src/core/services/loan-renew-helper.js

@@ -23,6 +23,7 @@ export class LoanRenewHelper {
     this.result = {
       texts: null,
       renewNow: false,
+      renewType: '',
     };
   }
 
@@ -57,8 +58,11 @@ export class LoanRenewHelper {
 
     // if user viewed new page in last 10 minutes, renew immediately
     if (lastTimeFrame !== null && currentTime >= lastTimeFrame) {
-      this.result.texts = this.loanRenewMessage;
-      this.result.renewNow = true;
+      this.result = {
+        texts: this.loanRenewMessage,
+        renewNow: true,
+        renewType: 'auto',
+      };
     }
 
     this.setPageChangedTime();
@@ -88,11 +92,17 @@ export class LoanRenewHelper {
       pageChangedTime === undefined ||
       pageChangedTime <= pageChangeTimeFrame
     ) {
-      this.result.texts = this.loanReturnWarning;
-      this.result.renewNow = false; // not viewed
+      this.result = {
+        texts: this.loanReturnWarning,
+        renewNow: false, // not viewed
+        renewType: '',
+      };
     } else if (pageChangedTime >= pageChangeTimeFrame) {
-      this.result.texts = '';
-      this.result.renewNow = true; // viewed in last time frame
+      this.result = {
+        texts: '',
+        renewNow: true,  // viewed in last time frame
+        renewType: 'auto',
+      };
     }
 
     return this.result;

package/src/ia-book-actions.js

@@ -101,10 +101,10 @@ export default class IABookActions extends LitElement {
     /**
      * contains one hour auto-loan-renew time configuration
      * defaults to 1 hour config
-     * @type {{
-     *  loanTotalTime: number, - total seconds a loan does have
-     *  loanRenewAtLast: number, - check for loan renew at last
-     *  pageChangedInLast: number, - consider loan renew eligible if viewed new page
+     * @type {object} loanRenewTimeConfig
+     * @property {number} loanTotalTime - total seconds a loan does have
+     * @property {number} loanRenewAtLast - check for loan renew at last
+     * @property {number} pageChangedInLast - consider loan renew eligible if viewed new page
      */
     this.loanRenewTimeConfig = {
       loanTotalTime: 3600, // 1 hour
@@ -120,7 +120,7 @@ export default class IABookActions extends LitElement {
      * @property {boolean} renewNow - key to determine if need to renew now
      * @property {number} secondsLeft - seconds left in active loan
      */
-    this.loanRenewResult = { texts: '', renewNow: false, secondsLeft: 0 };
+    this.loanRenewResult = { texts: '', renewNow: false, secondsLeft: 0, renewType: '' };
   }
 
   disconnectedCallback() {
@@ -468,7 +468,7 @@ export default class IABookActions extends LitElement {
   /** Handles Renew action in warning modal */
   async patronWantsToRenewBook() {
     this.showWarningDisabledModal();
-    this.loanRenewResult = { texts: '', renewNow: true };
+    this.loanRenewResult = { texts: '', renewNow: true, renewType: 'manual' };
   }
 
   async patronWantsToReturnBook() {
@@ -595,6 +595,7 @@ export default class IABookActions extends LitElement {
         .returnUrl=${this.returnUrl}
         .localCache=${this.localCache}
         .loanTotalTime=${this.loanRenewTimeConfig.loanTotalTime}
+        .loanRenewType=${this.loanRenewResult.renewType}
         ?hasAdminAccess=${this.hasAdminAccess}
         ?disabled=${this.disableActionGroup}
         ?autoRenew=${this.loanRenewResult.renewNow}

package/demo/index.html

@@ -1,454 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <style>
-    html {
-      font-size: 10px;
-      /* This is to match petabox's base font size */
-    }
-    body {
-      margin: 0;
-      text-align: center;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-    #demo {
-      height: 100px;
-    }
-    ia-book-actions {
-      --white: #fff;
-      --black: #000;
-      --primaryBGColor: var(--black);
-      --secondaryBGColor: #222;
-      --tertiaryBGColor: #333;
-      --primaryTextColor:  var(--white);
-      --primaryCTAFill: #194880;
-      --primaryCTABorder: #c5d1df;
-      --secondaryCTAFill: #333;
-      --secondaryCTABorder: #999;
-      --secondaryCTAFillRGB: 51, 51, 51;
-      --primaryErrorCTAFill: #e51c26;
-      --primaryErrorCTABorder: #f8c6c8;
-      --primaryCTAFillRGB: 25, 72, 128;
-      --primaryErrorCTAFillRGB: 229, 28, 38;
-      --primaryDisableCTAFill: #767676;
-    }
-
-    fieldset {
-      width: fit-content;
-      margin-top: 50px;
-    }
-    fieldset legend {
-      text-align: left;
-      font-size: 12px;
-    }
-    td {
-      color: white;
-      font-size: 14px;
-      border-radius: 5%;
-      display: table-cell;
-      text-align: initial;
-      margin: 5px 0;
-      width: max-content;
-      display: block;
-    }
-    label {
-      padding: 10px;
-      display: block;
-      cursor: pointer;
-      margin: 2px;
-      background: #4e545a;
-      border-radius: 10px;
-    }
-    input[type="radio"], input[type="checkbox"] {
-      margin-top: 0;
-      vertical-align: middle;
-    }
-
-    .initial td {
-      float: left;
-      margin: 2px;
-    }
-
-    fieldset {
-      display: inline-grid;
-    }
-
-    .action-button button {
-      padding: 6px;
-      cursor: pointer;
-      border: 2px solid #194880;
-      border-radius: 10px;
-    }
-
-    body.modal-manager-open {
-      overflow: hidden;
-    }
-  
-    modal-manager[mode='closed'] {
-      display: none;
-    }
-  </style>
-</head>
-
-<body>
-  <ia-book-actions></ia-book-actions>
-
-  <script type="module">
-    /* eslint-disable */
-
-    import '../src/ia-book-actions.js';
-    import {
-      defaultLendingStatus,
-      canBrowseAndBorrow,
-    } from '../src/assets/data/lending-get-status-service.js';
-    import { ModalConfig } from '@internetarchive/modal-manager';
-    import { LocalCache } from '@internetarchive/local-cache';
-
-    const localCache = new LocalCache({
-      namespace: 'loanRenew',
-      defaultTTL: 1 * 60,  // 1 minute
-    });
-
-    const userid = '@neeraj-archive';
-    const identifier = 'naturalhistoryof00unse_4111';
-    let bwbPurchaseUrl = 'https://www.betterworldbooks.com/product/detail/cambridge-ancient-hist-v04-0521044863';
-
-
-    const modalConfig = new ModalConfig();
-    modalConfig.headerColor = '#d9534f';
-
-    let lendingBarPostInit = function lendingBarPostInit() {
-      setTimeout(function() {}, 100);
-    }
-
-    // set defaultLendingStatus for unavailable (without borrowables) book
-    let iaBookActions = document.querySelector('ia-book-actions');
-
-    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.modalConfig = modalConfig;
-    iaBookActions.lendingBarPostInit = lendingBarPostInit;
-    iaBookActions.tokenDelay = 2; // 2 seconds
-    iaBookActions.timerExecutionSeconds = 4 // 4 seconds
-    iaBookActions.returnUrl = '';
-    iaBookActions.localCache = localCache;
-
-    let loanTotalTime2Min = { loanTotalTime: 120, loanRenewAtLast: 80, pageChangedInLast: 15 };
-    let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
-    let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 660, pageChangedInLast: 900 };
-
-    iaBookActions.loanRenewTimeConfig = loanTotalTime2Min;
-
-    let lendingStatus1 = iaBookActions.lendingStatus;
-    let secondsLeftOnLoan = iaBookActions.loanRenewTimeConfig.loanTotalTime;
-
-    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('.searchParam input[type=checkbox]').forEach((item) => {
-      item.addEventListener('click', (e) => {
-        var searchParams = new URLSearchParams(window.location.search);
-        var separate = '';
-        if (e.target.checked) {
-          separate = '?';
-          searchParams.set('q', 'test');
-        } else {
-          separate = '';
-          searchParams.delete('q');
-        }
-
-        if (history.pushState) {
-          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
-          window.history.pushState({path:newurl},'',newurl);
-        }
-      });
-    });
-
-    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) {
-          if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = true;
-          if (e.target.value === 'isLoggedIn') iaBookActions.userid = '@neeraj';
-        } else {
-          if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = false;
-          if (e.target.value === 'isLoggedIn') iaBookActions.userid = '';
-        }
-        let lending = {...defaultLendingStatus, ...lendingStatus1};
-        iaBookActions.lendingStatus = lending;
-      });
-    });
-
-    document.querySelectorAll('.printDisabled input[type=checkbox]').forEach((item) => {
-      item.addEventListener('click', (e) => {
-        if (e.target.checked) {
-          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = true;
-          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = true;
-        } else {
-          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = false;
-          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = false;
-        }
-
-        let lending = {...defaultLendingStatus, ...lendingStatus1};
-        iaBookActions.lendingStatus = lending;
-      });
-    });
-
-    document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
-      item.addEventListener('click', async (e) => {
-        if (e.target.value === 'user_has_browsed') {
-          lendingStatus1.user_has_browsed = true;
-          lendingStatus1.available_to_browse = false;
-          lendingStatus1.secondsLeftOnLoan = secondsLeftOnLoan;
-          lendingStatus1.browsingExpired = false;
-
-          const expireDate = new Date(
-            new Date().getTime() + iaBookActions.loanRenewTimeConfig.loanTotalTime * 1000
-          );
-          try {
-            // set a value
-            await localCache.set({
-              key: `${identifier}-loanTime`,
-              value: expireDate,
-              ttl: Number(iaBookActions.loanRenewTimeConfig.loanTotalTime),
-            });
-
-            await localCache.delete(`${identifier}-pageChangedTime`);
-          } catch (error) {}
-          
-        } 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;
-        }
-
-        // wait for a while
-        setTimeout(() => {
-          let lending = {...defaultLendingStatus, ...lendingStatus1};
-          iaBookActions.lendingStatus = lending;
-        }, 10);
-      });
-    });
-
-    document.querySelector('#show_warning_modal').addEventListener('click', async () => {
-      if (!iaBookActions.lendingStatus.user_has_browsed) {
-        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
-        iaBookActions.lendingStatus = newLendingStatus;
-        await iaBookActions.updateComplete;
-      }
-
-      iaBookActions.showWarningModal();
-
-      if (iaBookActions.lendingStatus.user_has_browsed) {
-        iaBookActions.showWarningModal();
-      }
-    });
-
-    document.querySelector('#show_expired_modal').addEventListener('click', async () => {
-      if (!iaBookActions.lendingStatus.user_has_browsed) {
-        const newLendingStatus = { ...iaBookActions.lendingStatus, user_has_browsed: true };
-        iaBookActions.lendingStatus = newLendingStatus;
-        await iaBookActions.updateComplete;
-      }
-      await new Promise(resolve => setTimeout(resolve, 5000));
-
-      iaBookActions.browseHasExpired();
-    });
-
-    document.querySelector('#resync_timer').addEventListener('click', async (e) => {
-      if (iaBookActions.lendingStatus.user_has_browsed) {
-        document.querySelector('ia-book-actions').dispatchEvent(
-          new Event('visibilitychange', {
-            detail: {},
-            bubbles: true,
-            composed: true,
-          })
-        );
-      }
-      await new Promise(resolve => setTimeout(resolve, 5000));
-    });
-
-    document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
-      item.addEventListener('click', (e) => {
-        if (e.target.value === 'available_to_borrow') {
-          lendingStatus1.available_to_borrow = true;
-          lendingStatus1.user_on_waitlist = false;
-          lendingStatus1.available_to_waitlist = false;
-          lendingStatus1.user_has_borrowed = false;
-        } else if (e.target.value === 'user_can_claim_waitlist') {
-          lendingStatus1.available_to_borrow = true;
-          lendingStatus1.user_on_waitlist = true;
-          lendingStatus1.user_can_claim_waitlist = true;
-          lendingStatus1.user_has_borrowed = false;
-          lendingStatus1.available_to_waitlist = false;
-        } else if (e.target.value === 'user_on_waitlist') {
-          lendingStatus1.available_to_borrow = false;
-          lendingStatus1.user_on_waitlist = true;
-          lendingStatus1.available_to_waitlist = false;
-          lendingStatus1.user_has_borrowed = false;
-        } else if (e.target.value === 'available_to_waitlist') {
-          lendingStatus1.available_to_borrow = false;
-          lendingStatus1.user_on_waitlist = false;
-          lendingStatus1.available_to_waitlist = true;
-          lendingStatus1.user_has_borrowed = false;
-        } else if (e.target.value === 'user_has_borrowed') {
-          lendingStatus1.available_to_borrow = false;
-          lendingStatus1.user_on_waitlist = false;
-          lendingStatus1.available_to_waitlist = false;
-          lendingStatus1.user_has_borrowed = true;
-        }
-
-        let lending = {...defaultLendingStatus, ...lendingStatus1};
-        iaBookActions.lendingStatus = lending;
-      });
-    });
-
-    document.querySelectorAll('.purchase input[type=checkbox]').forEach((item) => {
-      item.addEventListener('click', (e) => {
-        if (e.target.checked) {
-          bwbPurchaseUrl = 'https://www.google.com';
-        } else {
-          bwbPurchaseUrl = ''
-        }
-        iaBookActions.bwbPurchaseUrl = bwbPurchaseUrl;
-      })
-    });
-
-    document.querySelector('.pageChangedEvent').addEventListener('click', () => {
-      // dispatch event to say book page has flipped
-      document.querySelector('ia-book-actions').dispatchEvent(
-        new CustomEvent('BookReader:userAction', {
-          detail: {},
-          bubbles: true,
-          composed: true,
-        })
-      );
-    })
-
-    // listen for IABookReader:BrowsingHasExpired
-    window.addEventListener('IABookReader:BrowsingHasExpired', () => {
-      console.log('IABookReader:BrowsingHasExpired EVENT FIRED');
-    });
-</script>
-
-  <div>
-    <fieldset>
-      <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>
-            <td class="searchParam">
-              <label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
-            </td>
-            <td>
-              <label class="ia-button"><button class="pageChangedEvent">Page Change Event</button></label>
-            </td>
-          </tr>
-        </table>
-    </fieldset>
-
-    <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>
-              <label><input type="checkbox" name="user" value="isLoggedIn" />isLoggedIn</label>
-            </td>
-            <td class="printDisabled">
-              <label><input type="checkbox" name="is_printdisabled" value="is_printdisabled" />is_printdisabled</label>
-              <label><input type="checkbox" name="user_is_printdisabled" value="user_is_printdisabled" />user_is_printdisabled</label>
-            </td>
-            <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>
-              <label><input type="radio" name="borrow" value="user_on_waitlist" />user_on_waitlist</label>
-              <label><input type="radio" name="borrow" value="user_can_claim_waitlist" />user_can_claim_waitlist</label>
-              <label><input type="radio" name="borrow" value="available_to_waitlist" />available_to_waitlist</label>
-              <label><input type="radio" name="borrow" value="user_has_borrowed" />user_has_borrowed</label>
-            </td>
-            <td class="purchase">
-              <label><input type="checkbox" name="purchase" value="purchase" />purchase</label>
-            </td>
-
-            <td class="reflect">
-              <input type="button" style="padding: 10px;
-              background: #194880;
-              color: white;
-              font-weight: bold; display: none" name="purchase" value="Reflect" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <fieldset style="margin-top: 10px;">
-                <legend style="color: black;">controls for browsed book</legend>
-                  <table aria-hidden="true">
-                    <tbody><tr>
-                      <td class="action-button">
-                        <button id="show_warning_modal">When Browsing (`user_has_browsed`),<br> show Warning Modal</button>
-                      </td>
-                      <td class="action-button">
-                        <button id="show_expired_modal">While Browsing (`user_has_browsed`),<br> Expire book & show its modal</button>
-                      </td>
-                      <td class="action-button">
-                        <button id="resync_timer">While Browsing (`user_has_browsed`),<br> resync timer</button>
-                      </td>
-                    </tr>
-                  </tbody></table>
-              </fieldset>
-            </td>
-          </tr>
-        </table>
-    </fieldset>
-  </div>
-  <modal-manager></modal-manager>
-</body>
-</html>