@internetarchive/ia-book-actions 0.0.5-4-03 → 0.0.5-5

package/demo/error.html

@@ -0,0 +1,4 @@
+<script>
+return { error: 'ss' }
+
+</script>

package/demo/index.html

@@ -12,7 +12,7 @@
     body {
       margin: 0;
       text-align: center;
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
     }
     #demo {
       height: 50px;
@@ -71,10 +71,21 @@
       float: left;
       margin: 2px;
     }
+
+    .ui-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: black;
+      opacity: 0.3;
+    }
   </style>
 </head>
 
 <body>
+
   <ia-book-actions></ia-book-actions>
 
   <script type="module">
@@ -96,7 +107,7 @@
     iaBookActions.userid = '';
     iaBookActions.identifier = identifier;
     iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
-    iaBookActions.lendingStatus = defaultLendingStatus;
+    iaBookActions.lendingStatus = canBrowseAndBorrow;
     iaBookActions.bwbPurchaseUrl = '';
     iaBookActions.barType = '';
 
@@ -203,7 +214,6 @@
       })
     });
 </script>
-
   <div>
     <fieldset>
       <legend>Dev testing for book title bar</legend>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.5-4-03",
+  "version": "0.0.5-5",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -21,6 +21,7 @@
     "@internetarchive/ia-icons": "^1.2.2",
     "@internetarchive/icon-bookmark": "^1.1.3",
     "@internetarchive/icon-info": "^1.2.6",
+    "@internetarchive/icon-close": "^1.1.3",
     "@internetarchive/shared-resize-observer": "^0.0.1",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0"

package/src/components/show-dialog.js

@@ -0,0 +1,115 @@
+/* eslint-disable */
+import { LitElement, html, css } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+
+import '@internetarchive/icon-close/icon-close.js';
+import buttonBaseStyle from '../assets/styles/ia-button.js';
+
+export class showDialog extends LitElement {
+  static get properties() {
+    return {
+      opened: { type: Boolean },
+      title: { type: Boolean },
+      body: { type: Boolean },
+      actions: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+    this.title = 'Error';
+    this.body =
+      'Unexpected error: loan does not exist. Please try deleting your archive.org cookie.';
+    this.actions = [];
+  }
+
+  render() {
+    return html`
+      <div
+        class="${classMap({
+          dialog: true,
+          opened: this.opened,
+          closed: !this.opened,
+        })}"
+      >
+        <div class="dialog-head">
+          ${this.title}
+          <span
+            @click="${() =>
+              this.dispatchEvent(new CustomEvent('dialog.close'))}"
+          >
+            <ia-icon-close fill-color="blue"></ia-icon-close
+          ></span>
+        </div>
+        <div class="dialog-body">${this.body}</div>
+        <div class="dialog-foot">${this.renderActionButton()}</div>
+      </div>
+    `;
+  }
+
+  renderActionButton() {
+    return this.actions.map(
+      action =>
+        html`<button class=${action.className} @click=${action.callback}>
+          ${action.text}
+        </button>`
+    );
+  }
+
+  static get styles() {
+    const dialogStyle = css`
+      :host {
+        color: #343434;
+        font-size: 1.6rem;
+      }
+      .dialog {
+        position: absolute;
+        background: #fff;
+        border-radius: 1.2rem;
+        z-index: 3000;
+        flex-direction: column;
+        width: 400px;
+        max-width: 500px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        border: 2px solid #ccc;
+        border-radius: 12px;
+        box-shadow: 0px 0px 27px 6px rgb(66 66 66 / 80%);
+      }
+      .dialog-head,
+      .dialog-body,
+      .dialog-foot {
+        padding: 1rem;
+        user-select: none;
+        text-align: left;
+      }
+      .dialog-body {
+        border: 1px solid #d8d8d8;
+      }
+      ia-icon-close {
+        float: right;
+        display: inline-block;
+        width: 2.5rem;
+        height: 2.5rem;
+        vertical-align: middle;
+        --iconFillColor: #333;
+        cursor: pointer;
+      }
+      .opened {
+        display: flex;
+      }
+      .closed {
+        display: none;
+      }
+      a {
+        text-decoration: none;
+      }
+    `;
+
+    return [buttonBaseStyle, dialogStyle];
+  }
+}
+
+customElements.define('show-dialog', showDialog);

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

@@ -11,6 +11,7 @@ export default function ActionsHandlerService(options) {
     data: {},
     success() {},
     error: null,
+    callback() {},
     loader: true,
     type: 'POST',
     ...options,
@@ -22,7 +23,7 @@ export default function ActionsHandlerService(options) {
 
   let baseHost = '';
   if (window.location.pathname === '/demo/') {
-    baseHost = `/demo/`;
+    baseHost = `/demo/`; // http://localhost:8000/demo/error.html
   } else {
     baseHost = `/services/loans/loan`;
   }
@@ -36,15 +37,90 @@ export default function ActionsHandlerService(options) {
     body: formData,
   })
     .then(response => {
+      console.log('response', response);
+
+      if (baseHost == '/demo/') {
+        // option.callback('{"result": true, "token": "token-response"}');
+        // option.callback('{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}');
+
+        showDialog(
+          option.action,
+          '{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}'
+        );
+        // showDialog('{"result": true, "token": "token-response"}');
+      }
+      // showDialog(option.action, response);
+      // option.callback(response);
+
       if (response.status === 200) {
         option.success.call();
       }
     })
     .catch(error => {
-      console.log(error);
+      console.log('error', error);
+      // option.callback(error);
+
+      if (baseHost == '/demo/') {
+        showDialog(
+          option.action,
+          '{"error": "Unexpected error. Please email this link to openlibrary@archive.org with the subject: Unexpected error. Thank you."}'
+        );
+        // showDialog('{"result": true, "token": "token-response"}');
+      } else {
+        showDialog(option.action, error);
+      }
     });
 }
 
+function showDialog(action, xhrResponse) {
+  const showDialog = document
+    .querySelector('ia-book-actions')
+    .shadowRoot.querySelector('show-dialog');
+
+  let title = 'Connection error';
+  let body = 'Please check internet connection.';
+  let actions = [
+    {
+      text: 'Okay',
+      callback: () => {
+        weAreBack();
+        this.updateToken();
+      },
+      className: 'ia-button primary',
+    },
+  ];
+
+  // Specific error
+  const data = JSON.parse(xhrResponse);
+  console.log('data', data);
+  if (data.error) {
+    title = 'Sorry!';
+    body = data.error;
+    // Only go back to item button on error
+    actions = [
+      {
+        text: 'Back to item details',
+        callback: () => {
+          URLHelper.goToUrl(this.lendingStatus.bookUrl);
+        },
+        className: 'ia-button primary',
+      },
+    ];
+  }
+
+  showDialog.opened = true;
+  showDialog.title = title;
+  showDialog.body = body;
+  if (action === 'create_token') {
+    showDialog.actions = actions;
+  }
+
+  const overlayElement = document.createElement('div');
+  overlayElement.className = 'ui-overlay';
+  console.log(overlayElement);
+  document.getElementsByTagName('body')[0].appendChild(overlayElement);
+}
+
 function showActionButtonLoader() {
   const collapsibleElement = document
     .querySelector('ia-book-actions')

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

@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+import ActionsHandlerService from './actions-handler/actions-handler-service.js';
+import { URLHelper } from '../config/url-helper.js';
+
+import '../../components/show-dialog.js';
+
+export default class ArchiveOrgTokenPoller {
+  constructor(identifier, lendingStatus) {
+    this.identifier = identifier;
+    this.lendingStatus = lendingStatus;
+    this.pollingDelay = 6000; // 60000 ms = 1 min
+    this.tokenInterval = null;
+    this.showDialog = document
+      .querySelector('ia-book-actions')
+      .shadowRoot.querySelector('show-dialog');
+  }
+
+  init() {
+    console.log('ArchiveOrgTokenPoller started...');
+    // Do an initial token, then set an interval
+    this.tokenInterval = setInterval(() => {
+      this.updateToken();
+    }, this.pollingDelay);
+  }
+
+  updateToken() {
+    ActionsHandlerService({
+      identifier: this.identifier,
+      action: 'create_token',
+      // callback: (xhrResponse) => {
+      //   console.log('xhrResponse', xhrResponse);
+      //   if (xhrResponse.status === true) {
+      //     this.hideErrorDialog(); // remove overlay and message box...
+      //     // this.showErrorDialog(xhrResponse);
+      //   } else {
+      //     this.showErrorDialog(xhrResponse);
+      //   }
+      // },
+      loader: false,
+    });
+  }
+
+  hideErrorDialog() {
+    this.showDialog.dialogVisible = false;
+  }
+
+  showErrorDialog(xhrResponse) {
+    let title = 'Connection error';
+    let body = 'Please check internet connection.';
+    let actions = [
+      {
+        text: 'Okay',
+        callback: () => {
+          weAreBack();
+          this.updateToken();
+        },
+        className: 'ia-button primary',
+      },
+    ];
+
+    // Specific error
+    const data = JSON.parse(xhrResponse);
+    if (data.error) {
+      title = 'Sorry!';
+      body = data.error;
+      // Only go back to item button on error
+      actions = [
+        {
+          text: 'Back to item details',
+          callback: () => {
+            URLHelper.goToUrl(this.lendingStatus.bookUrl);
+          },
+          className: 'ia-button primary',
+        },
+      ];
+    }
+
+    const showDialog = document
+      .querySelector('ia-book-actions')
+      .shadowRoot.querySelector('show-dialog');
+
+    showDialog.opened = true;
+    showDialog.title = title;
+    showDialog.body = body;
+    showDialog.actions = actions;
+  }
+}

package/src/ia-book-actions.js

@@ -1,4 +1,4 @@
-/* eslint-disable camelcase */
+/* eslint-disable */
 import { html, css, LitElement } from 'lit-element';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -7,8 +7,11 @@ import './components/collapsible-action-group.js';
 import './components/book-title-bar.js';
 import './components/text-group.js';
 import './components/info-icon.js';
+import './components/show-dialog.js';
 
 import GetLendingActions from './core/services/get-lending-actions.js';
+import ArchiveOrgTokenPoller from './core/services/archive-token-poller.js';
+
 import { mobileContainerWidth } from './core/config/constants.js';
 
 export default class IABookActions extends LitElement {
@@ -22,6 +25,7 @@ export default class IABookActions extends LitElement {
       bwbPurchaseUrl: { type: String },
       barType: { type: String },
       sharedObserver: { attribute: false },
+      dialogVisible: { type: Boolean },
     };
   }
 
@@ -40,6 +44,7 @@ export default class IABookActions extends LitElement {
     this.primaryColor = 'primary';
     this.secondaryActions = [];
     this.lendingOptions = {};
+    this.dialogVisible = true;
   }
 
   disconnectedCallback() {
@@ -145,6 +150,14 @@ export default class IABookActions extends LitElement {
       !this.lendingStatus.browseHasExpired
     ) {
       this.startBrowseTimer();
+
+      // token poller start from here...
+      const tokenPoller = new ArchiveOrgTokenPoller(
+        this.identifier,
+        this.lendingStatus
+      );
+      tokenPoller.init();
+      return;
     }
   }
 
@@ -153,9 +166,23 @@ export default class IABookActions extends LitElement {
       <section class="lending-wrapper">
         ${this.barType === 'title' ? this.bookTitleBar : this.bookActionBar}
       </section>
+
+      <show-dialog
+        ?opened="${this.dialogVisible}"
+        @dialog.close="${() => this.closeDialog(this)}"
+      ></show-dialog>
     `;
   }
 
+  toggleDialog(e) {
+    this.dialogVisible = !this.dialogVisible;
+  }
+
+  closeDialog(e) {
+    this.dialogVisible = false;
+    console.log('should close...', this.dialogVisible);
+  }
+
   get bookTitleBar() {
     return html`<book-title-bar
       .identifier=${this.identifier}