@nyaruka/temba-components 0.17.0 → 0.18.0

package/src/contacts/ContactChat.ts

@@ -6,6 +6,9 @@ import { TextInput } from '../textinput/TextInput';
 import { Completion } from '../completion/Completion';
 import { ContactHistory } from './ContactHistory';
 import { Modax } from '../dialog/Modax';
+import { fetchContact } from './helpers';
+
+const DEFAULT_REFRESH = 10000;
 
 export class ContactChat extends RapidElement {
   public static get styles() {
@@ -24,13 +27,16 @@ export class ContactChat extends RapidElement {
         overflow: hidden;
       }
 
+      .left-pane {
+        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);
+        z-index: 100;
+      }
+
       .chat-wrapper {
         display: flex;
         flex-direction: column;
         height: 100%;
-        background: #fff;
         overflow: hidden;
-        border-radius: var(--curvature);
       }
 
       .chatbox {
@@ -79,11 +85,10 @@ export class ContactChat extends RapidElement {
 
       .toolbar {
         position: relative;
-        width: 2em;
-        background: #f2f2f2;
+        width: 2.5em;
+        background: #e6e6e6;
         transition: all 600ms ease-in;
         z-index: 10;
-        box-shadow: -1px 0px 6px 1px rgba(0, 0, 0, 0.1);
         flex-shrink: 0;
         border-top-right-radius: var(--curvature);
         border-bottom-right-radius: var(--curvature);
@@ -100,7 +105,8 @@ export class ContactChat extends RapidElement {
       }
 
       .toolbar.closed {
-        box-shadow: -1px 0px 1px 1px rgba(0, 0, 0, 0);
+        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);
+        z-index: 1000;
       }
 
       temba-contact-details {
@@ -110,8 +116,6 @@ export class ContactChat extends RapidElement {
         transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),
           opacity 600ms ease-in-out 200ms;
         z-index: 5;
-        margin-right: -1.5em;
-        border-top-right-radius: 6px;
       }
 
       temba-contact-details.hidden {
@@ -149,8 +153,11 @@ export class ContactChat extends RapidElement {
     `;
   }
 
-  @property({ type: Object })
-  contact: Contact = null;
+  @property({ type: String, attribute: 'contact' })
+  contactUUID: string;
+
+  @property({ type: String, attribute: 'ticket' })
+  ticketUUID: string;
 
   @property({ type: String })
   contactsEndpoint = '/api/v2/contacts.json';
@@ -164,9 +171,15 @@ export class ContactChat extends RapidElement {
   @property({ type: Boolean })
   showDetails = true;
 
+  @property({ type: Boolean })
+  monitor = false;
+
   @property({ type: Object })
   currentTicket: Ticket = null;
 
+  @property({ type: Object })
+  currentContact: Contact = null;
+
   @property({ type: Number })
   agent = -1;
 
@@ -175,6 +188,26 @@ export class ContactChat extends RapidElement {
     this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);
   }
 
+  refreshInterval = null;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this.monitor) {
+      this.refreshInterval = setInterval(() => {
+        if (this.currentTicket && this.currentTicket.closed_on) {
+          return;
+        }
+        this.refresh();
+      }, DEFAULT_REFRESH);
+    }
+  }
+
+  public disconnectedCallback() {
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+    }
+  }
+
   public getContactHistory(): ContactHistory {
     return this.shadowRoot.querySelector(
       'temba-contact-history'
@@ -194,13 +227,36 @@ export class ContactChat extends RapidElement {
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
+    /* if (changedProperties.has('currentTicket')) {
+      console.log('currentTicket', this.currentTicket);
+    }
+
+    if (changedProperties.has('currentContact')) {
+      console.log('currentContact', this.currentContact);
+    }
+
+    if (changedProperties.has('contactUUID')) {
+      console.log('contactUUID', this.contactUUID);
+    }*/
+
+    // we were provided a uuid, fetch our contact details
+    if (changedProperties.has('contactUUID')) {
+      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(
+        contact => {
+          this.currentContact = contact;
+        }
+      );
+    }
+
     // if we don't have an endpoint infer one
-    if (changedProperties.has('contact')) {
+    if (changedProperties.has('currentContact')) {
       // focus our completion on load
       const prevContact = changedProperties.get('contact');
       if (
         !prevContact ||
-        (this.contact && this.contact.ticket.uuid !== prevContact.ticket.uuid)
+        (this.currentContact &&
+          this.currentContact.ticket &&
+          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)
       ) {
         const completion = this.shadowRoot.querySelector(
           'temba-completion'
@@ -223,7 +279,7 @@ export class ContactChat extends RapidElement {
   }
 
   private handleReopen() {
-    const uuid = this.contact.ticket.uuid;
+    const uuid = this.currentTicket.uuid;
     postJSON(`/api/v2/tickets.json?uuid=${uuid}`, {
       status: 'open',
     })
@@ -239,11 +295,16 @@ export class ContactChat extends RapidElement {
   }
 
   private handleSend() {
-    postJSON(`/api/v2/broadcasts.json`, {
-      contacts: [this.contact.uuid],
+    const payload = {
+      contacts: [this.currentContact.uuid],
       text: this.currentChat,
-      ticket: this.currentTicket.uuid,
-    })
+    };
+
+    if (this.currentTicket) {
+      payload['ticket'] = this.currentTicket.uuid;
+    }
+
+    postJSON(`/api/v2/broadcasts.json`, payload)
       .then(() => {
         this.currentChat = '';
         this.refresh(true);
@@ -264,26 +325,26 @@ export class ContactChat extends RapidElement {
     setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);
   }
 
-  private handleCurrentTicketChanged(event: CustomEvent): void {
-    this.currentTicket = event.detail.context;
-  }
-
   public render(): TemplateResult {
     return html`
       <div style="display: flex; height: 100%;">
-        <div style="flex-grow: 1; margin-right: 0em;">
+        <div style="flex-grow: 1; margin-right: 0em;" class="left-pane">
           <div class="chat-wrapper">
-            ${this.contact
+            ${this.currentContact
               ? html` <temba-contact-history
-                    .uuid=${this.contact.uuid}
-                    .ticket=${this.contact.ticket.uuid}
-                    .endDate=${this.contact.ticket.closed_on}
+                    .uuid=${this.currentContact.uuid}
+                    .contact=${this.currentContact}
+                    .ticket=${
+                      this.currentTicket ? this.currentTicket.uuid : null
+                    }
+                    .endDate=${
+                      this.currentTicket ? this.currentTicket.closed_on : null
+                    }
                     .agent=${this.agent}
-                    @temba-context-changed=${this.handleCurrentTicketChanged}
                   ></temba-contact-history>
 
                   ${
-                    this.contact.ticket.closed_on
+                    this.currentTicket && this.currentTicket.closed_on
                       ? html`<div class="closed-footer">
                           <temba-button
                             id="reopen-button"
@@ -320,20 +381,19 @@ export class ContactChat extends RapidElement {
               : null}
           </div>
         </div>
-        ${this.contact
+        ${this.currentContact
           ? html`<temba-contact-details
               style="z-index: 10"
               class="${this.showDetails ? '' : 'hidden'}"
-              .uuid="${this.contact.uuid}"
-              .name="${this.contact.name}"
+              showGroups="true"
               .visible=${this.showDetails}
               .ticket=${this.currentTicket}
-              endpoint="${this.contactsEndpoint}?uuid=${this.contact.uuid}"
+              .contact=${this.currentContact}
             ></temba-contact-details>`
           : null}
 
         <div class="toolbar ${this.showDetails ? '' : 'closed'}">
-          ${this.contact
+          ${this.currentContact
             ? html`
                 <temba-tip
                   style="margin-top:5px"

package/src/contacts/ContactDetails.ts

@@ -10,18 +10,16 @@ export class ContactDetails extends RapidElement {
   static get styles() {
     return css`
       :host {
-        box-shadow: inset 14px 0 7px -14px rgba(0, 0, 0, 0.15);
         background: #f9f9f9;
         display: block;
         height: 100%;
         position: relative;
-        border-bottom-right-radius: var(--curvature);
         overflow: hidden;
+        -webkit-mask-image: -webkit-radial-gradient(white, black);
       }
 
       .wrapper {
-        padding-right: 3.5em;
-        padding-left: 1em;
+        padding: 0em 1em;
       }
 
       a {
@@ -33,9 +31,9 @@ export class ContactDetails extends RapidElement {
       }
 
       .contact > .name {
-        font-size: 18px;
+        font-size: 1.2em;
         font-weight: 400;
-        padding: 0.75em;
+        padding: 0.5em 0.75em;
         padding-right: 1em;
       }
 
@@ -82,12 +80,9 @@ export class ContactDetails extends RapidElement {
       }
 
       .fields-wrapper {
-        margin-top: 1em;
         background: #fff;
-        border-radius: var(--curvature);
         overflow: hidden;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        margin: 0em -1em;
       }
 
       .body-wrapper {
@@ -102,9 +97,7 @@ export class ContactDetails extends RapidElement {
       .fields {
         padding: 1em;
         max-height: 200px;
-        border-radius: var(--curvature);
         overflow-y: auto;
-        -webkit-mask-image: -webkit-radial-gradient(white, black);
       }
 
       .field {
@@ -142,7 +135,7 @@ export class ContactDetails extends RapidElement {
   @property({ type: String })
   uuid: string;
 
-  @property({ attribute: false, type: Object })
+  @property({ type: Object })
   contact: Contact;
 
   @property({ attribute: false })
@@ -172,14 +165,10 @@ export class ContactDetails extends RapidElement {
 
   public updated(changes: Map<string, any>) {
     super.updated(changes);
-    if (changes.has('endpoint')) {
-      this.flow = null;
-      this.expandFields = false;
 
+    if (changes.has('contact')) {
       const store: Store = document.querySelector('temba-store');
-
-      fetchContact(this.endpoint).then((contact: Contact) => {
-        this.contact = contact;
+      if (this.contact && this.contact.fields) {
         this.fields = Object.keys(this.contact.fields).filter((key: string) => {
           const hasField = !!this.contact.fields[key];
           return hasField && store.getContactField(key).pinned;
@@ -198,6 +187,14 @@ export class ContactDetails extends RapidElement {
           }
           return a.name.localeCompare(b.name);
         });
+      }
+    }
+
+    if (changes.has('endpoint')) {
+      this.flow = null;
+      this.expandFields = false;
+      fetchContact(this.endpoint).then((contact: Contact) => {
+        this.contact = contact;
       });
     }
   }
@@ -237,9 +234,9 @@ export class ContactDetails extends RapidElement {
 
     if (this.contact) {
       return html`<div class="contact">
-        <div class="name">${this.name || this.contact.name}</div>
-        <div class="wrapper">
-          ${this.showGroups
+        <div class="name">
+          ${this.name || this.contact.name}
+          ${this.showGroups && !this.ticket
             ? html`<div>
                 ${this.contact.groups.map((group: Group) => {
                   return html`<a
@@ -254,6 +251,8 @@ export class ContactDetails extends RapidElement {
                 })}
               </div>`
             : html``}
+        </div>
+        <div class="wrapper">
           ${body
             ? html`<div class="body-wrapper">
                 <div class="body">${body}</div>
@@ -306,13 +305,14 @@ export class ContactDetails extends RapidElement {
             : null}
 
           <div class="actions">
-            ${this.showGroups
+            ${this.showGroups && !this.ticket
               ? html`
                   <div class="start-flow">
                     <temba-select
                       endpoint="/api/v2/flows.json?archived=false"
                       placeholder="Start Flow"
                       flavor="small"
+                      searchable="true"
                       .values=${this.flow ? [this.flow] : []}
                       @temba-selection=${this.handleFlowChanged}
                     ></temba-select>