@internetarchive/ia-book-actions 0.1.11-b9 → 1.1.0-alpha1

package/demo/index.html

@@ -150,6 +150,25 @@
       });
     });
 
+    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;
@@ -242,6 +261,31 @@
       });
     });
 
+    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.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
         if (e.target.value === 'available_to_borrow') {
@@ -298,6 +342,11 @@
         })
       );
     })
+
+    // listen for IABookReader:BrowsingHasExpired
+    window.addEventListener('IABookReader:BrowsingHasExpired', () => {
+      console.log('IABookReader:BrowsingHasExpired EVENT FIRED');
+    });
 </script>
 
   <div>
@@ -308,6 +357,8 @@
             <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>
               <button class="pageChangedEvent">Page Change Event</button>
             </td>
@@ -334,6 +385,13 @@
               <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>
+              <div>
+                <button id="show_warning_modal">When Browsing (`user_has_browsed`), show Warning Modal</button>
+              </div>
+              <div>
+                <button id="show_expired_modal">While Browsing (`user_has_browsed`), Expire book & show its modal</button>
+                how_expired_modal
+              </div>
             </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.1.11-b9",
+  "version": "1.1.0-alpha1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -18,13 +18,14 @@
     "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
   },
   "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.4",
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@internetarchive/toast-manager": "0.1.0",
-    "lit": "^2.5.0"
+    "install-deps": "^1.1.0",
+    "lit": "^2.5.0",
+    "playwright": "^1.43.1"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

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

@@ -63,15 +63,16 @@ export class CollapsibleActionGroup extends ActionsHandler {
       this.resetActions();
     }
 
-    if (changed.has('autoRenew') && this.autoRenew === true) {
+    if (changed.has('autoRenew') && this.autoRenew) {
       this.dispatchLoanEvent('autoRenew');
     }
 
-    if (changed.has('autoReturn') && this.autoReturn === true) {
+    const requestingAutoreturn = changed.has('autoReturn') && this.autoReturn;
+    if (requestingAutoreturn) {
       this.dispatchLoanEvent('autoReturn');
     }
 
-    if (changed.has('returnNow') && this.returnNow === true) {
+    if (changed.has('returnNow') && this.returnNow && !requestingAutoreturn) {
       this.dispatchLoanEvent('returnNow', { borrowType: 'browse' });
     }
   }
@@ -177,7 +178,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
   get renderSecondaryActions() {
     if (!this.secondaryActions.length) return nothing;
 
-    return this.secondaryActions.map(action => this.renderActionLink(action));
+    return this.secondaryActions.map(action => this.renderActionButton(action));
   }
 
   /**

package/src/components/timer-countdown.js

@@ -3,32 +3,43 @@ import { html, css, LitElement } from 'lit';
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
-      secondsLeftOnLoan: { type: Number }, // in seconds
+      secondsLeftOnLoan: { type: Number },
+      displayTime: { type: Boolean },
     };
   }
 
   constructor() {
     super();
 
-    /**
-     * seconds left in current loan
-     * @type {number}
-     */
     this.secondsLeftOnLoan = 0;
+    this.displayTime = false;
+  }
+
+  get minutesLeftOnLoan() {
+    let timeLeft = Math.round(this.secondsLeftOnLoan);
+
+    // convert time from second to minute
+    timeLeft = Math.ceil(timeLeft / 60);
+
+    if (timeLeft < 10) {
+      timeLeft = `0:0${timeLeft}`;
+    } else if (timeLeft === 60) {
+      timeLeft = `1:00`;
+    } else {
+      timeLeft = `0:${timeLeft}`;
+    }
+    return timeLeft;
   }
 
   /**
    * get remaining time with timeunit
    *
    * @memberof TimerCountdown
-   * @return string
+   * @return string - minutes left
    */
   get remainingTime() {
     const unitOfTime = 'minute';
-    let timeLeft = Math.round(this.secondsLeftOnLoan);
-
-    // convert time from second to minute
-    timeLeft = Math.ceil(timeLeft / 60);
+    const timeLeft = this.minutesLeftOnLoan;
 
     return timeLeft !== 1
       ? `${timeLeft} ${unitOfTime}s`
@@ -36,58 +47,28 @@ export default class TimerCountdown extends LitElement {
   }
 
   render() {
+    const viewClass = this.displayTime ? 'view' : 'hide';
     return html`
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
+      <button
+        id="timer-counter"
+        class=${viewClass}
+        @click=${() => {
+          this.displayTime = !this.displayTime;
+        }}
+        role="timer"
       >
-        <circle class="circle" cx="50" cy="50" r="50" />
-      </svg>
-      <span class="sr-only">${this.remainingTime} left</span>
+        <span>${this.minutesLeftOnLoan}</span>
+        <span class="sr-only">${this.remainingTime} left</span>
+      </button>
     `;
   }
 
   static get styles() {
-    const white = css`var(--white, #fff)`;
-    const timerSecondsLeft = css`var(--secondsLeftOnLoan, 6000s)`; //
-    const timerStrokeLeft = css`var(--strokeLeftOnLoan, 315)`;
-
     return css`
       :host {
         right: 0;
         margin-right: 10px;
         position: absolute;
-        height: 20px;
-        width: 20px;
-      }
-
-      @keyframes circletimer {
-        0% {
-          stroke-dashoffset: ${timerStrokeLeft};
-          stroke-dasharray: 315;
-        }
-        100% {
-          stroke-dashoffset: 0;
-          stroke-dasharray: 315;
-        }
-      }
-
-      svg {
-        background-color: ${white};
-        border-radius: 50px;
-        border: 2px solid ${white};
-        transform: rotateZ(-90deg);
-      }
-
-      svg .circle {
-        stroke: #000;
-        stroke-width: 100px;
-        fill: ${white};
-        stroke-dashoffset: 315;
-        stroke-dasharray: 0;
-        animation: ${timerSecondsLeft} circletimer linear;
       }
 
       .sr-only {
@@ -100,6 +81,18 @@ export default class TimerCountdown extends LitElement {
         border: none;
         overflow: hidden;
       }
+
+      button#timer-counter {
+        cursor: pointer;
+      }
+
+      .hide {
+        opacity: 0;
+      }
+
+      .show {
+        opacity: 1;
+      }
     `;
   }
 }

package/src/core/config/constants.js

@@ -6,4 +6,4 @@ export const mobileContainerWidth = 700;
 /**
  * shift the actions buttons in dropdown
  */
-export const tabletContainerWidth = 895;
+export const tabletContainerWidth = 800;

package/src/core/config/ia-lending-intervals.js

@@ -1,3 +1,4 @@
+/* global: window */
 /**
  * Collection of methods for managing intervals for lending system
  *
@@ -18,16 +19,19 @@ window.IALendingIntervals = {
   tokenPoller: 0,
 
   /**
-   * store timer-countdown interval
-   * @see TimerCountdown::timerCountdown
+   * renewal check interval
    */
   timerCountdown: 0,
 
+  /** expiration timer */
+  browseExpireTimeout: 0,
+
   /**
    * clear interval for create_token api
    */
   clearTokenPoller: () => {
-    window.clearInterval(window?.IALendingIntervals?.tokenPoller);
+    window.clearInterval(window.IALendingIntervals.tokenPoller);
+    window.IALendingIntervals.tokenPoller = 0;
   },
 
   /**
@@ -35,13 +39,23 @@ window.IALendingIntervals = {
    */
   clearTimerCountdown: () => {
     window.clearInterval(window.IALendingIntervals.timerCountdown);
+    window.IALendingIntervals.timerCountdown = 0;
+  },
+
+  /**
+   * clear interval for graphic timer for one-hour loan renew
+   */
+  clearBrowseExpireTimeout: () => {
+    window.clearTimeout(window.IALendingIntervals.browseExpireTimeout);
+    window.IALendingIntervals.browseExpireTimeout = 0;
   },
 
   /**
    * clear all intervals being used acros lending system
    */
   clearAll: () => {
-    window.clearInterval(window?.IALendingIntervals?.tokenPoller);
-    window.clearInterval(window?.IALendingIntervals?.timerCountdown);
+    window?.IALendingIntervals?.clearTokenPoller();
+    window?.IALendingIntervals?.clearTimerCountdown();
+    window?.IALendingIntervals?.clearBrowseExpireTimeout();
   },
 };

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

@@ -207,8 +207,6 @@ export default class ActionsConfig {
       id: 'adminAccess',
       text: 'Admin Access',
       title: 'You have administrative privileges to read this book',
-      url: '?admin=1',
-      target: '_self',
       className: 'danger',
       analyticsEvent: {
         category: this.analyticsCategories.adminAccess,

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

@@ -21,7 +21,13 @@ export default async function ActionsHandlerService(options) {
   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.';
-  const erroneousActions = ['browse_book', 'borrow_book', 'create_token', 'renew_loan'];
+  const erroneousActions = [
+    'browse_book',
+    'borrow_book',
+    'create_token',
+    'renew_loan',
+    'return_loan',
+  ];
   const shouldReturnError =
     location?.href?.indexOf('?error=true') !== -1 &&
     location?.hostname !== 'archive.org';
@@ -36,7 +42,7 @@ export default async function ActionsHandlerService(options) {
       method: 'POST',
       body: formData,
     })
-      .then(response => {
+      .then(async response => {
         // intentional error on localhost
         if (shouldReturnError && erroneousActions.includes(option?.action)) {
           return {
@@ -47,7 +53,12 @@ export default async function ActionsHandlerService(options) {
 
         // return success response for /demo/ server...
         if (baseHost == '/demo/1' || baseHost == '/demo/') {
-          if (option?.action == 'renew_loan') {
+          if (
+            option?.action == 'renew_loan' ||
+            option?.action == 'return_loan'
+          ) {
+            // wait a few seconds so that the user can see the loading state
+            await new Promise(resolve => setTimeout(resolve, 5000));
             return {
               success: true,
               loan: { renewal: true },

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

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
 import { sentryLogs } from '../../config/sentry-events.js';
+import log from '../log.js';
 
 import ActionsHandlerService from './actions-handler-service.js';
 import LoanAnanlytics from '../loan-analytics.js';
@@ -38,24 +39,33 @@ export default class ActionsHandler extends LitElement {
   }
 
   bindEvents() {
-    this.addEventListener('browseBook', () => {
+    this.addEventListener('browseBook', async () => {
       this.handleBrowseIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browse');
+      await this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browse');
     });
 
-    this.addEventListener('browseBookAgain', () => {
+    this.addEventListener('browseBookAgain', async () => {
       this.handleBrowseIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'browseagain');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'browseagain'
+      );
     });
 
-    this.addEventListener('autoRenew', () => {
+    this.addEventListener('autoRenew', async () => {
       this.handleLoanRenewNow();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autorenew');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'autorenew'
+      );
     });
 
-    this.addEventListener('autoReturn', () => {
+    this.addEventListener('autoReturn', async () => {
       this.handleReturnIt();
-      this.loanAnanlytics?.storeLoanStatsCount(this.identifier, 'autoreturn');
+      await this.loanAnanlytics?.storeLoanStatsCount(
+        this.identifier,
+        'autoreturn'
+      );
     });
 
     this.addEventListener('returnNow', ({ detail }) => {
@@ -105,6 +115,11 @@ export default class ActionsHandler extends LitElement {
     this.addEventListener('adminAccess', ({ detail }) => {
       const { category, action } = detail.event;
       this.loanAnanlytics?.sendEvent(category, action, this.identifier);
+
+      // keep existing params and add new one
+      const url = new URL(window.location.href);
+      url.searchParams.append('admin', 1);
+      window.location.search = url.search;
     });
 
     this.addEventListener('exitAdminAccess', ({ detail }) => {
@@ -142,25 +157,37 @@ export default class ActionsHandler extends LitElement {
       action,
       identifier: this.identifier,
       success: data => {
-        console.log(
-          'RENEW_LOAN --- ',
-          data,
-          action,
-          data.loan,
-          this.identifier
-        );
-        if (data?.success === true && data?.loan?.renewal === true) {
+        log('RENEW_LOAN --- ', data, action, data.loan, this.identifier);
+        const activeLoan = data.loan ? data.loan : undefined;
+        const isRenewal = activeLoan.renewal;
+
+        if (activeLoan && isRenewal) {
+          // when loan is renewed, let's reset timer & let everyone know.
           this.setBrowseTimeSession();
-          this.dispatchEvent(
-            new CustomEvent('loanAutoRenewed', {
-              detail: { action, data },
-            })
-          );
         } else {
+          log('RENEW_LOAN ERROR --- ', {
+            action,
+            isRenewal,
+            activeLoan,
+            data,
+            id: this.identifier,
+          });
           window?.Sentry?.captureMessage(
             `${sentryLogs.bookRenewFailed} - Error: ${JSON.stringify(data)}`
           );
+          this.dispatchActionError(action, {
+            data,
+            error: true,
+            message: 'Loan renewal failed: no loan active.',
+          });
         }
+
+        // dispatch outcome of loan renewal
+        this.dispatchEvent(
+          new CustomEvent('loanAutoRenewed', {
+            detail: { action, data: { ...data, loan: activeLoan } },
+          })
+        );
       },
       error: data => {
         this.dispatchActionError(action, data);
@@ -322,7 +349,7 @@ export default class ActionsHandler extends LitElement {
       // delete pageChangedTime when book is auto renew at nth minute
       await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
-      console.log(error);
+      log(error);
     }
   }
 

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

@@ -40,7 +40,7 @@ import ActionsConfig from './actions-config.js';
  * @enum {string}
  */
 export const bookTitles = {
-  available_1hr: 'Renews automatically as long as pages are turned.',
+  available_1hr: 'Renews automatically with continued use.',
   available_14d: 'This book can be borrowed for 14 days.',
   available_pd: 'Book available to patrons with print disabilities.',
   available_waitlist: 'A waitlist is available.',
@@ -49,7 +49,7 @@ export const bookTitles = {
   being_borrowed: 'Another patron is using this book. Please check back later.',
   eligible_pd: 'You are eligible for print-disabled access.',
   on_waitlist: 'You are on the waitlist for this book.',
-  session_expired: 'Renews automatically as long as pages are turned.',
+  session_expired: 'Renews automatically with continued use.',
   unavailable: 'This book is not available at this time.',
 };
 

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

@@ -2,6 +2,7 @@
 
 import { analyticsCategories } from '../config/analytics-event-and-category.js';
 import * as Cookies from './doc-cookies.js';
+import log from './log.js';
 
 /**
  * This class is used to send different GA events for loan system.
@@ -45,7 +46,7 @@ export default class LoanAnanlytics {
         '/'
       );
     } catch (error) {
-      console.log(error);
+      log(error);
       this.sendEvent('Cookies-Error-Actions', error, this.identifier);
     }
   }
@@ -144,7 +145,7 @@ export default class LoanAnanlytics {
    * @memberof LoanAnanlytics
    */
   sendEvent(eventCategory, eventAction, label, extraParams) {
-    // console.log(
+    // log(
     //   'eventCategory:-',
     //   eventCategory,
     //   '\t||\teventAction:-',

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

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import { nothing } from 'lit';
+import log from './log.js';
 
 /**
  * This class is used to determine if use is eligible for auto renew loan.
@@ -32,7 +33,7 @@ export class LoanRenewHelper {
       }
       return this.autoChecker(); // auto checker at last 10th minute
     } catch (error) {
-      console.log(error);
+      log(error);
     }
 
     return nothing;

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

@@ -1,3 +1,4 @@
+/* global: window */
 import ActionsHandlerService from './actions-handler/actions-handler-service.js';
 import LoanAnanlytics from './loan-analytics.js';
 import { sentryLogs } from '../config/sentry-events.js';

package/src/core/services/log.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable semi */
+/**
+ * log() utility -- production ignores 'log()' JS calls; dev invokes 'log()'
+ */
+const log =
+  location.hostname === 'localhost' ||
+  location.host.match(/^(www|cat)-[a-z0-9]+\.archive\.org$/) ||
+  location.host.match(/\.code\.archive\.org$/) ||
+  location.host.match(/\.dev\.archive\.org$/) ||
+  location.host.match(/^ia-petabox-/)
+    ? // eslint-disable-next-line no-console
+      console.log.bind(console) // convenient, no?  Stateless function
+    : () => {};
+
+export { log as default };