@internetarchive/ia-book-actions 0.0.5 → 0.0.6-4

package/src/ia-book-actions.js

@@ -1,8 +1,10 @@
+/* eslint-disable camelcase */
 import { html, css, LitElement } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 
 import './components/collapsible-action-group.js';
+import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
 
@@ -14,10 +16,13 @@ export default class IABookActions extends LitElement {
     return {
       userid: { type: String },
       identifier: { type: String },
+      bookTitle: { type: String },
       lendingStatus: { type: Object },
       width: { type: Number },
       bwbPurchaseUrl: { type: String },
+      barType: { type: String },
       sharedObserver: { attribute: false },
+      disable: { type: Boolean },
     };
   }
 
@@ -25,15 +30,18 @@ export default class IABookActions extends LitElement {
     super();
     this.userid = '';
     this.identifier = '';
+    this.bookTitle = '';
     this.lendingStatus = {};
+    this.width = 0;
+    this.bwbPurchaseUrl = '';
+    this.barType = 'action'; // 'title'|'action'
+    this.sharedObserver = undefined;
     this.primaryActions = [];
     this.primaryTitle = '';
     this.primaryColor = 'primary';
     this.secondaryActions = [];
-    this.width = 0;
-    this.bwbPurchaseUrl = '';
-    this.lendingOptions = [];
-    this.sharedObserver = undefined;
+    this.lendingOptions = {};
+    this.disable = false;
   }
 
   disconnectedCallback() {
@@ -60,6 +68,27 @@ export default class IABookActions extends LitElement {
     }
   }
 
+  browseHasExpired() {
+    const currStatus = { ...this.lendingStatus, browsingExpired: true };
+    this.lendingStatus = currStatus;
+  }
+
+  startBrowseTimer() {
+    const {
+      browsingExpired,
+      user_has_browsed,
+      secondsLeftOnLoan,
+    } = this.lendingStatus;
+    if (!user_has_browsed || browsingExpired) {
+      return;
+    }
+
+    const timeLeft = secondsLeftOnLoan * 1000;
+    setTimeout(() => {
+      this.browseHasExpired();
+    }, timeLeft);
+  }
+
   /** SharedObserver resize handler */
   handleResize(entry) {
     // if you are observing multiple targets,
@@ -111,26 +140,63 @@ export default class IABookActions extends LitElement {
     this.secondaryActions = actions.secondaryActions.filter(action => {
       return action != null;
     });
+
+    if (
+      this.lendingStatus.user_has_browsed &&
+      !this.lendingStatus.browseHasExpired
+    ) {
+      this.startBrowseTimer();
+    }
   }
 
   render() {
     return html`
       <section class="lending-wrapper">
-        <collapsible-action-group
-          .userid=${this.userid}
-          .identifier=${this.identifier}
-          .primaryColor=${this.primaryColor}
-          .primaryActions=${this.primaryActions}
-          .secondaryActions=${this.secondaryActions}
-          .width=${this.width}
-          .hasAdminAccess=${this.hasAdminAccess}
-        >
-        </collapsible-action-group>
-        ${this.textGroupTemplate} ${this.infoIconTemplate}
+        ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
       </section>
     `;
   }
 
+  get bookTitleBar() {
+    return html`<book-title-bar
+      .identifier=${this.identifier}
+      .bookTitle=${this.bookTitle}
+    ></book-title-bar>`;
+  }
+
+  get bookActionBar() {
+    return html`
+      <collapsible-action-group
+        .userid=${this.userid}
+        .identifier=${this.identifier}
+        .primaryColor=${this.primaryColor}
+        .primaryActions=${this.primaryActions}
+        .secondaryActions=${this.secondaryActions}
+        .width=${this.width}
+        .hasAdminAccess=${this.hasAdminAccess}
+        .disabled=${this.disable}
+        @toggle-action-bar-state=${this.toggleActionBarState}
+      >
+      </collapsible-action-group>
+      ${this.textGroupTemplate} ${this.infoIconTemplate}
+    `;
+  }
+
+  toggleActionBarState(e) {
+    console.log(e)
+
+    // update action bar states is book is not available to browse or borrow.
+    if (e?.detail?.data?.error) {
+      const errorMsg = e.detail.data.error;
+      if (errorMsg.match(/(^|\W)UNAVAILABLE($|\W)/)) {
+        const currStatus = { ...this.lendingStatus, available_to_browse: false };
+        this.lendingStatus = currStatus;
+      }
+    }
+
+    this.disable = !this.disable;
+  }
+
   get iconClass() {
     return this.width <= mobileContainerWidth ? 'mobile' : 'desktop';
   }
@@ -146,7 +212,7 @@ export default class IABookActions extends LitElement {
   get textGroupTemplate() {
     return html`<text-group
       textClass=${this.textClass}
-      texts="${this.primaryTitle}"
+      texts=${this.primaryTitle}
     >
     </text-group>`;
   }
@@ -159,13 +225,12 @@ export default class IABookActions extends LitElement {
     return css`
       :host {
         display: block;
-        background: var(--secondaryBGColor);
-        color: var(--primaryTextColor);
+        background: var(--primaryBGColor, #000);
+        color: var(--primaryTextColor, #fff);
       }
       .lending-wrapper {
         width: 100%;
         margin: 0 auto;
-        padding: 10px 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;

package/test/components/book-title-bar.test.js

@@ -0,0 +1,39 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import '../../src/components/book-title-bar.js';
+
+const container = ({ identifier, bookTitle } = {}) =>
+  html`<book-title-bar
+    .identifier=${identifier}
+    .bookTitle=${bookTitle}
+  ></book-title-bar>`;
+
+describe('<book-title-bar>', () => {
+  it('check inner texts of title bar', async () => {
+    const el = await fixture(
+      container({
+        identifier: 'goody',
+        bookTitle: 'this is test booktitle',
+      })
+    );
+    const link = el.shadowRoot.querySelector('a');
+    expect(link.innerText).to.equal('this is test booktitle');
+    expect(link.getAttribute('href')).to.equal('/details/goody');
+  });
+
+  it('check if event if firing on valid analytics category action', async () => {
+    const el = await fixture(
+      container({
+        identifier: 'goody',
+        bookTitle: 'this is test booktitle',
+      })
+    );
+
+    const clickButton = () =>
+      el.shadowRoot.querySelector('a').dispatchEvent(new Event('click'));
+    setTimeout(clickButton);
+
+    const { detail } = await oneEvent(el, 'bookTitleBar');
+    expect(detail.event.category).to.equal('BookReader-Header');
+    expect(detail.event.action).to.equal('Book-Title-Bar');
+  });
+});

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

@@ -39,6 +39,22 @@ describe('<collapsible-action-group>', () => {
     const primaryButton = primaryActionContainer.querySelector('.ia-button');
     expect(primaryButton.innerText).to.equal('Borrow for 1 hour');
   });
+
+  it('check if loader is active and action-group is disabled', async () => {
+    const el = await fixture(container());
+
+    const primaryActionContainer = el.shadowRoot.querySelector('.primary');
+    primaryActionContainer
+      .querySelector('.ia-button')
+      .dispatchEvent(new CustomEvent('toggle-loader'));
+    el.disabled = true;
+    await el.updateComplete;
+
+    expect(el.disabled).to.be.true;
+    expect(el.shadowRoot.querySelector('div').classList.contains('disabled')).to
+      .be.true;
+  });
+
   it('fires analytics events', async () => {
     const el = await fixture(container());
     const primaryActionContainer = el.shadowRoot.querySelector('.primary');

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

@@ -36,7 +36,7 @@ describe('Get Lending Actions', () => {
     );
     const actions = lendingOptions.getCurrentLendingActions();
 
-    expect(actions.primaryActions.length).to.equal(1);
+    expect(actions.primaryActions.length).to.equal(2);
     expect(actions.primaryTitle).to.equal(
       'This book can be borrowed for 14 days.'
     );

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

@@ -1,4 +1,5 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, aTimeout } from '@open-wc/testing';
+
 import '../src/ia-book-actions.js';
 import Sinon from 'sinon';
 
@@ -126,7 +127,7 @@ describe('Borrow status actions', () => {
     expect(el.primaryTitle).to.equal(
       'Renewable every hour, pending availability.'
     );
-    expect(el.primaryActions.length).to.equal(1);
+    expect(el.primaryActions.length).to.equal(2);
     expect(el.primaryActions[0].text).to.equal('Log In and Borrow');
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
   });
@@ -159,40 +160,79 @@ describe('Borrow status actions', () => {
     expect(el.primaryActions[0].text).to.equal(expectedPrimaryActions[0].text);
     expect(el.primaryActions[1].text).to.equal('Borrow for 14 days');
   });
+});
 
-  describe('Shared Resize Observer', () => {
-    it('can receive a Shared Resize Observer', async () => {
-      const sharedObserverStub = new SharedResizeObserver();
-      const addObserverSpy = Sinon.spy(sharedObserverStub, 'addObserver');
-      const component = await fixture(html` <ia-book-actions
-        .userid=${'@userid'}
-        .identifier=${'foo'}
-        .lendingStatus=${{
+describe('Browsing expired status', () => {
+  it('Book is browsed but not expired', async () => {
+    const el = await fixture(
+      container({
+        userid: '@userid',
+        lendingStatus: {
           is_lendable: true,
           user_has_browsed: true,
-          available_to_browse: true,
-          available_to_borrow: true,
-        }}
-        .sharedObserver=${sharedObserverStub}
-      ></ia-book-actions>`);
-      await component.updateComplete;
-
-      expect(addObserverSpy.callCount).to.equal(1);
-    });
-    it('loads its own resize observer if it is not received', async () => {
-      const component = await fixture(html` <ia-book-actions
-        .userid=${'@userid'}
-        .identifier=${'foo'}
-        .lendingStatus=${{
+          browseHasExpired: false,
+        },
+      })
+    );
+    expect(el.primaryTitle).contains('Borrow ends at ');
+    expect(el.primaryActions[0].text).to.equal('Return now');
+    expect(el.primaryActions[1].text).to.equal('Print Disability Access');
+  });
+
+  it('Book is browsing and going to expire after 1 second', async () => {
+    const el = await fixture(
+      container({
+        userid: '@userid',
+        lendingStatus: {
           is_lendable: true,
           user_has_browsed: true,
-          available_to_browse: true,
-          available_to_borrow: true,
-        }}
-      ></ia-book-actions>`);
+          browseHasExpired: false,
+          secondsLeftOnLoan: 1,
+        },
+      })
+    );
+
+    await aTimeout(1500); // wait for 1.5 second
+    el.updateComplete;
+
+    expect(el.primaryTitle).contains('Your loan has expired.');
+    expect(el.primaryActions[0].text).to.equal('Borrow again');
+  });
+});
+
+describe('Shared Resize Observer', () => {
+  it('can receive a Shared Resize Observer', async () => {
+    const sharedObserverStub = new SharedResizeObserver();
+    const addObserverSpy = Sinon.spy(sharedObserverStub, 'addObserver');
+    const component = await fixture(html` <ia-book-actions
+      .userid=${'@userid'}
+      .identifier=${'foo'}
+      .lendingStatus=${{
+        is_lendable: true,
+        user_has_browsed: true,
+        available_to_browse: true,
+        available_to_borrow: true,
+      }}
+      .sharedObserver=${sharedObserverStub}
+    ></ia-book-actions>`);
+    await component.updateComplete;
+
+    expect(addObserverSpy.callCount).to.equal(1);
+  });
 
-      await component.updateComplete;
-      expect(component.sharedObserver).to.not.be.undefined;
-    });
+  it('loads its own resize observer if it is not received', async () => {
+    const component = await fixture(html` <ia-book-actions
+      .userid=${'@userid'}
+      .identifier=${'foo'}
+      .lendingStatus=${{
+        is_lendable: true,
+        user_has_browsed: true,
+        available_to_browse: true,
+        available_to_borrow: true,
+      }}
+    ></ia-book-actions>`);
+
+    await component.updateComplete;
+    expect(component.sharedObserver).to.not.be.undefined;
   });
 });