@internetarchive/ia-book-actions 0.0.29-alpha21 → 0.0.29-alpha23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.29-alpha21",
+  "version": "0.0.29-alpha23",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -22,7 +22,7 @@
     "@internetarchive/local-cache": "^0.2.0",
     "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "@internetarchive/toast-manager": "0.0.1-alpha8",
+    "@internetarchive/toast-manager": "0.0.1-alpha9",
     "lit": "^2.5.0"
   },
   "devDependencies": {

package/src/assets/data/lending-get-status-service.js

@@ -118,7 +118,7 @@ export const canBrowseAndBorrow = {
   loanStartDate: '2021-07-30 09:57:40',
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 3591,
+  secondsLeftOnLoan: 12,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,

package/src/components/info-icon.js

@@ -49,12 +49,6 @@ export class InfoIcon extends LitElement {
         vertical-align: middle;
         background: white;
       }
-      .more-info-icon.mobile {
-        position: absolute;
-        top: 4px;
-        right: 55px;
-        margin-top: 15px;
-      }
       .hidden {
         display: none;
       }

package/src/components/timer-countdown.js

@@ -58,55 +58,53 @@ export default class TimerCountdown extends LitElement {
   render() {
     return html`
       <svg
-        width="30"
-        height="30"
+        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>${Math.round(this.time)}</span>
     `;
   }
 
   static get styles() {
     const white = css`var(--white, #fff)`;
-    const secondsLeft = css`var(--secondsLeft, 60s)`;
+    const timerSecondsLeft = css`var(--timerSeconds, 6000s)`;
+    const timerStrokeLeft = css`var(--timerStroke, 315)`;
 
     return css`
       :host {
         right: 5px;
-        font-size: 14px;
         position: absolute;
       }
 
       @keyframes circletimer {
         0% {
-          stroke-dashoffset: 320;
-          stroke-dasharray: 320;
+          stroke-dashoffset: ${timerStrokeLeft};
+          stroke-dasharray: 315;
         }
         100% {
           stroke-dashoffset: 0;
-          stroke-dasharray: 320;
+          stroke-dasharray: 315;
         }
       }
 
       svg {
-        background-color: transparent;
-        position: absolute;
-        top: 50%;
-        right: 0;
+        background-color: ${white};
         border-radius: 50px;
         border: 2px solid ${white};
-        transform: translate(-50%, -50%) rotateZ(-90deg);
+        transform: rotateZ(-90deg);
       }
 
       svg .circle {
-        stroke: ${white};
+        stroke: #000;
         stroke-width: 100px;
-        fill: transparent;
-        stroke-dashoffset: 320;
+        fill: ${white};
+        stroke-dashoffset: 315;
         stroke-dasharray: 0;
-        animation: ${secondsLeft} circletimer linear;
+        animation: ${timerSecondsLeft} circletimer linear;
       }
     `;
   }

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', // changed texts from 'Borrow for 1 hour' to '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', // changed texts fro 'Borrow again' to 'Borrow'
       className: 'primary',
       analyticsEvent: {
         category: this.analyticsCategories.browse,

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

@@ -5,8 +5,9 @@ import { ToastConfig } from '@internetarchive/toast-manager';
  * This class is used to determine if use is eligible for auto renew loan.
  */
 export class LoanRenewHelper {
-  constructor(hasPageChanged, identifier, localCache, loanRenewConfig) {
+  constructor(hasPageChanged, hideToast, identifier, localCache, loanRenewConfig) {
     this.hasPageChanged = hasPageChanged;
+    this.hideToast = hideToast;
     this.identifier = identifier;
     this.localCache = localCache;
     this.loanRenewConfig = loanRenewConfig;
@@ -64,6 +65,7 @@ export class LoanRenewHelper {
     if (currentTime >= lastTimeFrame) {
       this.result.texts = this.loanRenewMessage;
       this.result.renewNow = true;
+      console.log('manually renewed by page click!');
     }
 
     this.setPageChangedTime();
@@ -97,9 +99,11 @@ export class LoanRenewHelper {
       this.result.texts = this.loanReturnWarning;
       this.result.renewNow = false; // not viewed
       this.showToastMessage();
+      console.log('not viewed!');
     } else if (lastPageFlipTime >= lastFlipTimeFrame) {
       this.result.texts = '';
       this.result.renewNow = true; // viewed in last time frame
+      console.log('silently renewed!');
     }
 
     return this.result;
@@ -123,6 +127,8 @@ export class LoanRenewHelper {
    * - show warninig msg when book is about to auto returned
    */
   async showToastMessage() {
+    if (this.hideToast) return false;
+
     const iaBookActions = document.querySelector('ia-book-actions').shadowRoot;
     let toastTemplate = iaBookActions.querySelector('toast-template');
     if (!toastTemplate) {
@@ -148,7 +154,7 @@ export class LoanRenewHelper {
    * @returns {Object} Date
    */
   changeTime(date, minutes, op) {
-    if (date === undefined) return nothing;
+    if (date === undefined) return null;
 
     if (op === 'sub') {
       return new Date(date.getTime() - minutes * 1000);

package/src/ia-book-actions.js

@@ -73,6 +73,7 @@ export default class IABookActions extends LitElement {
     // loan auto renew
     this.browserTimer = undefined;
     this.loanRenewConfig = {};
+    this.hideToast = false;
 
     /**
      * contains loan auto-renew response
@@ -232,15 +233,20 @@ export default class IABookActions extends LitElement {
    */
   bindLoanRenewEvents() {
     // dispatched this event from bookreader page changed
-    window.addEventListener('BookReader:pageChanged', () => {
-      // early return if book is not browsed (1 hour borrow)
-      if (this.borrowType === 'browsed') {
+    window.addEventListener('BookReader:pageChanged', event => {
+      if (this.borrowType === 'browsed' && event.detail.hasPageChanged) {
         this.autoLoanRenewChecker(true);
       }
 
       return nothing;
     });
 
+    document.addEventListener('click', () => {
+      if (this.loanRenewHelper && this.loanRenewHelper.result.renewNow === false) {
+        this.hideToast = true;
+      }
+    });
+
     /**
      * this event dispatched from timer-countdown component for:
      * 1. user turned book page after showing auto-returned warning message
@@ -262,12 +268,14 @@ export default class IABookActions extends LitElement {
   async autoLoanRenewChecker(hasPageChanged = false) {
     this.loanRenewHelper = new LoanRenewHelper(
       hasPageChanged,
+      this.hideToast,
       this.identifier,
       this.localCache,
       this.loanRenewConfig
     );
 
     await this.loanRenewHelper.handleLoanRenew();
+    console.log(this.loanRenewResult);
     this.loanRenewResult = this.loanRenewHelper.result;
   }
 
@@ -327,12 +335,26 @@ export default class IABookActions extends LitElement {
    * Reset timer animation state after book renewed
    */
   async resetTimerCountState() {
+    const secondsLeft = Number(this.lendingStatus.secondsLeftOnLoan);
+
     const timerCountdown = this.shadowRoot.querySelector('timer-countdown');
     const animationCircle = timerCountdown.shadowRoot.querySelector('.circle');
 
+    // the perimeter of the circle
+    const circleStroke = 315;  // (π * 2 * radius)
+    const strokeDashOffset =
+      (secondsLeft / this.loanRenewConfig.totalTime) *
+      circleStroke;
+
+    // set seconds left in loan expire
+    timerCountdown.style?.setProperty(
+      '--timerSeconds',
+      `${secondsLeft}s`
+    );
+    // set circle stroke offset left in loan expire
     timerCountdown.style?.setProperty(
-      '--secondsLeft',
-      `${Number(this.lendingStatus.secondsLeftOnLoan)}s`
+      '--timerStroke',
+      `${Number(strokeDashOffset)}`
     );
 
     animationCircle.style.animationName = 'none';
@@ -403,6 +425,7 @@ export default class IABookActions extends LitElement {
    */
   async handleLoanAutoRenewed() {
     if (this.loanRenewResult.renewNow) {
+      this.hideToast = false;
       this.tokenPoller.disconnectedInterval();
       await this.loanRenewHelper.showToastMessage();
       await this.browseHasRenew();

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

@@ -6,7 +6,7 @@ const container = ({
     {
       analyticsEvent: { action: 'Browse', category: 'Lending' },
       className: 'ia-button primary',
-      text: 'Borrow for 1 hour',
+      text: 'Borrow',
       id: 'browseBook',
     },
     {
@@ -40,7 +40,7 @@ describe('<collapsible-action-group>', () => {
       .true;
 
     const primaryButton = primaryActionContainer.querySelector('.ia-button');
-    expect(primaryButton.innerText).to.equal('Borrow for 1 hour');
+    expect(primaryButton.innerText).to.equal('Borrow');
   });
 
   it('check if loader is active and action-group is disabled', async () => {

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

@@ -25,7 +25,7 @@ describe('Get Lending Actions', () => {
 
     expect(actions.primaryTitle).to.equal(bookTitles.available_1hr);
     expect(actions.primaryActions.length).to.equal(3);
-    expect(actions.primaryActions[0].text).to.equal('Borrow for 1 hour');
+    expect(actions.primaryActions[0].text).to.equal('Borrow');
     expect(actions.primaryActions[1].text).to.equal('Borrow for 14 days');
     expect(actions.secondaryActions[1].text).to.equal('Purchase at');
   });
@@ -111,7 +111,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.claim_waitlist);
         expect(actions.primaryActions.length).to.equal(3);
         expect(actions.primaryActions[0].text).to.equal('Borrow for 14 days');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(actions.primaryActions[2].text).to.equal('Leave Waitlist');
         expect(spy.called).to.be.true;
       });
@@ -138,7 +138,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(claimSpy.called).to.be.false;
         expect(waitlistSpy.called).to.be.true;
       });
@@ -162,7 +162,7 @@ describe('Get Lending Actions', () => {
         expect(actions.primaryTitle).to.equal(bookTitles.on_waitlist);
         expect(actions.primaryActions.length).to.equal(2);
         expect(actions.primaryActions[0].text).to.equal('Leave Waitlist');
-        expect(actions.primaryActions[1].text).to.equal('Borrow for 1 hour');
+        expect(actions.primaryActions[1].text).to.equal('Borrow');
         expect(waitlistSpy.called).to.be.true;
       });
     });

package/test/ia-book-actions.test.js

@@ -81,7 +81,7 @@ describe('Primary Actions data', () => {
     );
     const expectedPrimaryActions = [
       {
-        text: 'Borrow for 1 hour',
+        text: 'Borrow', // changed from 'Borrow for 1 hour'
         callback: () => {},
         className: 'ia-button primary',
       },
@@ -161,7 +161,7 @@ describe('Borrow status actions', () => {
 
     // removed available_to_borrow from lending bar
     expect(el.lendingStatus.available_to_borrow).to.be.false;
-    expect(el.primaryActions[0].text).to.equal('Borrow for 1 hour');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
   });
 
   it('Check action for borrowable book without user', async () => {
@@ -251,7 +251,7 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 second
     await el.updateComplete;
 
-    expect(el.primaryActions[0].text).to.equal('Borrow again');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
   });
 
   it('Expiring book cancels interval & emits event', async () => {
@@ -286,7 +286,7 @@ describe('Browsing expired status', () => {
     await aTimeout(1500); // wait for 1.5 sec
 
     expect(eventReceived).to.equal(true);
-    expect(el.primaryActions[0].text).to.equal('Borrow again');
+    expect(el.primaryActions[0].text).to.equal('Borrow');
     expect(el.tokenPoller.loanTokenInterval).to.equal(undefined);
   });
 });