@nyaruka/temba-components 0.109.1 → 0.110.0

package/src/compose/Compose.ts

@@ -11,6 +11,15 @@ import { Tab } from '../tabpane/Tab';
 import { TextInput } from '../textinput/TextInput';
 import { ShortcutList } from '../list/ShortcutList';
 
+export interface ComposeValue {
+  text: string;
+  attachments: { uuid: string }[];
+  quick_replies: string[];
+  optin: string;
+  template: string;
+  variables: string[];
+}
+
 export class Compose extends FormElement {
   static get styles() {
     return css`
@@ -81,11 +90,6 @@ export class Compose extends FormElement {
         --temba-charcount-summary-bottom: 105px;
       }
 
-      temba-button {
-        --button-y: 1px;
-        --button-x: 12px;
-      }
-
       .send-error {
         color: rgba(250, 0, 0, 0.75);
         font-size: var(--help-text-size);
@@ -108,10 +112,6 @@ export class Compose extends FormElement {
         margin: 0.5em;
       }
 
-      #send-button {
-        margin: 0.3em;
-      }
-
       temba-tabs {
         --focused-tab-color: #f4f4f4;
         min-height: var(--compose-min-height, 13.5em);
@@ -179,9 +179,6 @@ export class Compose extends FormElement {
   @property({ type: Boolean })
   completion: boolean;
 
-  @property({ type: Boolean })
-  chatbox: boolean;
-
   @property({ type: Boolean })
   attachments: boolean;
 
@@ -198,10 +195,10 @@ export class Compose extends FormElement {
   counter: boolean;
 
   @property({ type: Boolean })
-  button: boolean;
+  autogrow: boolean;
 
   @property({ type: Boolean })
-  autogrow: boolean;
+  shortcuts: boolean;
 
   @property({ type: String })
   currentText = '';
@@ -249,14 +246,8 @@ export class Compose extends FormElement {
   @property({ type: String })
   templateEndpoint = '/api/internal/templates.json';
 
-  @property({ type: String })
-  buttonName = 'Send';
-
   @property({ type: Boolean, attribute: false })
-  buttonDisabled = true;
-
-  @property({ type: String, attribute: false })
-  buttonError = '';
+  empty = true;
 
   @property({ type: Boolean, attribute: 'widget_only' })
   widgetOnly: boolean;
@@ -371,7 +362,7 @@ export class Compose extends FormElement {
       changes.has('currentTemplate') ||
       changes.has('variables')
     ) {
-      this.toggleButton();
+      this.checkIfEmpty();
 
       const trimmed = this.currentText ? this.currentText.trim() : '';
       if (
@@ -405,15 +396,11 @@ export class Compose extends FormElement {
   }
 
   private setFocusOnChatbox(): void {
-    if (this.chatbox) {
-      const completion = this.shadowRoot.querySelector(
-        '.chatbox'
-      ) as Completion;
-      if (completion) {
-        window.setTimeout(() => {
-          completion.focus();
-        }, 0);
-      }
+    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;
+    if (completion) {
+      window.setTimeout(() => {
+        completion.focus();
+      }, 0);
     }
   }
 
@@ -425,7 +412,6 @@ export class Compose extends FormElement {
     this.currentText = '';
     this.currentQuickReplies = [];
     this.currentAttachments = [];
-    this.buttonError = '';
     this.resetTabs();
   }
 
@@ -463,28 +449,16 @@ export class Compose extends FormElement {
     }
   }
 
-  public toggleButton() {
-    if (this.button) {
-      this.buttonError = '';
-      const chatboxEmpty = this.currentText.trim().length === 0;
-      const attachmentsEmpty = this.currentAttachments.length === 0;
-      if (this.chatbox && this.attachments) {
-        this.buttonDisabled = chatboxEmpty && attachmentsEmpty;
-      } else if (this.chatbox) {
-        this.buttonDisabled = chatboxEmpty;
-      } else if (this.attachments) {
-        this.buttonDisabled = attachmentsEmpty;
-      } else {
-        this.buttonDisabled = true;
-      }
+  public checkIfEmpty() {
+    const chatboxEmpty = this.currentText.trim().length === 0;
+    const attachmentsEmpty = this.currentAttachments.length === 0;
+    if (this.attachments) {
+      this.empty = chatboxEmpty && attachmentsEmpty;
+    } else {
+      this.empty = chatboxEmpty;
     }
   }
 
-  private handleSendClick(evt: Event) {
-    evt.stopPropagation();
-    this.handleSend();
-  }
-
   private getCurrentLine(): { text: string; index: number } {
     const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;
 
@@ -535,28 +509,26 @@ export class Compose extends FormElement {
       }
     }
 
-    if (this.button) {
-      if (evt.key === 'Enter') {
-        if (!evt.shiftKey) {
-          evt.preventDefault();
-          if (this.completion) {
-            const chat = evt.target as Completion;
-            if (!chat.hasVisibleOptions()) {
-              this.handleSend();
-            }
-          } else {
-            this.handleSend();
+    if (evt.key === 'Enter') {
+      if (!evt.shiftKey) {
+        evt.preventDefault();
+        if (this.completion) {
+          const chat = evt.target as Completion;
+          if (!chat.hasVisibleOptions()) {
+            this.triggerSend();
           }
+        } else {
+          this.triggerSend();
         }
       }
     }
   }
 
-  private handleSend() {
-    if (!this.buttonDisabled) {
-      this.buttonDisabled = true;
-      const name = this.buttonName;
-      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });
+  public triggerSend() {
+    if (!this.empty) {
+      this.fireCustomEvent(CustomEventType.Submitted, {
+        langValues: this.langValues
+      });
     }
   }
 
@@ -569,6 +541,10 @@ export class Compose extends FormElement {
     (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = 0;
   }
 
+  public getTabs(): TabPane {
+    return this.shadowRoot.querySelector('temba-tabs') as TabPane;
+  }
+
   public render(): TemplateResult {
     return html`
       <temba-field
@@ -757,13 +733,19 @@ export class Compose extends FormElement {
           borderColor="#ebdf6f"
         ></temba-tab-->
 
-        <temba-tab name="Shortcuts" icon="shortcut" selectionBackground="#fff">
-          <div class="shortcut-wrapper">
-            <temba-shortcuts
-              @temba-selection=${this.handleShortcutSelection}
-            ></temba-shortcuts>
-          </div>
-        </temba-tab>
+        ${this.shortcuts
+          ? html`<temba-tab
+              name="Shortcuts"
+              icon="shortcut"
+              selectionBackground="#fff"
+            >
+              <div class="shortcut-wrapper">
+                <temba-shortcuts
+                  @temba-selection=${this.handleShortcutSelection}
+                ></temba-shortcuts>
+              </div>
+            </temba-tab>`
+          : null}
 
         <div slot="tab-right" class="top-right">
           ${this.counter ? this.getCounter() : null}
@@ -773,24 +755,19 @@ export class Compose extends FormElement {
           slot="pane-bottom"
           class="pane-bottom ${this.hasPendingText ? 'pending' : ''}"
         >
-          ${this.chatbox
-            ? html`<temba-completion
-                class="chatbox"
-                .value=${this.initialText}
-                gsm
-                textarea
-                ?disableCompletion=${!this.completion}
-                ?autogrow=${this.autogrow}
-                maxlength=${this.maxLength}
-                @change=${this.handleChatboxChange}
-                @keydown=${this.handleKeyDown}
-                placeholder="Write something here"
-              >
-              </temba-completion>`
-            : null}
-          ${this.buttonError
-            ? html`<div class="send-error">${this.buttonError}</div>`
-            : null}
+          <temba-completion
+            class="chatbox"
+            .value=${this.initialText}
+            gsm
+            textarea
+            ?disableCompletion=${!this.completion}
+            ?autogrow=${this.autogrow}
+            maxlength=${this.maxLength}
+            @change=${this.handleChatboxChange}
+            @keydown=${this.handleKeyDown}
+            placeholder="Write something here"
+          >
+          </temba-completion>
         </div>
       </temba-tabs>
     `;
@@ -801,15 +778,4 @@ export class Compose extends FormElement {
       .text="${this.currentText}"
     ></temba-charcount>`;
   }
-
-  private getButton(): TemplateResult {
-    return html`<temba-icon
-      tabindex="1"
-      class="send-icon"
-      name="send"
-      size="1"
-      clickable
-      @click=${this.handleSendClick}
-    ></temba-icon>`;
-  }
 }

package/src/contacts/ContactChat.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { oxford, oxfordFn, postJSON } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Compose } from '../compose/Compose';
+import { Compose, ComposeValue } from '../compose/Compose';
 import { fetchContactHistory, getDisplayName } from './helpers';
 import {
   AirtimeTransferredEvent,
@@ -319,6 +319,20 @@ export class ContactChat extends ContactStoreElement {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
       }
+
+      .error-gutter {
+        display: flex;
+        padding: 0.5em 1em;
+        background: #f9f9f9;
+        item-align: center;
+      }
+
+      .error-message {
+        color: var(--color-error);
+        padding-right: 1em;
+        flex-grow: 1;
+        align-self: center;
+      }
     `;
   }
 
@@ -349,6 +363,9 @@ export class ContactChat extends ContactStoreElement {
   @property({ type: String })
   avatar = DEFAULT_AVATAR;
 
+  @property({ type: String })
+  errorMessage: string;
+
   // http promise to monitor for completeness
   public httpComplete: Promise<void>;
   private chat: Chat;
@@ -408,81 +425,55 @@ export class ContactChat extends ContactStoreElement {
     this.newestEventTime = null;
     this.refreshId = null;
     this.polling = false;
+    this.errorMessage = null;
   }
 
   public refresh() {
     this.checkForNewMessages();
   }
 
+  private handleRetry() {
+    const compose = this.shadowRoot.querySelector('temba-compose') as Compose;
+    compose.triggerSend();
+  }
+
   private handleSend(evt: CustomEvent) {
-    const buttonName = evt.detail.name;
-    if (buttonName === 'Send') {
-      const payload = {
-        contact: this.currentContact.uuid
-      };
-      const compose = evt.currentTarget as Compose;
-      if (compose) {
-        const text = compose.currentText;
-        if (text && text.length > 0) {
-          payload['text'] = text;
-        }
-        const attachments = compose.currentAttachments;
-        if (attachments && attachments.length > 0) {
-          const attachment_uuids = attachments.map(
-            (attachment) => attachment.uuid
-          );
-          payload['attachments'] = attachment_uuids;
-        }
-      }
-      if (this.currentTicket) {
-        payload['ticket'] = this.currentTicket.uuid;
-      }
+    this.errorMessage = null;
+    const composeEle = evt.currentTarget as Compose;
+    const compose = evt.detail.langValues['und'] as ComposeValue;
 
-      const genericError = buttonName + ' failed, please try again.';
-
-      postJSON(`/api/v2/messages.json`, payload)
-        .then((response) => {
-          if (response.status < 400) {
-            this.checkForNewMessages();
-            compose.reset();
-            this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });
-          } else if (response.status < 500) {
-            if (
-              response.json.text &&
-              response.json.text.length > 0 &&
-              response.json.text[0].length > 0
-            ) {
-              let textError = response.json.text[0];
-              textError = textError.replace(
-                'Ensure this field has no more than',
-                'Maximum allowed text is'
-              );
-              compose.buttonError = textError;
-            } else if (
-              response.json.attachments &&
-              response.json.attachments.length > 0 &&
-              response.json.attachments[0].length > 0
-            ) {
-              let attachmentError = response.json.attachments[0];
-              attachmentError = attachmentError
-                .replace(
-                  'Ensure this field has no more than',
-                  'Maximum allowed attachments is'
-                )
-                .replace('elements', 'files');
-              compose.buttonError = attachmentError;
-            } else {
-              compose.buttonError = genericError;
-            }
-          } else {
-            compose.buttonError = genericError;
-          }
-        })
-        .catch((error) => {
-          console.error(error);
-          compose.buttonError = genericError;
-        });
+    const payload = {
+      contact: this.currentContact.uuid
+    };
+
+    const text = compose.text;
+    if (text && text.length > 0) {
+      payload['text'] = text;
+    }
+    const attachments = compose.attachments;
+    if (attachments && attachments.length > 0) {
+      const attachment_uuids = attachments.map((attachment) => attachment.uuid);
+      payload['attachments'] = attachment_uuids;
+    }
+
+    if (this.currentTicket) {
+      payload['ticket'] = this.currentTicket.uuid;
     }
+
+    const genericError = 'Send failed, please try again.';
+    postJSON(`/api/v2/messages.json`, payload)
+      .then((response) => {
+        if (response.status < 400) {
+          this.checkForNewMessages();
+          composeEle.reset();
+          this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });
+        } else {
+          this.errorMessage = genericError;
+        }
+      })
+      .catch(() => {
+        this.errorMessage = genericError;
+      });
   }
 
   public render(): TemplateResult {
@@ -881,14 +872,22 @@ export class ContactChat extends ContactStoreElement {
     return html`<div class="border"></div>
       <div class="compose">
         <temba-compose
-          chatbox
           attachments
           counter
-          button
           autogrow
-          @temba-button-clicked=${this.handleSend.bind(this)}
+          shortcuts
+          @temba-submitted=${this.handleSend.bind(this)}
         >
         </temba-compose>
+        ${this.errorMessage
+          ? html` <div class="error-gutter">
+              <div class="error-message">${this.errorMessage}</div>
+              <temba-button
+                name="Retry"
+                @click=${this.handleRetry}
+              ></temba-button>
+            </div>`
+          : null}
       </div>`;
   }
 }

package/src/untyped.d.ts

@@ -5,7 +5,7 @@ declare function typeInto(
   selector: string,
   text: string,
   replace?: boolean,
-  blur?: boolean
+  enter?: boolean
 );
 
 declare function type(text: string);

package/src/vectoricon/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = 'e1de672e1cc330afd24a8b86f837a538';
+export const SVG_FINGERPRINT = 'f3e1cdc8bc9f2e47455a9ef0f7fe4baf';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -154,7 +154,6 @@ export enum Icon {
   staff = 'hard-drive',
   submit = 'check',
   success = 'check',
-  team = 'folder-shield',
   template_approved = 'check-circle',
   template_pending = 'hourglass-01',
   template_rejected = 'alert-circle',