@internetarchive/ia-book-actions 0.0.29 → 0.1.0

package/demo/index.html

@@ -15,7 +15,7 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
     #demo {
-      height: 50px;
+      height: 100px;
     }
     ia-book-actions {
       --white: #fff;
@@ -72,6 +72,10 @@
       margin: 2px;
     }
 
+    fieldset {
+      display: inline-grid;
+    }
+
     body.modal-manager-open {
       overflow: hidden;
     }
@@ -94,15 +98,17 @@
       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';
 
-    let iaBookActions = document.querySelector('ia-book-actions');
-
-    // for debugging
-    window.iaBookActions = iaBookActions;
 
     const modalConfig = new ModalConfig();
     modalConfig.headerColor = '#d9534f';
@@ -112,6 +118,8 @@
     }
 
     // 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';
@@ -119,10 +127,18 @@
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.modalConfig = modalConfig;
     iaBookActions.lendingBarPostInit = lendingBarPostInit;
-    iaBookActions.tokenDelay = 2000; // 2 seconds
+    iaBookActions.tokenDelay = 2; // 2 seconds
     iaBookActions.returnUrl = 'https://openlibrary.org';
+    iaBookActions.localCache = localCache;
+
+    let loanTotalTime2Min = { loanTotalTime: 20, loanRenewAtLast: 15, pageChangedInLast: 15 };
+    let loanTotalTime5Min = { loanTotalTime: 300, loanRenewAtLast: 180, pageChangedInLast: 15 };
+    let loanTotalTime1Hour = { loanTotalTime: 3600, loanRenewAtLast: 600, 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) => {
@@ -187,12 +203,24 @@
     });
 
     document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
-      item.addEventListener('click', (e) => {
+      item.addEventListener('click', async (e) => {
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
-          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.secondsLeftOnLoan = secondsLeftOnLoan;
           lendingStatus1.browsingExpired = false;
+
+          try {
+            // set a value
+            await localCache.set({
+              key: `${identifier}-loanTime`,
+              value: new Date(), // current time
+              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;
@@ -203,8 +231,11 @@
           lendingStatus1.user_has_browsed = false;
         }
 
-        let lending = {...defaultLendingStatus, ...lendingStatus1};
-        iaBookActions.lendingStatus = lending;
+        // wait for a while
+        setTimeout(() => {
+          let lending = {...defaultLendingStatus, ...lendingStatus1};
+          iaBookActions.lendingStatus = lending;
+        }, 10);
       });
     });
 
@@ -253,6 +284,17 @@
         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,
+        })
+      );
+    })
 </script>
 
   <div>
@@ -263,6 +305,9 @@
             <td class="titleBar">
               <label><input type="checkbox" name="title" value="title" />Title Bar</label>
             </td>
+            <td>
+              <button class="pageChangedEvent">Page Change Event</button>
+            </td>
           </tr>
         </table>
     </fieldset>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29",
+  "version": "0.1.0",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -19,10 +19,11 @@
   },
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
-    "@internetarchive/local-cache": "^0.2.0",
-    "@internetarchive/modal-manager": "^0.2.1",
+    "@internetarchive/local-cache": "^0.2.1",
+    "@internetarchive/modal-manager": "^0.2.8",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "lit": "^2.2.1"
+    "@internetarchive/toast-manager": "0.1.0",
+    "lit": "^2.5.0"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",

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

@@ -12,6 +12,7 @@ export default css`
   }
   .actiongroup {
     display: flex;
+    margin-right: 10px;
   }
   .action-buttons {
     display: inline-flex;
@@ -33,12 +34,12 @@ export default css`
   }
   .primary {
     background-color: ${whiteColor};
+    margin-right: 4px;
   }
   .primary,
   .secondary {
     position: relative;
     border-radius: 5px;
-    margin: 0 3px;
   }
   .primary .initial {
     border-radius: 4px 0 0 4px;

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

@@ -9,6 +9,10 @@ import CollapsibleActionGroupStyle from '../assets/styles/collapsible-action-gro
 
 import { tabletContainerWidth } from '../core/config/constants.js';
 import { purchaseIcon } from '../assets/data/purchase.js';
+import {
+  analyticsCategories,
+  analyticsActions,
+} from '../core/config/analytics-event-and-category.js';
 import {
   dropdownOpened,
   dropdownClosed,
@@ -28,6 +32,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
       dropdownArrow: { type: String },
       disabled: { type: Boolean },
       returnUrl: { type: String },
+      renewNow: { type: Boolean },
     };
   }
 
@@ -47,6 +52,7 @@ export class CollapsibleActionGroup extends ActionsHandler {
     this.loaderIcon = 'https://archive.org/upload/images/tree/loading.gif';
     this.disabled = false;
     this.returnUrl = '';
+    this.renewNow = false;
   }
 
   updated(changed) {
@@ -56,6 +62,27 @@ export class CollapsibleActionGroup extends ActionsHandler {
     ) {
       this.resetActions();
     }
+
+    if (changed.has('renewNow') && this.renewNow === true) {
+      this.dispatchLoanRenewEvent();
+    }
+  }
+
+  // dispatch this event to loan renew handler
+  dispatchLoanRenewEvent() {
+    const { category, action } = {
+      category: analyticsCategories.browse,
+      action: analyticsActions.browseLoanRenew,
+    };
+
+    // listen in action-handler.js to execute ajax call on petabox.
+    this.dispatchEvent(
+      new CustomEvent('loanRenew', {
+        detail: {
+          event: { category, action },
+        },
+      })
+    );
   }
 
   /**

package/src/components/info-icon.js

@@ -43,21 +43,12 @@ export class InfoIcon extends LitElement {
         vertical-align: middle;
         --iconFillColor: white;
       }
-      .more-info-icon {
-        margin-left: 10px;
-      }
       .more-info-icon img {
         width: 24px;
         height: 24px;
         vertical-align: middle;
         background: white;
       }
-      .more-info-icon.mobile {
-        position: absolute;
-        top: 4px;
-        right: 10px;
-        margin-top: 15px;
-      }
       .hidden {
         display: none;
       }

package/src/components/text-group.js

@@ -26,7 +26,7 @@ export class TextGroup extends LitElement {
         display: inline-block;
       }
       .variable-texts {
-        margin-left: 10px;
+        margin-right: 10px;
         vertical-align: middle;
         font-size: 1.7rem;
       }

package/src/components/timer-countdown.js

@@ -0,0 +1,178 @@
+import { html, css, LitElement } from 'lit';
+import { sentryLogs } from '../core/config/sentry-events.js';
+
+export default class TimerCountdown extends LitElement {
+  static get properties() {
+    return {
+      secondsLeftOnLoan: { type: Number }, // in seconds
+      loanTotalTime: { type: Number }, // in seconds
+      loanRenewAtLast: { type: Number }, // in seconds
+    };
+  }
+
+  constructor() {
+    super();
+
+    /**
+     * seconds left in current loan
+     * @type {number}
+     */
+    this.secondsLeftOnLoan = 0;
+
+    /**
+     * total seconds a loan does have
+     * @type {number}
+     */
+    this.loanTotalTime = 0;
+
+    /**
+     * at the remaining time, we attempt to renew current loan
+     * @type {number}
+     */
+    this.loanRenewAtLast = 0;
+
+    /**
+     * setInterval executed interval
+     * @type {number}
+     */
+    this.timerInterval = undefined;
+
+    /**
+     * delay seconds in setInterval function
+     * @type {number}
+     */
+    this.timerExecutionSeconds = 0;
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timerInterval);
+  }
+
+  updated(changed) {
+    if (changed.has('secondsLeftOnLoan') && this.secondsLeftOnLoan > 0) {
+      clearInterval(this.timerInterval);
+      this.timerCountdown();
+    }
+  }
+
+  timerCountdown() {
+    // - let just execute setInterval in every 1 minute
+    this.timerExecutionSeconds = 60;
+
+    this.timerInterval = setInterval(() => {
+      this.secondsLeftOnLoan -= this.timerExecutionSeconds;
+      const secondsLeft = Math.round(this.secondsLeftOnLoan);
+
+      /**
+       * execute from last 10th minute to 0th minute
+       * - 10th - to check if user has viewed
+       * - till 0th - to show warning msg with remaining time to auto expired
+       * @see IABookActions::bindLoanRenewEvents
+       */
+      if (secondsLeft <= this.loanRenewAtLast) {
+        this.dispatchEvent(
+          new CustomEvent('IABookActions:loanRenew', {
+            detail: {
+              hasPageChanged: false,
+              secondsLeft,
+            },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+
+      // clear interval
+      if (secondsLeft <= 60) {
+        clearInterval(this.timerInterval);
+        window?.Sentry?.captureMessage(sentryLogs.clearOneHourTimer);
+      }
+    }, this.timerExecutionSeconds * 1000);
+  }
+
+  /**
+   * get remaining time with timeunit
+   *
+   * @memberof TimerCountdown
+   * @return string
+   */
+  get remainingTime() {
+    const unitOfTime = 'minute';
+    let timeLeft = Math.round(this.secondsLeftOnLoan);
+
+    // convert time from second to minute
+    timeLeft = Math.ceil(timeLeft / 60);
+
+    return timeLeft !== 1
+      ? `${timeLeft} ${unitOfTime}s`
+      : `${timeLeft} ${unitOfTime}`;
+  }
+
+  render() {
+    return html`
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle class="circle" cx="50" cy="50" r="50" />
+      </svg>
+      <span class="sr-only">${this.remainingTime}</span>
+      <span>${this.remainingTime}</span>
+    `;
+  }
+
+  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: 5px;
+        position: absolute;
+      }
+
+      @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 {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        margin: 0;
+        padding: 0;
+        border: none;
+        overflow: hidden;
+      }
+    `;
+  }
+}
+
+window.customElements.define('timer-countdown', TimerCountdown);

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

@@ -13,6 +13,7 @@ export const analyticsCategories = {
 export const analyticsActions = {
   browse: 'Borrow-1Hour',
   browseAgain: 'Borrow-Again',
+  browseLoanRenew: 'Borrow-Loan-Renew',
   borrow: 'Borrow-14Days',
   waitlistJoin: 'JoinWaitlist',
   waitlistLeave: 'LeaveWaitlist',

package/src/core/config/sentry-events.js

@@ -0,0 +1,20 @@
+/**
+ * sentry logs/messages we send for different actions....
+ */
+export const sentryLogs = {
+  disconnectedCallback: 'IABookActions:disconnectedCallback',
+  bookHasRenewed:
+    'IABookActions:handleLoanAutoRenewed - book has renewed for next one hour',
+  browseHasExpired:
+    'IABookActions:browseHasExpired - one-hour loan has been expired',
+  bookWasExpired:
+    'IABookActions:setupLendingToolbarActions - book was expired at intial, no tokenPoller',
+  clearTokenPoller:
+    'IABookActions:startLoanTokenPoller - clearing token poller interval',
+  clearOneHourTimer:
+    'IABookActions:timerCountdown - one-hour timer interval cleared',
+  bookAccessed: 'IABookActions:bookAccessed',
+  handleLoanTokenPoller: 'IABookActions:handleLoanTokenPoller',
+  setConsecutiveLoanCounts: 'IABookActions:setConsecutiveLoanCounts',
+  actionsHandlerService: 'IABookActions:actionsHandlerService',
+};

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

@@ -36,7 +36,7 @@ export default class ActionsConfig {
   firstBrowseConfig() {
     return {
       id: 'browseBook',
-      text: 'Borrow for 1 hour',
+      text: 'Borrow',
       className: 'primary',
       analyticsEvent: {
         category: this.analyticsCategories.preview,
@@ -48,7 +48,7 @@ export default class ActionsConfig {
   browseAgainConfig() {
     return {
       id: 'browseBookAgain',
-      text: 'Borrow again',
+      text: 'Borrow',
       className: 'primary',
       analyticsEvent: {
         category: this.analyticsCategories.browse,

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

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import { sentryLogs } from '../../config/sentry-events.js';
 
 /**
  * Helper to call loan service
@@ -64,7 +65,9 @@ export default async function ActionsHandlerService(options) {
           option?.error(data);
         }
       });
-  } catch (err) {
-    window?.Sentry?.captureException(err);
+  } catch (error) {
+    window?.Sentry?.captureException(
+      `${sentryLogs.actionsHandlerService} - Error: ${error}`
+    );
   }
 }

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

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
+import { sentryLogs } from '../../config/sentry-events.js';
+
 import ActionsHandlerService from './actions-handler-service.js';
 import * as Cookies from '../doc-cookies.js';
 
@@ -15,10 +17,14 @@ import * as Cookies from '../doc-cookies.js';
 export default class ActionsHandler extends LitElement {
   constructor() {
     super();
-    this.identifier = '';
-    this.ajaxTimeout = 6000;
+
+    /**
+     * wait untill borrow is complete, then refresh the page
+     * @type {number}
+     */
+    this.waitUntillBorrowComplete = 6; // in seconds
+
     this.bindEvents();
-    this.returnUrl = '';
   }
 
   sendEvent(eventCategory, eventAction) {
@@ -44,6 +50,12 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
+    this.addEventListener('loanRenew', ({ detail }) => {
+      this.handleLoanRenew();
+      const { category, action } = detail.event;
+      this.sendEvent(category, action);
+    });
+
     this.addEventListener('returnNow', ({ detail }) => {
       this.handleReturnIt();
       const { category, action } = detail.event;
@@ -103,6 +115,7 @@ export default class ActionsHandler extends LitElement {
       action,
       identifier: this.identifier,
       success: () => {
+        this.setBrowseTimeSession();
         this.handleReadItNow();
       },
       error: data => {
@@ -111,6 +124,26 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
+  handleLoanRenew() {
+    const action = 'renew_loan';
+
+    ActionsHandlerService({
+      action,
+      identifier: this.identifier,
+      success: data => {
+        this.setBrowseTimeSession();
+        this.dispatchEvent(
+          new CustomEvent('loanAutoRenewed', {
+            detail: { action, data },
+          })
+        );
+      },
+      error: data => {
+        this.dispatchActionError(action, data);
+      },
+    });
+  }
+
   handleReturnIt() {
     const action = 'return_loan';
     this.dispatchToggleActionGroup();
@@ -235,7 +268,7 @@ export default class ActionsHandler extends LitElement {
     // redirection on details page after 5 seconds because borrowing book takes time to create item creation.
     setTimeout(() => {
       URLHelper.goToUrl(redirectTo, true);
-    }, this.ajaxTimeout);
+    }, this.waitUntillBorrowComplete * 1000);
   }
 
   // save consecutive loan count for borrow
@@ -256,11 +289,36 @@ export default class ActionsHandler extends LitElement {
       // set new value
       Cookies.setItem(storageKey, newCount, date, '/');
     } catch (error) {
-      window?.Sentry?.captureException(error);
+      window?.Sentry?.captureException(
+        `${sentryLogs.setConsecutiveLoanCounts} - Error: ${error}`
+      );
       this.sendEvent('Cookies-Error-Actions', error);
     }
   }
 
+  /**
+   * set browse time in indexedDB
+   */
+  async setBrowseTimeSession() {
+    try {
+      const expireDate = new Date(
+        new Date().getTime() + this.loanTotalTime * 1000
+      );
+
+      // set a value
+      await this.localCache.set({
+        key: `${this.identifier}-loanTime`,
+        value: expireDate,
+        ttl: Number(this.loanTotalTime),
+      });
+
+      // delete pageChangedTime when book is auto renew at nth minute
+      await this.localCache.delete(`${this.identifier}-pageChangedTime`);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   deleteLoanCookies() {
     const date = new Date();
     date.setTime(date.getTime() - 24 * 60 * 60 * 1000); // one day ago

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

@@ -19,7 +19,7 @@ import ActionsConfig from './actions-config.js';
  *
  * Response of this class contain an object as follows:-
  * {
- *   primaryTitle: 'Renewable every hour, pending availability.',
+ *   primaryTitle: '',
  *   primaryActions: [this.actionsConfig.returnBookConfig()],
  *   primaryColor: 'primary',
  *   secondaryActions: [this.actionsConfig.purchaseConfig()],
@@ -40,7 +40,7 @@ import ActionsConfig from './actions-config.js';
  * @enum {string}
  */
 export const bookTitles = {
-  available_1hr: 'Renewable every hour, pending availability.',
+  available_1hr: '',
   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: 'Your loan has expired.',
+  session_expired: '',
   unavailable: 'This book is not available at this time.',
 };
 
@@ -98,7 +98,7 @@ export class GetLendingActions {
     let isBrowsing =
       lendingStatus.user_has_browsed && !lendingStatus.browsingExpired;
     if (isBrowsing) {
-      primaryTitleText = this.getBrowseCountdownTitle();
+      primaryTitleText = '';
     } else {
       primaryTitleText = `Your loan of this book has ${lendingStatus.daysLeftOnLoan} days left.`;
     }
@@ -251,13 +251,6 @@ export class GetLendingActions {
   borrow1HrAction() {
     const lendingStatus = this.lendingStatus || {};
 
-    const possibleTitles = {
-      one_hour: 'Renewable every hour, pending availability.',
-      session_tryagain:
-        'Another patron is using this book. Please check back later.',
-      session_expired: 'Your loan has expired.',
-    };
-
     // assess borrowable state
     const browsingHasExpired =
       !lendingStatus.available_to_browse && lendingStatus.browsingExpired;
@@ -364,6 +357,8 @@ export class GetLendingActions {
   }
 
   /**
+   * @deprecated
+   *
    * Builds the countdown toolbar title.
    *
    * @return string innerHTML for the dialogOpts title attribute