@nyaruka/temba-components 0.44.0 → 0.46.0

package/src/button/Button.ts

@@ -12,6 +12,12 @@ export class Button extends LitElement {
         font-weight: 400;
       }
 
+      .small {
+        font-size: 0.8em;
+        --button-y: 0px;
+        --button-x: 0.5em;
+      }
+
       .v-2.button-container {
         background: var(--button-bg);
         background-image: var(--button-bg-img);
@@ -172,6 +178,9 @@ export class Button extends LitElement {
   @property({ type: Boolean })
   active: boolean;
 
+  @property({ type: Boolean })
+  small: boolean;
+
   @property({ type: String })
   href: string;
 
@@ -231,6 +240,7 @@ export class Button extends LitElement {
           'attention-button': this.attention,
           'destructive-button': this.destructive,
           'light-button': this.light,
+          small: this.small,
         })}"
         tabindex="0"
         @mousedown=${this.handleMouseDown}

package/src/completion/Completion.ts

@@ -169,6 +169,9 @@ export class Completion extends FormElement {
 
   private executeQuery(ele: TextInput) {
     const store: Store = document.querySelector('temba-store');
+    if (!ele.inputElement) {
+      return;
+    }
     const result = executeCompletionQuery(
       ele.inputElement,
       store,

package/src/completion/helpers.ts

@@ -310,6 +310,10 @@ export const executeCompletionQuery = (
     query: null,
   };
 
+  if (!ele) {
+    return;
+  }
+
   // we need a store to do anything useful
   if (!store) {
     return result;

package/src/contacts/ContactChat.ts

@@ -1,11 +1,9 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, CustomEventType, Ticket } from '../interfaces';
-import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
+import { Contact, Ticket } from '../interfaces';
+import { COOKIE_KEYS, getCookieBoolean, postJSON } from '../utils';
 import { ContactHistory } from './ContactHistory';
-import { Modax } from '../dialog/Modax';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Icon } from '../vectoricon';
 import { Compose } from '../compose/Compose';
 
 const DEFAULT_REFRESH = 10000;
@@ -36,6 +34,7 @@ export class ContactChat extends ContactStoreElement {
         flex-direction: column;
         overflow: hidden;
         min-height: 0;
+        border-radius: var(--curvature);
       }
 
       temba-contact-history {
@@ -83,73 +82,6 @@ export class ContactChat extends ContactStoreElement {
         --button-x: 12px;
       }
 
-      .toolbar {
-        position: relative;
-        width: 2.5em;
-        background: #e6e6e6;
-        transition: all 600ms ease-in;
-        z-index: 10;
-        flex-shrink: 0;
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        padding: 0.5em 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
-      }
-
-      .toolbar temba-icon {
-        fill: rgb(60, 60, 60);
-        margin-bottom: 0.5em;
-      }
-
-      .toolbar.closed {
-        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);
-      }
-
-      temba-contact-details {
-        flex-basis: 16em;
-        flex-grow: 0;
-        flex-shrink: 0;
-        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),
-          opacity 600ms ease-in-out 200ms;
-        z-index: 5;
-      }
-
-      temba-contact-details.hidden {
-        margin-right: -16em;
-        opacity: 0;
-      }
-
-      @media only screen and (max-width: 768px) {
-        temba-contact-details {
-          flex-basis: 12em;
-          flex-shrink: 0;
-        }
-
-        temba-contact-details.hidden {
-          margin-right: -12em;
-        }
-      }
-
-      #close-button,
-      #open-button {
-        margin-top: 1em;
-      }
-
-      #details-button {
-        margin-top: 0.25em;
-        transform: rotate(180deg);
-      }
-
-      #note-dialog,
-      #assign-dialog {
-        --header-bg: rgb(255, 249, 194);
-        --header-text: #555;
-        --textarea-height: 5em;
-      }
-
       temba-completion {
         --widget-box-shadow: none;
         --color-widget-border: transparent;
@@ -172,9 +104,6 @@ export class ContactChat extends ContactStoreElement {
   @property({ type: Boolean })
   showDetails = true;
 
-  @property({ type: Boolean })
-  toolbar = false;
-
   @property({ type: Boolean })
   monitor = false;
 
@@ -228,6 +157,7 @@ export class ContactChat extends ContactStoreElement {
         contactHistory.scrollToBottom();
       }
       contactHistory.refresh();
+      // super.refresh();
     }
   }
 
@@ -243,23 +173,6 @@ export class ContactChat extends ContactStoreElement {
     }
   }
 
-  private handleTicketReopen() {
-    const uuid = this.currentTicket.uuid;
-    postJSON(`/api/v2/ticket_actions.json`, {
-      tickets: [uuid],
-      action: 'reopen',
-    })
-      .then(() => {
-        this.refresh();
-        this.fireCustomEvent(CustomEventType.ContentChanged, {
-          ticket: { uuid, status: 'open' },
-        });
-      })
-      .catch((response: any) => {
-        console.error(response);
-      });
-  }
-
   private handleSend(evt: CustomEvent) {
     const buttonName = evt.detail.name;
     if (buttonName === 'Send') {
@@ -320,16 +233,6 @@ export class ContactChat extends ContactStoreElement {
     }
   }
 
-  private handleTicketAssigned() {
-    this.refresh();
-    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);
-  }
-
-  private handleDetailSlider(): void {
-    this.showDetails = !this.showDetails;
-    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);
-  }
-
   public render(): TemplateResult {
     const contactHistory = this.currentContact
       ? this.getTembaContactHistory()
@@ -342,31 +245,6 @@ export class ContactChat extends ContactStoreElement {
     >
       <div class="chat-wrapper">${contactHistory} ${chatbox}</div>
     </div>`;
-
-    if (this.toolbar) {
-      const contactDetails = this.currentContact
-        ? this.getTembaContactDetails()
-        : null;
-      const toggleContactDetails = this.currentContact
-        ? this.getToggleDetailsTembaTip()
-        : null;
-      const addNoteAndAssignTicketTembaTips =
-        this.currentContact && this.currentTicket
-          ? this.getAddNoteAndAssignTicketTembaTips()
-          : null;
-      const addNoteAndAssignTicketTembaModaxes = this.currentTicket
-        ? this.getAddNoteAndAssignTicketTembaModaxes()
-        : null;
-
-      const contactDetailsAndActions = html`${contactDetails}
-        <div class="toolbar ${this.showDetails ? '' : 'closed'}">
-          ${toggleContactDetails} ${addNoteAndAssignTicketTembaTips}
-        </div>
-        ${addNoteAndAssignTicketTembaModaxes}`;
-
-      return html`${contactHistoryAndChatbox} ${contactDetailsAndActions}`;
-    }
-
     return html`${contactHistoryAndChatbox}`;
   }
 
@@ -387,18 +265,11 @@ export class ContactChat extends ContactStoreElement {
         //no chatbox for archived, blocked, or stopped contacts
         return null;
       } else {
-        if (this.currentTicket.closed_on) {
-          //reopen button for active contacts with a closed ticket
-          return html` <div class="closed-footer">
-            <temba-button
-              id="reopen-button"
-              name="Reopen"
-              @click=${this.handleTicketReopen}
-            ></temba-button>
-          </div>`;
-        } else {
+        if (!this.currentTicket.closed_on) {
           //chatbox for active contacts with an open ticket
           return this.getChatbox();
+        } else {
+          return null;
         }
       }
     }
@@ -413,7 +284,7 @@ export class ContactChat extends ContactStoreElement {
   }
 
   private getChatbox(): TemplateResult {
-    return html` <div class="chatbox ${this.toolbar ? 'full' : ''}">
+    return html`<div class="chatbox">
       <temba-compose
         chatbox
         attachments
@@ -424,81 +295,4 @@ export class ContactChat extends ContactStoreElement {
       </temba-compose>
     </div>`;
   }
-
-  private getTembaContactDetails(): TemplateResult {
-    return html` <temba-contact-details
-      style="z-index: 10"
-      class="${this.showDetails ? '' : 'hidden'}"
-      showGroups="true"
-      .visible=${this.showDetails}
-      .ticket=${this.currentTicket}
-      .contact=${this.currentContact}
-    >
-    </temba-contact-details>`;
-  }
-
-  private getToggleDetailsTembaTip(): TemplateResult {
-    return html` <temba-tip
-      style="margin-top:5px"
-      text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-      position="left"
-      hideOnChange
-    >
-      <temba-icon
-        id="details-button"
-        name="${this.showDetails ? Icon.menu_collapse : 'layout-left'}"
-        @click="${this.handleDetailSlider}"
-        clickable
-        animatechange="spin"
-      ></temba-icon>
-    </temba-tip>`;
-  }
-
-  private getAddNoteAndAssignTicketTembaTips(): TemplateResult {
-    return html` <temba-tip
-        style="margin-top:5px"
-        text="Assign"
-        position="left"
-      >
-        <temba-icon
-          id="assign-button"
-          name="${Icon.users}"
-          @click="${() => {
-            const modax = this.shadowRoot.getElementById(
-              'assign-dialog'
-            ) as Modax;
-            modax.open = true;
-          }}"
-          clickable
-        ></temba-icon>
-      </temba-tip>
-      <temba-tip style="margin-top:5px" text="Add Note" position="left">
-        <temba-icon
-          id="add-note-button"
-          name="${Icon.add_note}"
-          @click="${() => {
-            const note = this.shadowRoot.getElementById('note-dialog') as Modax;
-            note.open = true;
-          }}"
-          clickable
-        ></temba-icon>
-      </temba-tip>`;
-  }
-
-  private getAddNoteAndAssignTicketTembaModaxes(): TemplateResult {
-    return html` <temba-modax
-        header="Add Note"
-        id="note-dialog"
-        @temba-submitted=${this.refresh}
-        endpoint="/ticket/note/${this.currentTicket.uuid}/"
-      >
-      </temba-modax>
-      <temba-modax
-        header="Assign Ticket"
-        id="assign-dialog"
-        @temba-submitted=${this.handleTicketAssigned}
-        endpoint="/ticket/assign/${this.currentTicket.uuid}/"
-      >
-      </temba-modax>`;
-  }
 }

package/src/contacts/ContactFields.ts

@@ -184,6 +184,6 @@ export class ContactFields extends ContactStoreElement {
       `;
     }
 
-    return null;
+    return super.render();
   }
 }

package/src/contacts/ContactHistory.ts

@@ -90,15 +90,6 @@ export class ContactHistory extends RapidElement {
     this.shadowRoot.removeEventListener('load', loadHandler, true);
   }
 
-  private getStickyId = (event: ContactEvent) => {
-    if (event.type === Events.TICKET_OPENED) {
-      const ticket = this.getTicketForEvent(event as TicketEvent);
-      if (ticket && ticket.status === 'open') {
-        return ticket.uuid;
-      }
-    }
-  };
-
   private getTicketForEvent(event: TicketEvent) {
     return this.getTicket((event as TicketEvent).ticket.uuid);
   }
@@ -183,48 +174,6 @@ export class ContactHistory extends RapidElement {
         font-weight: 400;
       }
 
-      .sticky-bin {
-        border-top-left-radius: var(--curvature);
-        z-index: 2;
-        box-shadow: rgb(0 0 0 / 15%) 0px 3px 3px 0px;
-        background: rgb(240, 240, 240);
-      }
-
-      .sticky-bin temba-icon {
-        margin-right: 0.75em;
-      }
-
-      .sticky-bin temba-icon[name='check'] {
-        margin-right: 0;
-      }
-
-      .sticky {
-        display: flex;
-        margin: 1em -2em;
-        padding: 1em 2em;
-        background: rgba(240, 240, 240, 0.95);
-        border-bottom: 1px solid rgba(220, 220, 220, 1);
-      }
-
-      .sticky.featured {
-        visibility: hidden;
-      }
-
-      .sticky-bin .event {
-        margin: 0;
-        padding: 1em 2em;
-        border-radius: 0px;
-      }
-
-      .sticky .event {
-        margin-bottom: 0;
-      }
-
-      .sticky .attn,
-      .sticky-bin .attn {
-        color: var(--color-text);
-      }
-
       .attachment img {
         cursor: pointer;
       }
@@ -291,7 +240,11 @@ export class ContactHistory extends RapidElement {
     super.updated(changedProperties);
 
     // fire an event if we get a new event
-    if (changedProperties.has('mostRecentEvent')) {
+    if (
+      changedProperties.has('mostRecentEvent') &&
+      changedProperties.get('mostRecentEvent') &&
+      this.mostRecentEvent
+    ) {
       this.fireCustomEvent(CustomEventType.Refreshed);
     }
 
@@ -508,24 +461,6 @@ export class ContactHistory extends RapidElement {
       this.fetching = true;
       this.empty = true;
     }
-
-    // when our tickets change, make sure we don't have any manual pins
-    if (changedProperties.has('tickets')) {
-      const stickyBin = this.getDiv('.sticky-bin');
-
-      const closedTickets = (this.tickets || []).filter(
-        ticket => ticket && ticket.status === 'closed'
-      );
-
-      for (const closed of closedTickets) {
-        const child = stickyBin.querySelector(
-          `[data-sticky-id="${closed.uuid}"]`
-        );
-        if (child) {
-          stickyBin.removeChild(child);
-        }
-      }
-    }
   }
 
   private refreshTickets() {
@@ -624,14 +559,6 @@ export class ContactHistory extends RapidElement {
   }
 
   private reset() {
-    // clear out our sticky bin which we manipulated manually
-    const stickyBin = this.getDiv('.sticky-bin');
-    if (stickyBin) {
-      while (stickyBin.childElementCount > 0) {
-        stickyBin.removeChild(stickyBin.firstElementChild);
-      }
-    }
-
     this.endpoint = null;
     this.tickets = null;
     this.ticketEvents = {};
@@ -668,30 +595,6 @@ export class ContactHistory extends RapidElement {
 
   private handleScroll() {
     const events = this.getEventsPane();
-
-    // check if any of our sticky elements are off the screen
-    const stickies = this.getEventsPane().querySelectorAll('.sticky');
-    const stickyBin = this.getDiv('.sticky-bin');
-
-    stickies.forEach((sticky: HTMLDivElement) => {
-      const scrollBoundary = events.scrollTop + stickyBin.clientHeight + 136;
-      if (!sticky.classList.contains('featured')) {
-        const eventElement = sticky.firstElementChild as HTMLDivElement;
-        if (scrollBoundary > sticky.offsetTop) {
-          sticky.style.height = eventElement.clientHeight + 'px';
-          sticky.classList.add('featured');
-          (sticky as any).eventElement = eventElement;
-          stickyBin.appendChild(eventElement);
-        }
-      } else {
-        const eventElement = (sticky as any).eventElement;
-        if (scrollBoundary < sticky.offsetTop + sticky.offsetHeight) {
-          sticky.appendChild(eventElement);
-          sticky.classList.remove('featured');
-        }
-      }
-    });
-
     if (events.scrollTop <= SCROLL_THRESHOLD) {
       if (this.eventGroups.length > 0 && !this.fetching && !this.complete) {
         this.fetching = true;
@@ -750,16 +653,7 @@ export class ContactHistory extends RapidElement {
         return renderLabelsAdded(event as LabelsAddedEvent);
 
       case Events.TICKET_OPENED: {
-        const ticketEvent = event as TicketEvent;
-        const activeTicket =
-          !this.ticket || ticketEvent.ticket.uuid === this.ticket;
-
-        let closeHandler = null;
-        const ticket = this.getTicketForEvent(ticketEvent);
-        if (activeTicket && ticket && ticket.status === 'open') {
-          closeHandler = this.handleClose;
-        }
-        return renderTicketOpened(ticketEvent, closeHandler, !this.ticket);
+        return renderTicketAction(event as TicketEvent, 'opened', !this.ticket);
       }
       case Events.TICKET_NOTE_ADDED:
         return renderNoteCreated(event as TicketEvent);
@@ -869,26 +763,15 @@ export class ContactHistory extends RapidElement {
   }
 
   private renderEventContainer(event: ContactEvent) {
-    const stickyId = this.getStickyId(event);
-    const isSticky = !!stickyId;
-
     const renderedEvent = html`
       <div
         @click=${this.handleEventClicked}
-        class="${this.ticket
-          ? 'active-ticket'
-          : ''} event ${event.type} ${isSticky ? 'has-sticky' : ''}"
-        data-sticky-id="${stickyId}"
+        class="${this.ticket ? 'active-ticket' : ''} event ${event.type}"
       >
         ${this.renderEvent(event)}
       </div>
       ${this.debug ? html`<pre>${JSON.stringify(event, null, 2)}</pre>` : null}
     `;
-
-    if (stickyId) {
-      return html`<div class="sticky">${renderedEvent}</div>`;
-    }
-
     return renderedEvent;
   }
 
@@ -925,11 +808,6 @@ export class ContactHistory extends RapidElement {
         : null;
 
     return html`
-      ${
-        this.ticket
-          ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
-          : null
-      }
       ${
         this.fetching
           ? html`<temba-loading units="5" size="10"></temba-loading>`

package/src/contacts/ContactNameFetch.ts

@@ -24,8 +24,9 @@ export class ContactNameFetch extends ContactStoreElement {
       return html` <temba-contact-name
           name=${this.data.name || this.data.anon_display}
           urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
-        />
+        ></temba-contact-name>
         <slot></slot>`;
     }
+    return super.render();
   }
 }