@internetarchive/ia-book-actions 0.0.29-alpha9 → 0.1.0

package/src/components/timer-countdown.js

@@ -1,20 +1,47 @@
 import { html, css, LitElement } from 'lit';
+import { sentryLogs } from '../core/config/sentry-events.js';
 
 export default class TimerCountdown extends LitElement {
   static get properties() {
     return {
-      time: { type: Number },
-      autoCheckAt: { type: Number },
-      resetTimerCountdown: { type: Boolean },
+      secondsLeftOnLoan: { type: Number }, // in seconds
+      loanTotalTime: { type: Number }, // in seconds
+      loanRenewAtLast: { type: Number }, // in seconds
     };
   }
 
   constructor() {
     super();
-    this.time = 0;
-    this.autoCheckAt = 0;
+
+    /**
+     * 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;
-    this.resetTimerCountdown = false;
+
+    /**
+     * delay seconds in setInterval function
+     * @type {number}
+     */
+    this.timerExecutionSeconds = 0;
   }
 
   disconnectedCallback() {
@@ -22,23 +49,32 @@ export default class TimerCountdown extends LitElement {
   }
 
   updated(changed) {
-    if (changed.has('time') && this.time > 0) {
+    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.time -= 1;
+      this.secondsLeftOnLoan -= this.timerExecutionSeconds;
+      const secondsLeft = Math.round(this.secondsLeftOnLoan);
 
-      // execute 50th minute check
-      if (Math.round(this.time) === this.autoCheckAt) {
+      /**
+       * 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('autoRenewAttempt', {
+          new CustomEvent('IABookActions:loanRenew', {
             detail: {
-              remainingT: this.time,
-              bookPageChange: false,
+              hasPageChanged: false,
+              secondsLeft,
             },
             bubbles: true,
             composed: true,
@@ -46,65 +82,94 @@ export default class TimerCountdown extends LitElement {
         );
       }
 
-      if (this.time === 0) clearInterval(this.timerInterval);
-    }, 1000);
+      // 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`<div id="countdown">
-      <div id="countdown-number">${Math.round(this.time)}</div>
-      <svg>
-        <circle r="18" cx="20" cy="20"></circle>
+    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>
-    </div>`;
+      <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;
-        font-size: 14px;
         position: absolute;
       }
-      #countdown-number {
-        color: white;
-        display: inline-block;
-        line-height: 40px;
-        margin-right: 12px;
+
+      @keyframes circletimer {
+        0% {
+          stroke-dashoffset: ${timerStrokeLeft};
+          stroke-dasharray: 315;
+        }
+        100% {
+          stroke-dashoffset: 0;
+          stroke-dasharray: 315;
+        }
       }
 
       svg {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 40px;
-        height: 40px;
-        transform: rotateY(-180deg) rotateZ(-90deg);
+        background-color: ${white};
+        border-radius: 50px;
+        border: 2px solid ${white};
+        transform: rotateZ(-90deg);
       }
 
-      svg circle {
-        stroke-dasharray: 113px;
-        stroke-dashoffset: 0px;
-        stroke-linecap: round;
-        stroke-width: 3px;
-        stroke: white;
-        fill: none;
-        animation: countdown 60s linear infinite forwards;
+      svg .circle {
+        stroke: #000;
+        stroke-width: 100px;
+        fill: ${white};
+        stroke-dashoffset: 315;
+        stroke-dasharray: 0;
+        animation: ${timerSecondsLeft} circletimer linear;
       }
 
-      @keyframes countdown {
-        from {
-          stroke-dashoffset: 0px;
-        }
-        to {
-          stroke-dashoffset: 113px;
-        }
-      }
-      .hidden {
-        display: none;
-      }
-      .visible {
-        display: inline-block;
+      .sr-only {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        margin: 0;
+        padding: 0;
+        border: none;
+        overflow: hidden;
       }
     `;
   }

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,13 @@ import * as Cookies from '../doc-cookies.js';
 export default class ActionsHandler extends LitElement {
   constructor() {
     super();
-    this.identifier = '';
-    this.ajaxTimeout = 6000;
-    this.returnUrl = '';
-    this.autoRenewConfig = {};
+
+    /**
+     * wait untill borrow is complete, then refresh the page
+     * @type {number}
+     */
+    this.waitUntillBorrowComplete = 6; // in seconds
+
     this.bindEvents();
   }
 
@@ -30,7 +35,7 @@ export default class ActionsHandler extends LitElement {
     );
   }
 
-  async bindEvents() {
+  bindEvents() {
     this.addEventListener('browseBook', ({ detail }) => {
       this.handleBrowseIt();
       this.setConsecutiveLoanCounts();
@@ -45,9 +50,8 @@ export default class ActionsHandler extends LitElement {
       this.sendEvent(category, action);
     });
 
-    this.addEventListener('autoBrowseBook', ({ detail }) => {
-      console.log('auto renew handlerExecuted!!');
-      this.handleAutoBrowseIt();
+    this.addEventListener('loanRenew', ({ detail }) => {
+      this.handleLoanRenew();
       const { category, action } = detail.event;
       this.sendEvent(category, action);
     });
@@ -106,12 +110,12 @@ export default class ActionsHandler extends LitElement {
   handleBrowseIt() {
     const action = 'browse_book';
     this.dispatchToggleActionGroup();
-    this.setBrowseTimeSession();
 
     ActionsHandlerService({
       action,
       identifier: this.identifier,
       success: () => {
+        this.setBrowseTimeSession();
         this.handleReadItNow();
       },
       error: data => {
@@ -120,15 +124,19 @@ export default class ActionsHandler extends LitElement {
     });
   }
 
-  handleAutoBrowseIt() {
+  handleLoanRenew() {
     const action = 'renew_loan';
-    this.setBrowseTimeSession();
 
     ActionsHandlerService({
       action,
       identifier: this.identifier,
-      success: () => {
-        // console.log('success!');
+      success: data => {
+        this.setBrowseTimeSession();
+        this.dispatchEvent(
+          new CustomEvent('loanAutoRenewed', {
+            detail: { action, data },
+          })
+        );
       },
       error: data => {
         this.dispatchActionError(action, data);
@@ -260,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
@@ -281,21 +289,31 @@ 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: new Date(), // current time
-        ttl: Number(this.autoRenewConfig.totalTime),
+        value: expireDate,
+        ttl: Number(this.loanTotalTime),
       });
 
-      await this.localCache.delete(`${this.identifier}-pageFlipTime`);
+      // delete pageChangedTime when book is auto renew at nth minute
+      await this.localCache.delete(`${this.identifier}-pageChangedTime`);
     } catch (error) {
       console.log(error);
     }

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

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

@@ -0,0 +1,161 @@
+/* eslint-disable class-methods-use-this */
+
+import { nothing } from 'lit';
+
+/**
+ * This class is used to determine if use is eligible for auto renew loan.
+ */
+export class LoanRenewHelper {
+  constructor(hasPageChanged, identifier, localCache, loanRenewTimeConfig) {
+    this.hasPageChanged = hasPageChanged;
+    this.identifier = identifier;
+    this.localCache = localCache;
+    this.loanRenewTimeConfig = loanRenewTimeConfig;
+
+    // messages for auto return machenism
+    this.loanRenewMessage = 'This book has been renewed for 1 hour.';
+    this.loanReturnWarning =
+      'This book will be automatically returned in #time #unitsOfTime unless you turn a page.';
+
+    // private props
+    this.result = {
+      texts: null,
+      renewNow: false,
+    };
+  }
+
+  handleLoanRenew() {
+    try {
+      if (this.hasPageChanged) {
+        return this.pageChanged(); // user clicked on page
+      }
+      return this.autoChecker(); // auto checker at last 10th minute
+    } catch (error) {
+      console.log(error);
+    }
+
+    return nothing;
+  }
+
+  /**
+   * Trigger this function when user has browsed a book and change the post
+   * - every time user change the page, we set current time in indexedDB
+   * - also check if need to auto renew current loan
+   *
+   * @returns {this.result}
+   */
+  async pageChanged() {
+    const {
+      loanTotalTime, // 60
+      loanRenewAtLast, // 50
+    } = this.loanRenewTimeConfig;
+    const currentTime = new Date();
+    const loanTime = await this.localCache.get(`${this.identifier}-loanTime`);
+
+    const lastTimeFrame = this.changeTime(
+      loanTime,
+      loanTotalTime - loanRenewAtLast,
+      'add'
+    );
+
+    // 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.setPageChangedTime();
+    return this.result;
+  }
+
+  /**
+   * Trigger this function when countdown hits at last 10th minute
+   * - if user is active, just renew the loan at last 10th minute
+   *
+   * @returns {this.result}
+   */
+  async autoChecker() {
+    const { pageChangedInLast } = this.loanRenewTimeConfig;
+    const pageChangedTime = await this.localCache.get(
+      `${this.identifier}-pageChangedTime`
+    );
+
+    // in last 15 min if user make any activity.
+    const pageChangeTimeFrame = this.changeTime(
+      new Date(),
+      pageChangedInLast,
+      'sub'
+    ); // 15 seconds
+
+    if (
+      pageChangedTime === undefined ||
+      pageChangedTime <= pageChangeTimeFrame
+    ) {
+      this.result.texts = this.loanReturnWarning;
+      this.result.renewNow = false; // not viewed
+    } else if (pageChangedTime >= pageChangeTimeFrame) {
+      this.result.texts = '';
+      this.result.renewNow = true; // viewed in last time frame
+    }
+
+    return this.result;
+  }
+
+  /**
+   * set current time in indexedDB when user viewed a new page
+   */
+  async setPageChangedTime() {
+    await this.localCache.set({
+      key: `${this.identifier}-pageChangedTime`,
+      value: new Date(), // current time
+      ttl: Number(this.loanRenewTimeConfig.loanTotalTime),
+    });
+  }
+
+  /**
+   * Texts we want to show in toast template including remaining time
+   * - eg. 1 minute, 2 minutes
+   *
+   * @param {String} texts
+   * @param {Number} secondsLeft
+   *
+   * @returns {String} // texts will be appear in toast template
+   */
+  getMessageTexts(texts, secondsLeft) {
+    const unitOfTime = 'minute';
+
+    let toastTexts = texts;
+    let timeLeft = secondsLeft;
+
+    // convert time from second to minute
+    timeLeft = Math.ceil(timeLeft / 60);
+
+    // replace #time variable with remaining time
+    toastTexts = toastTexts?.replace(/#time/, timeLeft);
+
+    // replace #unitsOfTime variable with minute/minutes
+    return toastTexts?.replace(
+      /#unitsOfTime/,
+      timeLeft !== 1 ? `${unitOfTime}s` : unitOfTime
+    );
+  }
+
+  /**
+   * Helper function to get time difference
+   *
+   * @param {Date} date
+   * @param {Number} seconds
+   * @param {String} op - like sub, add, mul, sub
+   *
+   * @returns {Object} Date
+   */
+  changeTime(date, seconds, op) {
+    if (date === undefined) return null;
+
+    if (op === 'sub') {
+      return new Date(date.getTime() - seconds * 1000);
+    }
+
+    return new Date(date.getTime() + seconds * 1000);
+  }
+}