@internetarchive/ia-book-actions 0.0.20 → 0.0.22-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.20",
+  "version": "0.0.22-2",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@internetarchive/icon-info": "^1.2.6",
     "@internetarchive/local-cache": "^0.2.0",
-    "@internetarchive/modal-manager": "^0.1.0",
+    "@internetarchive/modal-manager": "^0.2.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "lit": "^2.2.1"
   },

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

@@ -14,18 +14,15 @@ export default css`
     align-items: center;
   }
   .action-buttons .ia-button {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
+    margin: 0;
     height: 3.5rem;
-    transition: all 0.1s ease 0s;
-    vertical-align: middle;
-    padding: 0 1rem;
-    margin: 0 3px;
   }
   .primary,
   .secondary {
     position: relative;
+    background-color: var(--white, #fff);
+    border-radius: 5px;
+    margin: 0 3px;
   }
   .primary .initial {
     border-radius: 0.4rem 0 0 0.4rem;
@@ -51,9 +48,9 @@ export default css`
   }
   .dropdown-content .ia-button {
     background: none;
+    color: var(--primaryTextColor, #fff);
     border: none;
     box-sizing: border-box;
-    display: block;
     width: 100%;
     text-align: left;
     height: 3rem;
@@ -61,6 +58,9 @@ export default css`
     padding: 0.6rem 1.2rem;
     margin: 0;
   }
+  .dropdown-content .ia-button:is(:focus-visible, :hover) {
+    background: unset;
+  }
   .dropdown-content li .ia-button {
     border-radius: 0;
   }
@@ -115,6 +115,9 @@ export default css`
     display: inline-block;
     vertical-align: middle;
   }
+  .secondary .ia-button.exit-admin {
+    background-color: var(--primaryBGColor);
+  }
   .purchase small {
     display: block;
     font-size: 1rem;

package/src/assets/styles/ia-button.js

@@ -3,63 +3,88 @@ import { css } from 'lit';
 export default css`
   .ia-button {
     min-height: 3rem;
-    border: none;
-    outline: none;
     cursor: pointer;
-    color: #fff;
+    color: var(--primaryTextColor, #fff);
     line-height: normal;
     border-radius: 0.4rem;
-    text-align: center;
-    vertical-align: middle;
     font-size: 1.4rem;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    display: inline-block;
-    padding: 0.85rem 1.2rem;
     border: 1px solid transparent;
     white-space: nowrap;
     appearance: auto;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    transition: all 0.1s ease 0s;
+    vertical-align: middle;
+    padding: 0 1rem;
+    outline-color: var(--primaryTextColor, #fff);
+    outline-offset: -4px;
+    user-select: none;
+    text-decoration: none;
+    width: fit-content;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;
   }
-  .ia-button:disabled,
-  .ia-button.disabled {
+  .ia-button:focus-visible {
+    outline-style: double;
+  }
+
+  .ia-button:disabled {
     cursor: not-allowed;
     background-color: var(--primaryDisableCTAFill, #767676);
     border: 1px solid var(--secondaryCTABorder, #999);
-    color: var(--primaryTextColor, #fff);
   }
   .ia-button.transparent {
     background-color: transparent;
   }
 
-  .ia-button.slim {
-    padding: 0;
+  .ia-button.warning {
+    background-color: #ee8950;
+    border-color: #ec7939;
   }
+
   .ia-button.primary {
-    background-color: #194880;
+    background-color: var(--primaryCTAFill, #194880);
     border-color: #c5d1df;
   }
-  .ia-button.dark {
-    color: #fff;
-    background-color: #333;
-    border-color: #979797;
+  .ia-button.primary:hover {
+    background-color: rgba(27, 72, 128, 0.9);
   }
+  .ia-button.primary:focus-visible {
+    background-color: rgba(27, 72, 128, 0.8);
+  }
+  .ia-button.primary:active {
+    background-color: rgba(27, 72, 128, 0.7);
+  }
+
   .ia-button.danger {
-    color: #fff;
-    background-color: #d9534f;
+    background-color: var(--primaryErrorCTAFill, #e51c26);
     border-color: #d43f3a;
   }
-  .ia-button.warning {
-    color: #fff;
-    background-color: #ee8950;
-    border-color: #ec7939;
+  .ia-button.danger:hover {
+    background-color: rgba(229, 28, 38, 0.9);
+  }
+  .ia-button.danger:focus-visible {
+    background-color: rgba(229, 28, 38, 0.8);
+  }
+  .ia-button.danger:active {
+    background-color: rgba(229, 28, 38, 0.7);
+  }
+
+  .ia-button.dark {
+    background-color: var(--secondaryCTAFill, #333);
+    border-color: #979797;
+  }
+  .ia-button.dark:hover {
+    background-color: rgba(51, 51, 51, 0.9);
+  }
+  .ia-button.dark:focus-visible {
+    background-color: rgba(51, 51, 51, 0.8);
   }
-  .ia-button.cancel {
-    background-color: #e51c26;
-    border-color: #f8c6c8;
+  .ia-button.dark:active {
+    background-color: rgba(51, 51, 51, 0.7);
   }
 `;

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

@@ -50,7 +50,10 @@ export class CollapsibleActionGroup extends ActionsHandler {
   }
 
   updated(changed) {
-    if (changed.has('width') && this.isBelowTabletContainer) {
+    if (
+      (changed.has('width') || changed.has('disabled')) &&
+      this.isBelowTabletContainer
+    ) {
       this.resetActions();
     }
   }
@@ -110,6 +113,9 @@ export class CollapsibleActionGroup extends ActionsHandler {
         <section class="action-buttons secondary">
           ${this.renderSecondaryActions}
         </section>
+        <section class="action-buttons secondary purchase">
+          ${this.renderPurchaseAction}
+        </section>
       </div>
     `;
   }
@@ -147,13 +153,27 @@ export class CollapsibleActionGroup extends ActionsHandler {
     return this.secondaryActions.map(action => this.renderActionLink(action));
   }
 
+  get renderPurchaseAction() {
+    if (!this.secondaryActions.length) return nothing;
+
+    if (this.secondaryActions.length === 2) {
+      return this.renderActionLink(this.secondaryActions[1], true);
+    }
+    if (this.secondaryActions[0].id === 'purchaseBook') {
+      return this.renderActionLink(this.secondaryActions[0], true);
+    }
+    return nothing;
+  }
+
   /**
-   * Render action as a link for secondary actions like admin, purchase, printdisability links.
+   * Render action as a link for secondary actions like admin, printdisability links.
    * @param { Object } action
    * @param { Boolean } initialButton
    * @returns { HTMLElement }
    */
   renderActionLink(action, initialButton = false) {
+    if (!initialButton && action?.id === 'purchaseBook') return nothing; // handle purchase action differerntly
+
     return html`<a
       class="ia-button ${action.className} ${initialButton ? 'initial' : ''}"
       href="${action.url}"

package/src/core/config/url-helper.js

@@ -8,6 +8,7 @@ export class URLHelper {
     try {
       return window.self !== window.top;
     } catch (e) {
+      window?.Sentry?.captureException(e);
       return true;
     }
   }

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

@@ -226,7 +226,7 @@ export default class ActionsConfig {
       text: message,
       url: URLHelper.getBackHref(),
       target: '_self',
-      className: 'ia-button',
+      className: 'exit-admin',
       analyticsEvent: {
         category: this.analyticsCategories.adminAccess,
         action: this.analyticsActions.doneBorrowing,

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

@@ -64,5 +64,7 @@ export default async function ActionsHandlerService(options) {
           option?.error(data);
         }
       });
-  } catch (err) {}
+  } catch (err) {
+    window?.Sentry?.captureException(err);
+  }
 }

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

@@ -22,8 +22,6 @@ export default class ActionsHandler extends LitElement {
   }
 
   sendEvent(eventCategory, eventAction) {
-    // eslint-disable-next-line no-console
-    console?.log('Book action: ', { eventCategory, eventAction });
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,
@@ -258,6 +256,7 @@ export default class ActionsHandler extends LitElement {
       // set new value
       Cookies.setItem(storageKey, newCount, date, '/');
     } catch (error) {
+      window?.Sentry?.captureException(error);
       this.sendEvent('Cookies-Error-Actions', error);
     }
   }

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

@@ -439,8 +439,6 @@ export class GetLendingActions {
       lendingActions = this.restrictedAction();
     }
 
-    // debugging console
-    console.log(lendingActions.primaryTitle);
     return lendingActions;
   }
 }

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

@@ -21,6 +21,9 @@ export class LoanTokenPoller {
   disconnectedInterval() {
     clearInterval(this.loanTokenInterval);
     this.loanTokenInterval = undefined;
+    if (window.Sentry) {
+      window?.Sentry?.captureMessage('loan token interval cleared');
+    }
   }
 
   async enableBookAccess() {
@@ -35,6 +38,7 @@ export class LoanTokenPoller {
           );
           consecutiveLoanCounts = existingCount ?? 1;
         } catch (error) {
+          window?.Sentry?.captureException(error);
           this.sendEvent('Cookies-Error-Token', error);
         }
       }
@@ -54,14 +58,13 @@ export class LoanTokenPoller {
 
       this.sendEvent(category, action);
     } else {
+      window?.Sentry?.captureMessage('enableBookAccess error');
       // if book is not browsed, just clear token polling interval
       this.disconnectedInterval(); // stop token fetch api
     }
   }
 
   sendEvent(eventCategory, eventAction) {
-    // eslint-disable-next-line no-console
-    console?.log('Book action: ', { eventCategory, eventAction });
     window?.archive_analytics?.send_event_no_sampling(
       eventCategory,
       eventAction,
@@ -75,8 +78,11 @@ export class LoanTokenPoller {
       identifier: this.identifier,
       action,
       error: data => {
+        window?.Sentry?.captureMessage('handleLoanTokenPoller error');
         this.disconnectedInterval(); // stop token fetch api
         this.errorCallback({ detail: { action, data } });
+        // send LendingServiceError to GA
+        this.sendEvent('LendingServiceLoanError', action);
       },
       success: () => {
         if (isInitial) this.successCallback();

package/src/ia-book-actions.js

@@ -66,6 +66,8 @@ export default class IABookActions extends LitElement {
   }
 
   disconnectedCallback() {
+    this.tokenPoller?.disconnectedInterval();
+    window?.Sentry?.captureMessage('disconnectedCallback');
     this.disconnectResizeObserver();
   }
 
@@ -167,6 +169,7 @@ export default class IABookActions extends LitElement {
       'browsingExpired' in this.lendingStatus &&
       this.lendingStatus?.browsingExpired;
     if (hasExpired) {
+      window?.Sentry?.captureMessage('setupLendingToolbarActions hasExpired');
       this.tokenPoller?.disconnectedInterval();
       /** Global event - always fire */
       this.dispatchEvent(
@@ -239,6 +242,7 @@ export default class IABookActions extends LitElement {
    */
   startLoanTokenPoller() {
     if (this.tokenPoller) {
+      window?.Sentry?.captureMessage('startLoanTokenPoller clearing interval');
       this.tokenPoller.disconnectedInterval();
     }
     const successCallback = () => {