@nyaruka/temba-components 0.71.4 → 0.72.0

package/src/templates/TemplateEditor.ts

@@ -0,0 +1,348 @@
+import { property } from 'lit/decorators.js';
+import { FormElement } from '../FormElement';
+import { TemplateResult, html, css, PropertyValueMap } from 'lit';
+import { CustomEventType } from '../interfaces';
+
+const KEY_HEADER = 'header';
+const KEY_BODY = 'body';
+const KEY_FOOTER = 'footer';
+const KEY_BUTTONS = 'buttons';
+
+interface Component {
+  content: string;
+  params: { type: string }[];
+}
+
+interface Translation {
+  locale: string;
+  status: string;
+  channel: { uuid: string; name: string };
+  components: { [key: string]: Component };
+}
+
+interface Template {
+  created_on: string;
+  modified_on: string;
+  name: string;
+  translations: Translation[];
+  uuid: string;
+}
+
+export class TemplateEditor extends FormElement {
+  static get styles() {
+    return css`
+      .component {
+        background: #fff;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature);
+        padding: 1em;
+        margin-bottom: 0.5em;
+      }
+      .picker {
+        margin-bottom: 0.5em;
+        display: block;
+      }
+      .param {
+        display: flex;
+        margin-bottom: 0.5em;
+        align-items: center;
+      }
+      label {
+        margin-right: 0.5em;
+      }
+
+      .content span {
+        margin-right: 0.25em;
+      }
+
+      .error-message {
+        padding-left: 0.5em;
+      }
+
+      .variable {
+        display: inline-block;
+        margin: 0.25em 0em;
+        margin-right: 0.25em;
+      }
+
+      .button-wrapper {
+        margin-top: 1em;
+        background: #f9f9f9;
+        border-radius: var(--curvature);
+        padding: 0.5em;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .button-header {
+        font-weight: normal;
+        margin-left: 0.25em;
+        margin-bottom: -0.5em;
+        font-size: 0.9em;
+        color: #777;
+      }
+
+      .buttons {
+        display: flex;
+        align-items: center;
+
+        flex-wrap: wrap;
+      }
+
+      .button {
+        background: #fff;
+        padding: 0.3em 1em;
+        border: 1px solid #e6e6e6;
+        border-radius: var(--curvature);
+        min-height: 23px;
+        display: flex;
+        align-items: center;
+        margin-right: 0.5em;
+        margin-top: 0.5em;
+      }
+
+      temba-textinput,
+      temba-completion {
+        --temba-textinput-padding: 5px 5px;
+        --temba-textinput-font-size: 0.9em;
+        line-height: initial;
+      }
+
+      .template {
+        background: #fff;
+        border-radius: var(--curvature);
+        border: 1px solid var(--color-widget-border);
+        padding: 1em;
+        line-height: 2.2em;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  url: string;
+
+  // initial template uuid
+  @property({ type: String })
+  template: string;
+
+  @property({ type: Object })
+  selectedTemplate: Template;
+
+  @property({ type: String })
+  lang = 'eng-US';
+
+  // component key to array of strings for variables
+  @property({ type: Object })
+  params: { [key: string]: string[] };
+
+  @property({ type: Object, attribute: false })
+  translation: Translation;
+
+  @property({ type: Boolean })
+  translating: boolean;
+
+  buttonKeys = [];
+  contentKeys = [];
+  otherKeys = [];
+
+  public firstUpdated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changes);
+  }
+
+  public updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+  }
+
+  private handleTemplateChanged(event: CustomEvent) {
+    this.selectedTemplate = (event.target as any).values[0] as Template;
+    const [lang, loc] = this.lang.split('-');
+
+    const newParams = {};
+    if (this.selectedTemplate) {
+      this.selectedTemplate.translations.forEach(translation => {
+        if (
+          translation.locale === this.lang ||
+          (!loc && translation.locale.split('-')[0] === lang)
+        ) {
+          this.translation = translation;
+          this.buttonKeys = [];
+          this.contentKeys = [];
+          this.otherKeys = [];
+          const keys = Object.keys(translation.components);
+          for (const key of keys) {
+            if (key.startsWith(KEY_BUTTONS)) {
+              this.buttonKeys.push(key);
+            } else if (
+              key === KEY_HEADER ||
+              key === KEY_BODY ||
+              key === KEY_FOOTER
+            ) {
+              this.contentKeys.push(key);
+            } else {
+              this.otherKeys.push(key);
+            }
+
+            const compParams = translation.components[key].params || [];
+            if (compParams.length > 0) {
+              // create an array for the length of params
+              newParams[key] = new Array(compParams.length).fill('');
+            }
+          }
+          this.buttonKeys.sort();
+
+          // if we are looking at the same template copy our params on top
+          if (this.template === this.selectedTemplate.uuid) {
+            for (const key of Object.keys(this.params || {})) {
+              if (newParams[key]) {
+                for (let i = 0; i < this.params[key].length; i++) {
+                  newParams[key][i] = this.params[key][i];
+                }
+              }
+            }
+          }
+        }
+      });
+    } else {
+      this.translation = null;
+    }
+
+    this.params = newParams;
+    this.fireCustomEvent(CustomEventType.ContextChanged, {
+      template: this.selectedTemplate,
+      translation: this.translation,
+      params: this.params,
+    });
+  }
+
+  private handleVariableChanged(event: CustomEvent) {
+    const target = event.target as HTMLInputElement;
+    const key = target.getAttribute('key');
+    const index = parseInt(target.getAttribute('index'));
+    this.params[key][index - 1] = target.value;
+    this.fireCustomEvent(CustomEventType.ContentChanged, {
+      template: this.selectedTemplate,
+      translation: this.translation,
+      params: this.params,
+    });
+  }
+
+  private renderVariables(key: string, component: Component) {
+    const parts = component.content.split(/{{(\d+)}}/g);
+    if (parts.length > 0) {
+      const variables = parts.map((part, index) => {
+        const keyIndex = Math.round(index / 2);
+        if (index % 2 === 0) {
+          return html`<span class="text">${part}</span>`;
+        }
+        return html`<temba-completion
+          class="variable"
+          type="text"
+          value=${this.params[key][keyIndex - 1]}
+          @change=${this.handleVariableChanged}
+          key="${key}"
+          index="${keyIndex}}"
+          placeholder="variable.."
+        ></temba-completion>`;
+      });
+      return html`<div class="content">${variables}</div>`;
+    }
+  }
+
+  private renderComponent(key: string, component: Component) {
+    return html` <div class="component">
+      <div>${key}</div>
+      ${this.renderVariables(key, component)}
+    </div>`;
+  }
+
+  public renderContent(components: {
+    [key: string]: Component;
+  }): TemplateResult {
+    let header = null;
+    let body = null;
+    let footer = null;
+
+    if (components[KEY_HEADER]) {
+      header = html`<div class="header">
+        ${this.renderVariables(KEY_HEADER, components[KEY_HEADER])}
+      </div>`;
+    }
+
+    if (components[KEY_BODY]) {
+      body = html`<div class="body">
+        ${this.renderVariables(KEY_BODY, components[KEY_BODY])}
+      </div>`;
+    }
+
+    if (components[KEY_FOOTER]) {
+      footer = html`<div class="footer">
+        ${this.renderVariables(KEY_FOOTER, components[KEY_FOOTER])}
+      </div>`;
+    }
+
+    if (header || body || footer) {
+      return html`<div class="content">${header}${body}${footer}</div>`;
+    }
+    return null;
+  }
+
+  public renderButtons(components): TemplateResult {
+    if (this.buttonKeys.length > 0) {
+      const buttons = this.buttonKeys.map(key => {
+        const component = components[key];
+        return html`<div class="button">
+          ${this.renderVariables(key, component)}
+        </div>`;
+      });
+      return html`<div class="button-wrapper">
+        <div class="button-header">Template Buttons</div>
+        <div class="buttons">${buttons}</div>
+      </div>`;
+    }
+    return null;
+  }
+  public render(): TemplateResult {
+    let content = null;
+    let buttons = null;
+    let otherComponents = null;
+    if (this.translation) {
+      content = this.renderContent(this.translation.components);
+      buttons = this.renderButtons(this.translation.components);
+      otherComponents = this.otherKeys.map(key => {
+        const component = this.translation.components[key];
+        return this.renderComponent(key, component);
+      });
+    } else {
+      otherComponents = html`<div class="error-message">
+        No approved translation was found for current language.
+      </div>`;
+    }
+
+    return html`
+      <div>
+        <temba-select
+          searchable
+          ?clearable=${!this.translating}
+          ?disabled=${this.translating}
+          valuekey="uuid"
+          class="picker"
+          value="${this.template}"
+          endpoint=${this.url}
+          shouldExclude=${template => template.status !== 'approved'}
+          placeholder="Select a template"
+          @temba-content-changed=${this.swallowEvent}
+          @change=${this.handleTemplateChanged}
+        >
+        </temba-select>
+
+        ${this.template
+          ? html` <div class="template">
+              ${content} ${buttons} ${otherComponents}
+            </div>`
+          : null}
+      </div>
+    `;
+  }
+}

package/src/textinput/TextInput.ts

@@ -183,7 +183,9 @@ export class TextInput extends FormElement {
     super.updated(changes);
 
     if (changes.has('value')) {
-      this.fireEvent('change');
+      if (changes.get('value') !== undefined) {
+        this.fireEvent('change');
+      }
 
       if (this.textarea && this.autogrow) {
         const autogrow = this.shadowRoot.querySelector(

package/src/utils/index.ts

@@ -27,6 +27,27 @@ export interface ResultsPage {
   results: any[];
   next: string;
 }
+
+export enum Color {
+  BLUE = 'color:#5078b5;',
+  GREEN = 'color:#62bd6a;',
+  RED = 'color:#e36049;',
+  PURPLE = 'color:#a626a4;',
+}
+
+export const log = (message: string | object, styling = '', details = []) => {
+  if (styling === '') {
+    console.log(message);
+    return;
+  }
+
+  if (typeof message === 'object') {
+    console.log('%c' + JSON.stringify(message, null, 2), styling);
+    return;
+  }
+  console.log('%c' + message, styling, ...details);
+};
+
 /** Get the value for a named cookie */
 export const getHTTPCookie = (name: string): string => {
   for (const cookie of document.cookie.split(';')) {

package/static/api/templates.json

@@ -0,0 +1,250 @@
+{
+    "next": null,
+    "previous": null,
+    "results": [
+        {
+            "uuid": "4b6d0ce7-ada8-4a88-82f3-7fa775d9671a",
+            "name": "Approved",
+            "translations": [
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "eng-US",
+                    "status": "approved",
+                    "components": {
+                        "body": {
+                            "content": "Hi bob {{1}} from {{2}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        "buttons.0": {
+                            "content": "Yes",
+                            "params": []
+                        },
+                        "buttons.1": {
+                            "content": "No {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        }
+                    }
+                },
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "fra-FR",
+                    "status": "approved",
+                    "components": [
+                        {
+                            "body": {
+                                "content": "bon jour bob {{1}} from {{2}}",
+                                "params": [
+                                    {
+                                        "type": "text"
+                                    },
+                                    {
+                                        "type": "text"
+                                    }
+                                ]
+                            },
+                            "buttons.0": {
+                                "content": "Yes",
+                                "params": []
+                            },
+                            "buttons.1": {
+                                "content": "No {{1}}",
+                                "params": [
+                                    {
+                                        "type": "text"
+                                    }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            ],
+            "created_on": "2023-09-08T22:38:22.703997Z",
+            "modified_on": "2023-09-08T22:38:22.707271Z"
+        },
+        {
+            "uuid": "7b6d0ce7-ada8-4a88-82f3-7fa775d9671a",
+            "name": "Testing",
+            "translations": [
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "eng-US",
+                    "status": "approved",
+                    "components": {
+                        "body": {
+                            "content": "Hi bob {{1}} from {{2}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        "buttons.0": {
+                            "content": "Yes",
+                            "params": []
+                        },
+                        "buttons.1": {
+                            "content": "No {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        }
+                    }
+                },
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "fra-FR",
+                    "status": "pending",
+                    "components": [
+                        {
+                            "body": {
+                                "content": "bon jour bob {{1}} from {{2}}",
+                                "params": [
+                                    {
+                                        "type": "text"
+                                    },
+                                    {
+                                        "type": "text"
+                                    }
+                                ]
+                            },
+                            "buttons.0": {
+                                "content": "Yes",
+                                "params": []
+                            },
+                            "buttons.1": {
+                                "content": "No {{1}}",
+                                "params": [
+                                    {
+                                        "type": "text"
+                                    }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            ],
+            "created_on": "2023-09-08T22:38:22.703997Z",
+            "modified_on": "2023-09-08T22:38:22.707271Z"
+        },
+        {
+            "uuid": "580b124f-32cb-4003-b9e5-9eb783e29101",
+            "name": "Car Warranty",
+            "translations": [
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "eng-US",
+                    "status": "approved",
+                    "components": {
+                        "body": {
+                            "content": "Hi there, we are trying to reach {{1}} about their car warranty. It turns out you only have until {{2}} to decide whether to extend it further. Please contact us at {{3}} at your earliest convenience to discuss your options. Are you still interested?",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        "buttons.0": {
+                            "content": "Yes",
+                            "params": []
+                        },
+                        "buttons.1": {
+                            "content": "No"
+                        },
+                        "buttons.2": {
+                            "content": "Wait until {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        }
+                    }
+                },
+                {
+                    "channel": {
+                        "uuid": "4da11872-9299-4649-8672-78257d7b72d0",
+                        "name": "WhatsApp"
+                    },
+                    "namespace": "",
+                    "locale": "fra-FR",
+                    "status": "pending",
+                    "components": {
+                        "body": {
+                            "content": "Bonjour, nous essayons d'atteindre {{1}} à propos de leur garantie automobile. Il s'avère que tu n'as que jusqu'à {{2}} pour décider s'il convient de le prolonger davantage. Veuillez nous contacter au {{3}} dès que possible pour discuter de vos options. Êtes vous toujours intéressé?",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        "buttons.0": {
+                            "content": "Oui",
+                            "params": []
+                        },
+                        "buttons.1": {
+                            "content": "No"
+                        },
+                        "buttons.2": {
+                            "content": "Attendre jusqu'à {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        }
+                    }
+                }
+            ],
+            "created_on": "2023-09-08T22:38:22.710140Z",
+            "modified_on": "2023-09-08T22:38:22.710141Z"
+        }
+    ]
+}

package/temba-modules.ts

@@ -54,6 +54,7 @@ import { WebChat } from './src/webchat/WebChat';
 import { ImagePicker } from './src/imagepicker/ImagePicker';
 import { Mask } from './src/mask/Mask';
 import { TembaUser } from './src/user/TembaUser';
+import { TemplateEditor } from './src/templates/TemplateEditor';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -118,3 +119,4 @@ addCustomElement('temba-webchat', WebChat);
 addCustomElement('temba-image-picker', ImagePicker);
 addCustomElement('temba-mask', Mask);
 addCustomElement('temba-user', TembaUser);
+addCustomElement('temba-template-editor', TemplateEditor);

package/test/temba-slider.test.ts

@@ -6,7 +6,7 @@ import { assertScreenshot, getClip, showMouse } from './utils.test';
 const createSlider = async (def: TemplateResult) => {
   const parentNode = document.createElement('div');
   parentNode.setAttribute('style', 'width: 200px;');
-  return (await fixture(def, { parentNode })) as TembaSlider;
+  return await fixture<TembaSlider>(def, { parentNode });
 };
 
 describe('temba-slider', () => {