@nyaruka/temba-components 0.86.0 → 0.87.0

package/src/contacts/ContactChat.ts

@@ -171,7 +171,7 @@ export class ContactChat extends ContactStoreElement {
     const buttonName = evt.detail.name;
     if (buttonName === 'Send') {
       const payload = {
-        contact: this.currentContact.uuid,
+        contact: this.currentContact.uuid
       };
       const compose = evt.currentTarget as Compose;
       if (compose) {
@@ -182,7 +182,7 @@ export class ContactChat extends ContactStoreElement {
         const attachments = compose.currentAttachments;
         if (attachments && attachments.length > 0) {
           const attachment_uuids = attachments.map(
-            attachment => attachment.uuid
+            (attachment) => attachment.uuid
           );
           payload['attachments'] = attachment_uuids;
         }
@@ -194,7 +194,7 @@ export class ContactChat extends ContactStoreElement {
       const genericError = buttonName + ' failed, please try again.';
 
       postJSON(`/api/v2/messages.json`, payload)
-        .then(response => {
+        .then((response) => {
           if (response.status < 400) {
             compose.reset();
             this.refresh(true);
@@ -231,7 +231,7 @@ export class ContactChat extends ContactStoreElement {
             compose.buttonError = genericError;
           }
         })
-        .catch(error => {
+        .catch((error) => {
           console.error(error);
           compose.buttonError = genericError;
         });

package/src/contacts/ContactDetails.ts

@@ -7,14 +7,14 @@ const STATUS = {
   active: 'Active',
   blocked: 'Blocked',
   stopped: 'Stopped',
-  archived: 'Archived',
+  archived: 'Archived'
 };
 
 const SCHEMES = {
   tel: 'Phone',
   whatsapp: 'WhatsApp',
   fcm: 'Firebase Cloud Messaging',
-  twitter: 'Twitter',
+  twitter: 'Twitter'
 };
 
 export class ContactDetails extends ContactStoreElement {
@@ -69,7 +69,7 @@ export class ContactDetails extends ContactStoreElement {
         ${this.data.groups.length > 0
           ? html` <div class="groups">
               <div class="label">Groups</div>
-              ${this.data.groups.map(group => {
+              ${this.data.groups.map((group) => {
                 return html`<temba-label
                   class="group"
                   onclick="goto(event)"
@@ -82,7 +82,7 @@ export class ContactDetails extends ContactStoreElement {
               })}
             </div>`
           : null}
-        ${this.data.urns.map(urn => {
+        ${this.data.urns.map((urn) => {
           const parts = urn.split(':');
           let scheme = SCHEMES[parts[0]];
           if (!scheme) {

package/src/contacts/ContactFieldEditor.ts

@@ -11,7 +11,7 @@ enum Status {
   Success = 'success',
   Failure = 'failure',
   Saving = 'saving',
-  Ready = 'ready',
+  Ready = 'ready'
 }
 
 export class ContactFieldEditor extends RapidElement {
@@ -318,7 +318,7 @@ export class ContactFieldEditor extends RapidElement {
     if (icon === 'search') {
       this.fireCustomEvent(CustomEventType.ButtonClicked, {
         key: this.key,
-        value: this.value,
+        value: this.value
       });
     }
 
@@ -393,7 +393,7 @@ export class ContactFieldEditor extends RapidElement {
           unset: !this.value,
           disabled: this.disabled,
           mutable: !this.disabled,
-          dirty: this.dirty,
+          dirty: this.dirty
         })}
       >
         <div class="label"><div class="name">${this.name}</div></div>
@@ -444,7 +444,7 @@ export class ContactFieldEditor extends RapidElement {
           unset: !this.value,
           disabled: this.disabled,
           mutable: !this.disabled,
-          dirty: this.dirty,
+          dirty: this.dirty
         })}
       >
         ${this.type === 'datetime'

package/src/contacts/ContactFields.ts

@@ -111,7 +111,7 @@ export class ContactFields extends ContactStoreElement {
     const field = evt.currentTarget as ContactFieldEditor;
     const value = field.value;
     postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
-      fields: { [field.key]: value },
+      fields: { [field.key]: value }
     })
       .then((response: any) => {
         field.handleResponse(response);
@@ -119,7 +119,7 @@ export class ContactFields extends ContactStoreElement {
         // returns a single contact with latest updates
         this.setContact(response.json);
       })
-      .catch(error => {
+      .catch((error) => {
         field.handleResponse(error);
       });
   }

package/src/contacts/ContactHistory.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html, TemplateResult } from 'lit-html';
-import { Contact, CustomEventType, Msg, Ticket } from '../interfaces';
+import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Asset, getAssets, getClasses, postJSON, throttle } from '../utils';
 
@@ -42,20 +42,19 @@ import {
   renderResultEvent,
   renderTicketAction,
   renderTicketAssigned,
-  renderTicketOpened,
   renderUpdateEvent,
   renderWebhookEvent,
   TicketEvent,
   UpdateFieldEvent,
   UpdateResultEvent,
   URNsChangedEvent,
-  WebhookEvent,
+  WebhookEvent
 } from './events';
 import {
   fetchContactHistory,
   MAX_CHAT_REFRESH,
   MIN_CHAT_REFRESH,
-  SCROLL_THRESHOLD,
+  SCROLL_THRESHOLD
 } from './helpers';
 import { Lightbox } from '../lightbox/Lightbox';
 import { Store } from '../store/Store';
@@ -100,7 +99,7 @@ export class ContactHistory extends RapidElement {
   }
 
   private getTicket(uuid: string) {
-    return (this.tickets || []).find(ticket => ticket.uuid === uuid);
+    return (this.tickets || []).find((ticket) => ticket.uuid === uuid);
   }
 
   static get styles() {
@@ -313,11 +312,11 @@ export class ContactHistory extends RapidElement {
           // dedupe any events we get from the server
           // TODO: perhaps make this a little less crazy
           let removed = 0;
-          this.eventGroups.forEach(g => {
+          this.eventGroups.forEach((g) => {
             const before = g.events.length;
             g.events = g.events.filter(
-              prev =>
-                !fetchedEvents.find(fetched => {
+              (prev) =>
+                !fetchedEvents.find((fetched) => {
                   return (
                     prev.created_on == fetched.created_on &&
                     prev.type === fetched.type
@@ -339,7 +338,9 @@ export class ContactHistory extends RapidElement {
             )[0];
 
             forceOpen = sliced.open;
-            fetchedEvents.splice(0, 0, ...sliced.events);
+            if (sliced.events.length > 0) {
+              fetchedEvents.splice(0, 0, ...sliced.events);
+            }
           }
 
           const grouped = this.getEventGroups(fetchedEvents);
@@ -347,7 +348,9 @@ export class ContactHistory extends RapidElement {
             if (forceOpen) {
               grouped[grouped.length - 1].open = forceOpen;
             }
-            this.eventGroups = [...previousGroups, ...grouped];
+            this.eventGroups = [...previousGroups, ...grouped].filter(
+              (group) => group.events.length > 0
+            );
           }
           this.refreshing = false;
           this.scheduleRefresh();
@@ -491,14 +494,14 @@ export class ContactHistory extends RapidElement {
     const events = this.getEventsPane();
     events.scrollTo({
       top: events.scrollHeight,
-      behavior: smooth ? 'smooth' : 'auto',
+      behavior: smooth ? 'smooth' : 'auto'
     });
     this.showMessageAlert = false;
 
     window.setTimeout(() => {
       events.scrollTo({
         top: events.scrollHeight,
-        behavior: smooth ? 'smooth' : 'auto',
+        behavior: smooth ? 'smooth' : 'auto'
       });
     }, 0);
   }
@@ -521,7 +524,7 @@ export class ContactHistory extends RapidElement {
         eventGroup = {
           open: false,
           events: [event],
-          type: currentEventGroupType,
+          type: currentEventGroupType
         };
       } else {
         // our event matches the current group, stuff it in there
@@ -716,13 +719,13 @@ export class ContactHistory extends RapidElement {
   private handleClose(uuid: string) {
     this.httpComplete = postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
-      action: 'close',
+      action: 'close'
     })
       .then(() => {
         this.refreshTickets();
         this.refresh();
         this.fireCustomEvent(CustomEventType.ContentChanged, {
-          ticket: { uuid, status: 'closed' },
+          ticket: { uuid, status: 'closed' }
         });
       })
       .catch((response: any) => {
@@ -738,14 +741,14 @@ export class ContactHistory extends RapidElement {
         const ticket = assets[0] as Ticket;
         if (ticket.assignee && ticket.assignee.email === agent) {
           this.fireCustomEvent(CustomEventType.ContentChanged, {
-            ticket: { uuid: this.ticket, assigned: 'self' },
+            ticket: { uuid: this.ticket, assigned: 'self' }
           });
         } else {
           this.fireCustomEvent(CustomEventType.ContentChanged, {
             ticket: {
               uuid: this.ticket,
-              assigned: ticket.assignee ? ticket.assignee : null,
-            },
+              assigned: ticket.assignee ? ticket.assignee : null
+            }
           });
         }
       }
@@ -756,8 +759,8 @@ export class ContactHistory extends RapidElement {
     return [
       {
         event: 'scroll',
-        method: throttle(this.handleScroll, 50),
-      },
+        method: throttle(this.handleScroll, 50)
+      }
     ];
   }
 
@@ -805,7 +808,7 @@ export class ContactHistory extends RapidElement {
           const classes = getClasses({
             grouping: true,
             [grouping]: true,
-            expanded: eventGroup.open,
+            expanded: eventGroup.open
           });
           return html`<div class="${classes}">
             ${grouping === 'verbose'
@@ -857,7 +860,7 @@ export class ContactHistory extends RapidElement {
                   this.scrollToBottom(true);
                 }}
                 class="new-messages ${getClasses({
-                  expanded: this.showMessageAlert,
+                  expanded: this.showMessageAlert
                 })}"
               >
                 New Messages

package/src/contacts/ContactPending.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import {
   CustomEventType,
   ScheduledEvent,
-  ScheduledEventType,
+  ScheduledEventType
 } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 import { Icon } from '../vectoricon';
@@ -11,7 +11,7 @@ import { Icon } from '../vectoricon';
 const ICONS = {
   [ScheduledEventType.CampaignEvent]: Icon.campaign,
   [ScheduledEventType.ScheduledBroadcast]: Icon.message,
-  [ScheduledEventType.ScheduledTrigger]: Icon.trigger,
+  [ScheduledEventType.ScheduledTrigger]: Icon.trigger
 };
 
 export class ContactPending extends StoreElement {
@@ -33,7 +33,7 @@ export class ContactPending extends StoreElement {
   REPEAT_PERIOD = {
     O: this.lang_once,
     D: this.lang_daily,
-    W: this.lang_weekly,
+    W: this.lang_weekly
   };
 
   static get styles() {
@@ -226,7 +226,7 @@ export class ContactPending extends StoreElement {
     if (this.data) {
       if (this.data.length > 0) {
         return html`
-          ${this.data.map(event => {
+          ${this.data.map((event) => {
             return this.renderEvent(event);
           })}
         `;

package/src/contacts/ContactTickets.ts

@@ -1,6 +1,6 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';
+import { CustomEventType, Ticket, TicketStatus } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 import { getClasses, postJSON, stopEvent } from '../utils';
 import { Icon } from '../vectoricon';
@@ -244,7 +244,7 @@ export class ContactTickets extends StoreElement {
   private handleClose(uuid: string) {
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
-      action: 'close',
+      action: 'close'
     })
       .then(() => {
         this.refresh();
@@ -257,7 +257,7 @@ export class ContactTickets extends StoreElement {
   private handleReopen(uuid: string) {
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
-      action: 'reopen',
+      action: 'reopen'
     })
       .then(() => {
         this.refresh();
@@ -269,7 +269,7 @@ export class ContactTickets extends StoreElement {
 
   public handleTicketAssignment(uuid: string, email: string) {
     // if its already assigned to use, it's a noop
-    const ticket = this.data.find(ticket => ticket.uuid === uuid);
+    const ticket = this.data.find((ticket) => ticket.uuid === uuid);
     if (ticket.assignee && ticket.assignee.email === email) {
       return;
     }
@@ -278,7 +278,7 @@ export class ContactTickets extends StoreElement {
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
       action: 'assign',
-      assignee: email,
+      assignee: email
     })
       .then(() => {
         this.refresh();
@@ -292,7 +292,7 @@ export class ContactTickets extends StoreElement {
   public renderTicket(ticket: Ticket) {
     const date = ticket.opened_on;
     const users = this.store.getAssignableUsers();
-    const agent = users.find(user => user.email === this.agent);
+    const agent = users.find((user) => user.email === this.agent);
     return html`
       <div
         @click=${() => {
@@ -305,7 +305,7 @@ export class ContactTickets extends StoreElement {
         class="ticket ${ticket.status} ${getClasses({
           clickable: this.clickable,
           expandable: this.expandable,
-          expanded: this.expanded,
+          expanded: this.expanded
         })}"
       >
         <div class="header">
@@ -414,7 +414,7 @@ export class ContactTickets extends StoreElement {
                           : null}
 
                         <div class="options option-group">
-                          ${this.store.getAssignableUsers().map(user => {
+                          ${this.store.getAssignableUsers().map((user) => {
                             if (
                               ticket.assignee &&
                               user.email === ticket.assignee.email
@@ -472,7 +472,7 @@ export class ContactTickets extends StoreElement {
 
   public render(): TemplateResult {
     if (this.data && this.data.length > 0) {
-      const tickets = this.data.map(ticket => {
+      const tickets = this.data.map((ticket) => {
         return this.renderTicket(ticket);
       });
       return html`${tickets}`;

package/src/contacts/events.ts

@@ -515,7 +515,7 @@ export enum Events {
   TICKET_REOPENED = 'ticket_reopened',
   OPTIN_REQUESTED = 'optin_requested',
   ERROR = 'error',
-  FAILURE = 'failure',
+  FAILURE = 'failure'
 }
 
 export interface ContactEvent {
@@ -830,7 +830,7 @@ export const renderMsgEvent = (event: MsgEvent): TemplateResult => {
           event.msg.attachments || []
         ).length} ${getClasses({
           msg: true,
-          automated: !isInbound && !event.created_by,
+          automated: !isInbound && !event.created_by
         })}"
       >
         ${event.msg.text
@@ -839,7 +839,7 @@ export const renderMsgEvent = (event: MsgEvent): TemplateResult => {
         ${event.msg.attachments
           ? html`<div class="attachments">
               ${event.msg.attachments.map(
-                attachment =>
+                (attachment) =>
                   html` <div class="attachment">
                     ${renderAttachment(attachment)}
                   </div>`

package/src/contacts/helpers.ts

@@ -36,13 +36,13 @@ export const fetchContactHistory = (
   after: number = undefined
 ): Promise<ContactHistoryPage> => {
   if (reset) {
-    pendingRequests.forEach(controller => {
+    pendingRequests.forEach((controller) => {
       controller.abort();
     });
     pendingRequests = [];
   }
 
-  return new Promise<ContactHistoryPage>(resolve => {
+  return new Promise<ContactHistoryPage>((resolve) => {
     const controller = new AbortController();
     pendingRequests.push(controller);
 

package/src/contactsearch/ContactSearch.ts

@@ -1,4 +1,4 @@
-import { TemplateResult, html, css, PropertyValueMap } from 'lit';
+import { TemplateResult, html, css } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { property } from 'lit/decorators.js';
 import { getClasses, postJSON, stopEvent, WebResponse } from '../utils';
@@ -8,7 +8,7 @@ import { Contact, CustomEventType } from '../interfaces';
 import { FormElement } from '../FormElement';
 import { Checkbox } from '../checkbox/Checkbox';
 import { msg } from '@lit/localize';
-import { OmniOption, Omnibox } from '../omnibox/Omnibox';
+import { OmniOption } from '../omnibox/Omnibox';
 
 const QUEIT_MILLIS = 2000;
 
@@ -303,7 +303,7 @@ export class ContactSearch extends FormElement {
           ? { query: this.query }
           : { contact_uuids, group_uuids },
 
-        exclude: this.exclusions,
+        exclude: this.exclusions
       }).then((response: WebResponse) => {
         this.fetching = false;
         if (response.status === 200) {
@@ -315,7 +315,7 @@ export class ContactSearch extends FormElement {
             advanced: this.advanced,
             query: this.query,
             exclusions: this.exclusions,
-            recipients: this.recipients,
+            recipients: this.recipients
           });
 
           if (this.summary.error) {
@@ -351,7 +351,7 @@ export class ContactSearch extends FormElement {
       advanced: this.advanced,
       query: this.query,
       exclusions: this.exclusions,
-      recipients: this.recipients,
+      recipients: this.recipients
     });
   }
 
@@ -360,7 +360,7 @@ export class ContactSearch extends FormElement {
     this.query = input.inputElement.value;
   }
 
-  private handleRecipientsChanged(evt: any) {
+  private handleRecipientsChanged() {
     if (this.refreshKey !== '0' || this.initialized) {
       this.refresh();
     } else {
@@ -441,7 +441,7 @@ export class ContactSearch extends FormElement {
       this.summary.blockers.length > 0
     ) {
       return html`${this.summary.blockers.map(
-        error =>
+        (error) =>
           html`<temba-alert level="error">${unsafeHTML(error)}</temba-alert>`
       )}`;
     }
@@ -520,7 +520,7 @@ export class ContactSearch extends FormElement {
           initialized: this.initialized || this.fetching,
           empty:
             ((this.summary && this.summary.error) || !this.summary) &&
-            !this.fetching,
+            !this.fetching
         })}"
       >
         <temba-loading units="6" size="8"></temba-loading>
@@ -529,7 +529,7 @@ export class ContactSearch extends FormElement {
 
       ${this.summary && this.summary.warnings
         ? this.summary.warnings.map(
-            warning =>
+            (warning) =>
               html`<temba-alert level="warning"
                 >${unsafeHTML(warning)}</temba-alert
               >`

package/src/date/TembaDate.ts

@@ -11,7 +11,7 @@ export const Display = {
   timedate: 'timedate',
   duration: 'duration',
   relative: 'relative',
-  day: 'LLL d',
+  day: 'LLL d'
 };
 
 export class TembaDate extends RapidElement {

package/src/datepicker/DatePicker.ts

@@ -186,7 +186,7 @@ export default class DatePicker extends FormElement {
     event.stopPropagation();
     if (this.time) {
       this.datetime = DateTime.fromISO(event.target.value, {
-        zone: this.timezone,
+        zone: this.timezone
       });
       this.value = this.datetime.toUTC().toISO();
     } else {

package/src/dialog/Dialog.ts

@@ -9,7 +9,7 @@ import { ResizeElement } from '../ResizeElement';
 export enum ButtonType {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
-  DESTRUCTIVE = 'destructive',
+  DESTRUCTIVE = 'destructive'
 }
 export class DialogButton {
   name?: string;
@@ -24,7 +24,7 @@ export class Dialog extends ResizeElement {
     return {
       small: '400px',
       medium: '600px',
-      large: '655px',
+      large: '655px'
     };
   }
 
@@ -265,14 +265,14 @@ export class Dialog extends ResizeElement {
       this.buttons.push({
         name: this.cancelButtonName,
         type: ButtonType.SECONDARY,
-        closes: true,
+        closes: true
       });
     }
 
     if (changes.has('primaryButtonName') && this.primaryButtonName) {
       this.buttons.push({
         name: this.primaryButtonName,
-        type: ButtonType.PRIMARY,
+        type: ButtonType.PRIMARY
       });
     }
   }
@@ -409,7 +409,7 @@ export class Dialog extends ResizeElement {
     const dialogStyle = {
       width: this.width,
       minWidth: '250px',
-      maxWidth: '600px',
+      maxWidth: '600px'
     };
     if (!this.width) {
       dialogStyle['width'] = Dialog.widths[this.size];
@@ -440,7 +440,7 @@ export class Dialog extends ResizeElement {
           'dialog-loading': this.loading,
           'dialog-animation-end': this.animationEnd,
           'dialog-ready': this.ready,
-          mobile: this.isMobile(),
+          mobile: this.isMobile()
         })}"
       >
         <div style="position: absolute; width: 100%;">

package/src/dialog/Modax.ts

@@ -206,11 +206,11 @@ export class Modax extends RapidElement {
         if (submitButton) {
           this.buttons = [
             { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },
-            { type: ButtonType.PRIMARY, name: submitButton.value },
+            { type: ButtonType.PRIMARY, name: submitButton.value }
           ];
         } else {
           this.buttons = [
-            { type: ButtonType.SECONDARY, name: 'Ok', closes: true },
+            { type: ButtonType.SECONDARY, name: 'Ok', closes: true }
           ];
         }
         this.submitting = false;
@@ -289,7 +289,7 @@ export class Modax extends RapidElement {
           this.updateComplete.then(() => {
             this.updatePrimaryButton();
             this.fireCustomEvent(CustomEventType.Loaded, {
-              body: this.getBody(),
+              body: this.getBody()
             });
           });
         }
@@ -303,7 +303,7 @@ export class Modax extends RapidElement {
 
     let postData = form ? serialize(form) : '';
     if (extra) {
-      Object.keys(extra).forEach(key => {
+      Object.keys(extra).forEach((key) => {
         postData +=
           (postData.length > 1 ? '&' : '') +
           encodeURIComponent(key) +
@@ -337,7 +337,7 @@ export class Modax extends RapidElement {
               });
             } else {
               this.fireCustomEvent(CustomEventType.Redirected, {
-                url: redirect,
+                url: redirect
               });
               this.open = false;
             }
@@ -351,7 +351,7 @@ export class Modax extends RapidElement {
           }
         }, 1000);
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error);
       });
   }
@@ -404,7 +404,7 @@ export class Modax extends RapidElement {
     if (wizard) {
       const completed = (wizard.getAttribute('data-completed') || '')
         .split(',')
-        .filter(step => step.length > 0);
+        .filter((step) => step.length > 0);
 
       for (let i = 0; i < this.wizardStepCount; i++) {
         wizardStepBalls.push(
@@ -414,7 +414,7 @@ export class Modax extends RapidElement {
             class="${getClasses({
               'step-ball': true,
               active: this.wizardStep - 1 === i,
-              complete: i < completed.length,
+              complete: i < completed.length
             })}"
           ></div>`
         );

package/src/dropdown/Dropdown.ts

@@ -2,7 +2,6 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
-import { ContactStoreElement } from '../contacts/ContactStoreElement';
 
 export class Dropdown extends RapidElement {
   static get styles() {
@@ -249,7 +248,7 @@ export class Dropdown extends RapidElement {
             right: this.right,
             left: this.left,
             top: this.top,
-            bottom: this.bottom,
+            bottom: this.bottom
           })}"
           tabindex="0"
           @mousedown=${this.handleDropdownMouseDown}