@nyaruka/temba-components 0.16.0 → 0.18.0

package/out-tsc/src/contacts/ContactHistory.js

@@ -5,12 +5,24 @@ import { html } from 'lit-html';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { getAssets, getClasses, postJSON, throttle } from '../utils';
-import ResizeObserver from 'resize-observer-polyfill';
 import { Events, getEventGroupType, getEventStyles, renderAirtimeTransferredEvent, renderCallStartedEvent, renderCampaignFiredEvent, renderChannelEvent, renderContactGroupsEvent, renderContactLanguageChangedEvent, renderContactURNsChanged, renderEmailSent, renderErrorMessage, renderFlowEvent, renderLabelsAdded, renderMsgEvent, renderNameChanged, renderNoteCreated, renderResultEvent, renderTicketAction, renderTicketAssigned, renderTicketOpened, renderUpdateEvent, renderWebhookEvent, } from './events';
 import { fetchContactHistory, MAX_CHAT_REFRESH, MIN_CHAT_REFRESH, SCROLL_THRESHOLD, } from './helpers';
+// when images load, make sure we are on the bottom of the scroll window if necessary
+export const loadHandler = function (event) {
+    const target = event.target;
+    const events = this.host.getEventsPane();
+    if (target.tagName == 'IMG') {
+        if (!this.host.showMessageAlert) {
+            if (events.scrollTop > target.offsetTop - 1000 &&
+                target.offsetTop > events.scrollHeight - 500) {
+                this.host.scrollToBottom();
+            }
+        }
+    }
+};
 export class ContactHistory extends RapidElement {
     constructor() {
-        super(...arguments);
+        super();
         this.getStickyId = (event) => {
             if (event.type === Events.TICKET_OPENED) {
                 const ticket = this.getTicketForEvent(event);
@@ -28,12 +40,19 @@ export class ContactHistory extends RapidElement {
         this.ticket = null;
         this.endDate = null;
         this.tickets = null;
-        this.currentTicket = null;
         this.ticketEvents = {};
         this.lastHeight = 0;
         this.refreshTimeout = null;
         this.empty = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.shadowRoot.addEventListener('load', loadHandler, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.shadowRoot.removeEventListener('load', loadHandler, true);
+    }
     getTicketForEvent(event) {
         return this.getTicket(event.ticket.uuid);
     }
@@ -59,6 +78,7 @@ export class ContactHistory extends RapidElement {
         flex-grow: 1;
         border-top-left-radius: var(--curvature);
         padding-top: 1em;
+        background: #fff;
       }
 
       temba-loading {
@@ -99,15 +119,27 @@ export class ContactHistory extends RapidElement {
         pointer: cursor;
       }
 
+      .scroll-title {
+        display: flex;
+        flex-direction: column;
+        z-index: 2;
+        border-top-left-radius: var(--curvature);
+        overflow: hidden;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        background: rgb(240, 240, 240);
+        padding: 1em 1.2em;
+        font-size: 1.2em;
+        font-weight: 400;
+      }
+
       .sticky-bin {
         display: flex;
         flex-direction: column;
-        position: fixed;
         z-index: 2;
         border-top-left-radius: var(--curvature);
         overflow: hidden;
-        background: rgba(240, 240, 240, 0.95);
         box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        background: rgb(240, 240, 240);
       }
 
       .sticky-bin temba-icon {
@@ -149,28 +181,18 @@ export class ContactHistory extends RapidElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.handleClose = this.handleClose.bind(this);
-        const stickyBin = this.getDiv('.sticky-bin');
-        const resizer = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                const eventContainer = entry.contentRect;
-                stickyBin.style.width =
-                    eventContainer.width + eventContainer.left - 16 + 'px';
-            }
-        });
-        resizer.observe(this);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        // fire an event when our current ticket changes
-        if (changedProperties.has('currentTicket')) {
-            this.fireCustomEvent(CustomEventType.ContextChanged, {
-                context: this.currentTicket,
-            });
-        }
         // fire an event if we get a new event
         if (changedProperties.has('mostRecentEvent')) {
             this.fireCustomEvent(CustomEventType.Refreshed);
         }
+        if (changedProperties.has('endDate')) {
+            if (this.refreshTimeout && this.endDate) {
+                window.clearTimeout(this.refreshTimeout);
+            }
+        }
         // if we don't have an endpoint infer one
         if (changedProperties.has('uuid')) {
             if (this.uuid == null) {
@@ -195,7 +217,8 @@ export class ContactHistory extends RapidElement {
         }
         if (changedProperties.has('refreshing') &&
             this.refreshing &&
-            this.endpoint) {
+            this.endpoint &&
+            !this.endDate) {
             const after = (this.getLastEventTime() - 1) * 1000;
             let forceOpen = false;
             fetchContactHistory(false, this.endpoint, this.ticket, null, after)
@@ -334,25 +357,18 @@ export class ContactHistory extends RapidElement {
                     stickyBin.removeChild(child);
                 }
             }
-            if (!this.currentTicket) {
-                this.updateCurrentTicket();
-            }
-        }
-    }
-    updateCurrentTicket() {
-        const openTickets = (this.tickets || []).filter(ticket => ticket && ticket.status === 'open');
-        if (openTickets.length > 0) {
-            this.currentTicket = openTickets[openTickets.length - 1];
         }
     }
     refreshTickets() {
-        let url = `/api/v2/tickets.json?contact=${this.uuid}`;
         if (this.ticket) {
-            url = `${url}&ticket=${this.ticket}`;
+            let url = `/api/v2/tickets.json?contact=${this.uuid}`;
+            if (this.ticket) {
+                url = `${url}&ticket=${this.ticket}`;
+            }
+            getAssets(url).then((tickets) => {
+                this.tickets = tickets.reverse();
+            });
         }
-        getAssets(url).then((tickets) => {
-            this.tickets = tickets.reverse();
-        });
     }
     getEventsPane() {
         return this.getDiv('.events');
@@ -403,6 +419,9 @@ export class ContactHistory extends RapidElement {
         return grouped;
     }
     scheduleRefresh(wait = -1) {
+        if (this.endDate) {
+            return;
+        }
         let refreshWait = wait;
         if (wait === -1) {
             const lastEventTime = this.getLastEventTime();
@@ -425,10 +444,11 @@ export class ContactHistory extends RapidElement {
     reset() {
         // clear out our sticky bin which we manipulated manually
         const stickyBin = this.getDiv('.sticky-bin');
-        while (stickyBin.childElementCount > 0) {
-            stickyBin.removeChild(stickyBin.firstElementChild);
+        if (stickyBin) {
+            while (stickyBin.childElementCount > 0) {
+                stickyBin.removeChild(stickyBin.firstElementChild);
+            }
         }
-        this.currentTicket = null;
         this.endpoint = null;
         this.tickets = null;
         this.ticketEvents = {};
@@ -474,14 +494,6 @@ export class ContactHistory extends RapidElement {
                     sticky.classList.add('pinned');
                     sticky.eventElement = eventElement;
                     stickyBin.appendChild(eventElement);
-                    const uuid = eventElement.getAttribute('data-sticky-id');
-                    const ticket = this.getTicket(uuid);
-                    if (ticket) {
-                        if (!this.currentTicket ||
-                            this.currentTicket.uuid !== ticket.uuid) {
-                            this.currentTicket = ticket;
-                        }
-                    }
                 }
             }
             else {
@@ -489,24 +501,6 @@ export class ContactHistory extends RapidElement {
                 if (scrollBoundary < sticky.offsetTop + sticky.offsetHeight) {
                     sticky.appendChild(eventElement);
                     sticky.classList.remove('pinned');
-                    const uuid = eventElement.getAttribute('data-sticky-id');
-                    let previousTicket = null;
-                    for (const ticket of this.tickets) {
-                        if (ticket.uuid === uuid) {
-                            break;
-                        }
-                        previousTicket = ticket;
-                    }
-                    if (previousTicket &&
-                        (!this.currentTicket ||
-                            this.currentTicket.uuid !== previousTicket.uuid)) {
-                        if (previousTicket.status === 'open') {
-                            this.currentTicket = previousTicket;
-                        }
-                        else {
-                            this.currentTicket = null;
-                        }
-                    }
                 }
             }
         });
@@ -561,17 +555,17 @@ export class ContactHistory extends RapidElement {
                 if (activeTicket && ticket && ticket.status === 'open') {
                     closeHandler = this.handleClose;
                 }
-                return renderTicketOpened(ticketEvent, closeHandler);
+                return renderTicketOpened(ticketEvent, closeHandler, !this.ticket);
             }
             case Events.TICKET_NOTE_ADDED:
                 return renderNoteCreated(event, this.agent);
             case Events.TICKET_ASSIGNED:
                 return renderTicketAssigned(event);
             case Events.TICKET_REOPENED: {
-                return renderTicketAction(event, 'reopened');
+                return renderTicketAction(event, 'reopened', !this.ticket);
             }
             case Events.TICKET_CLOSED:
-                return renderTicketAction(event, 'closed');
+                return renderTicketAction(event, 'closed', !this.ticket);
             case Events.ERROR:
             case Events.FAILURE:
                 return renderErrorMessage(event);
@@ -606,30 +600,27 @@ export class ContactHistory extends RapidElement {
             this.fireCustomEvent(CustomEventType.ContentChanged, {
                 ticket: { uuid, status: 'closed' },
             });
-            this.updateCurrentTicket();
         })
             .catch((response) => {
             console.error(response);
         });
     }
     checkForAgentAssignmentEvent(agent) {
-        if (this.currentTicket) {
-            this.httpComplete = getAssets(`/api/v2/tickets.json?ticket=${this.currentTicket.uuid}`).then((assets) => {
-                if (assets.length === 1) {
-                    const ticket = assets[0];
-                    if (ticket.assignee && ticket.assignee.id === agent) {
-                        this.fireCustomEvent(CustomEventType.ContentChanged, {
-                            ticket: { uuid: this.currentTicket.uuid, assigned: 'self' },
-                        });
-                    }
-                    else {
-                        this.fireCustomEvent(CustomEventType.ContentChanged, {
-                            ticket: { uuid: this.currentTicket.uuid, assigned: 'other' },
-                        });
-                    }
+        this.httpComplete = getAssets(`/api/v2/tickets.json?ticket=${this.ticket}`).then((assets) => {
+            if (assets.length === 1) {
+                const ticket = assets[0];
+                if (ticket.assignee && ticket.assignee.id === agent) {
+                    this.fireCustomEvent(CustomEventType.ContentChanged, {
+                        ticket: { uuid: this.ticket, assigned: 'self' },
+                    });
                 }
-            });
-        }
+                else {
+                    this.fireCustomEvent(CustomEventType.ContentChanged, {
+                        ticket: { uuid: this.ticket, assigned: 'other' },
+                    });
+                }
+            }
+        });
     }
     getEventHandlers() {
         return [
@@ -648,7 +639,9 @@ export class ContactHistory extends RapidElement {
         const isSticky = !!stickyId;
         const renderedEvent = html `
       <div
-        class="event ${event.type} ${isSticky ? 'has-sticky' : ''}"
+        class="${this.ticket
+            ? 'active-ticket'
+            : ''} event ${event.type} ${isSticky ? 'has-sticky' : ''}"
         data-sticky-id="${stickyId}"
       >
         ${this.renderEvent(event)}
@@ -671,14 +664,14 @@ export class ContactHistory extends RapidElement {
                             type: Events.TICKET_OPENED,
                             ticket: {
                                 uuid: ticket.uuid,
-                                subject: ticket.subject,
+                                topic: ticket.topic,
                                 body: ticket.body,
                                 ticketer: ticket.ticketer,
                             },
                             // eslint-disable-next-line @typescript-eslint/camelcase
                             created_on: ticket.opened_on,
                         };
-                        const renderedEvent = renderTicketOpened(ticketOpenedEvent, this.handleClose);
+                        const renderedEvent = renderTicketOpened(ticketOpenedEvent, this.handleClose, !this.ticket);
                         return html `<div class="event ticket_opened">
                   ${renderedEvent}
                 </div>`;
@@ -687,59 +680,59 @@ export class ContactHistory extends RapidElement {
             })
             : null;
         return html `
-      <div class="sticky-bin">${unfetchedTickets}</div>
+      ${this.ticket
+            ? html `<div class="sticky-bin">${unfetchedTickets}</div>`
+            : this.contact
+                ? html `<div class="scroll-title">${this.contact.name}</div>`
+                : null}
       ${this.fetching
             ? html `<temba-loading units="5" size="10"></temba-loading>`
             : html `<div style="height:0em"></div>`}
       <div class="events" @scroll=${this.handleScroll}>
-        ${this.tickets
-            ? this.eventGroups.map((eventGroup, index) => {
-                const grouping = getEventGroupType(eventGroup.events[0], this.ticket);
-                const groupIndex = this.eventGroups.length - index - 1;
-                const classes = getClasses({
-                    grouping: true,
-                    [grouping]: true,
-                    expanded: eventGroup.open,
-                    closing: eventGroup.closing,
-                });
-                return html `<div class="${classes}">
-                ${grouping === 'verbose'
-                    ? html `<div
-                      class="event-count"
-                      @click=${this.handleEventGroupShow}
-                      data-group-index="${groupIndex}"
-                    >
-                      ${eventGroup.events.length}
-                      ${eventGroup.events.length === 1
-                        ? html `event`
-                        : html `events`}
-                    </div>`
-                    : null}
-                ${grouping === 'verbose'
-                    ? html `
-                      <temba-icon
-                        @click=${this.handleEventGroupHide}
-                        data-group-index="${groupIndex}"
-                        class="grouping-close-button"
-                        name="x"
-                        clickable
-                      ></temba-icon>
-                    `
-                    : null}
-                ${eventGroup.events.map((event) => {
-                    if (event.type === Events.TICKET_ASSIGNED &&
-                        event.note) {
-                        const noteEvent = { ...event };
-                        noteEvent.type = Events.TICKET_NOTE_ADDED;
-                        return html `${this.renderEventContainer(noteEvent)}${this.renderEventContainer(event)}`;
-                    }
-                    else {
-                        return this.renderEventContainer(event);
-                    }
-                })}
-              </div>`;
-            })
-            : null}
+        ${this.eventGroups.map((eventGroup, index) => {
+            const grouping = getEventGroupType(eventGroup.events[0], this.ticket);
+            const groupIndex = this.eventGroups.length - index - 1;
+            const classes = getClasses({
+                grouping: true,
+                [grouping]: true,
+                expanded: eventGroup.open,
+                closing: eventGroup.closing,
+            });
+            return html `<div class="${classes}">
+            ${grouping === 'verbose'
+                ? html `<div
+                  class="event-count"
+                  @click=${this.handleEventGroupShow}
+                  data-group-index="${groupIndex}"
+                >
+                  ${eventGroup.events.length}
+                  ${eventGroup.events.length === 1 ? html `event` : html `events`}
+                </div>`
+                : null}
+            ${grouping === 'verbose'
+                ? html `
+                  <temba-icon
+                    @click=${this.handleEventGroupHide}
+                    data-group-index="${groupIndex}"
+                    class="grouping-close-button"
+                    name="x"
+                    clickable
+                  ></temba-icon>
+                `
+                : null}
+            ${eventGroup.events.map((event) => {
+                if (event.type === Events.TICKET_ASSIGNED &&
+                    event.note) {
+                    const noteEvent = { ...event };
+                    noteEvent.type = Events.TICKET_NOTE_ADDED;
+                    return html `${this.renderEventContainer(noteEvent)}${this.renderEventContainer(event)}`;
+                }
+                else {
+                    return this.renderEventContainer(event);
+                }
+            })}
+          </div>`;
+        })}
       </div>
 
       <div class="new-messages-container">
@@ -757,6 +750,9 @@ export class ContactHistory extends RapidElement {
     `;
     }
 }
+__decorate([
+    property({ type: Object })
+], ContactHistory.prototype, "contact", void 0);
 __decorate([
     property({ type: String })
 ], ContactHistory.prototype, "uuid", void 0);
@@ -796,7 +792,4 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ContactHistory.prototype, "tickets", void 0);
-__decorate([
-    property({ type: Object })
-], ContactHistory.prototype, "currentTicket", void 0);
 //# sourceMappingURL=ContactHistory.js.map