@nyaruka/temba-components 0.76.0 → 0.78.0

package/src/templates/TemplateEditor.ts

@@ -3,12 +3,9 @@ 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 = 'button';
-
 interface Component {
+  name: string;
+  type: string;
   content: string;
   params: { type: string }[];
 }
@@ -17,7 +14,7 @@ interface Translation {
   locale: string;
   status: string;
   channel: { uuid: string; name: string };
-  components: { [key: string]: Component };
+  components: Component[];
 }
 
 interface Template {
@@ -95,9 +92,18 @@ export class TemplateEditor extends FormElement {
         border-radius: var(--curvature);
         min-height: 23px;
         display: flex;
+        flex-direction: row;
         align-items: center;
         margin-right: 0.5em;
         margin-top: 0.5em;
+        align-items: center;
+      }
+
+      .button .display {
+        margin-right: 0.5em;
+        background: #f9f9f9;
+        padding: 0.25em 1em;
+        border-radius: var(--curvature);
       }
 
       temba-textinput,
@@ -140,10 +146,6 @@ export class TemplateEditor extends FormElement {
   @property({ type: Boolean })
   translating: boolean;
 
-  buttonKeys = [];
-  contentKeys = [];
-  otherKeys = [];
-
   public firstUpdated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -166,30 +168,13 @@ export class TemplateEditor extends FormElement {
           (!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 || [];
+          for (const comp of translation.components) {
+            const compParams = comp.params || [];
             if (compParams.length > 0) {
               // create an array for the length of params
-              newParams[key] = new Array(compParams.length).fill('');
+              newParams[comp.name] = 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) {
@@ -217,9 +202,8 @@ export class TemplateEditor extends FormElement {
 
   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.params[target.name][index - 1] = target.value;
     this.fireCustomEvent(CustomEventType.ContentChanged, {
       template: this.selectedTemplate,
       translation: this.translation,
@@ -227,21 +211,21 @@ export class TemplateEditor extends FormElement {
     });
   }
 
-  private renderVariables(key: string, component: Component) {
+  private renderVariables(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);
+        const paramIndex = 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]}
+          value=${this.params[component.name][paramIndex - 1]}
           @change=${this.handleVariableChanged}
-          key="${key}"
-          index="${keyIndex}}"
+          name="${component.name}"
+          index="${paramIndex}"
           placeholder="variable.."
         ></temba-completion>`;
       });
@@ -249,72 +233,54 @@ export class TemplateEditor extends FormElement {
     }
   }
 
-  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])}
+  public renderComponents(components: Component[]): TemplateResult {
+    const nonButtons = components
+      .filter(comp => !comp.type.startsWith('button/'))
+      .map(
+        component =>
+          html`<div class="${component['name']}">
+            ${this.renderVariables(component)}
+          </div>`
+      );
+    const buttonComponents = components.filter(comp =>
+      comp.type.startsWith('button/')
+    );
+    const buttons =
+      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;
+    return html`<div class="main">${nonButtons}</div>
+      <div class="buttons">
+        ${buttons}
+        <div></div>
       </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;
+    const buttons = components.map(component => {
+      if (component.display) {
+        return html`
+          <div class="button">
+            <div class="display">${component.display}</div>
+            ${this.renderVariables(component)}
+          </div>
+        `;
+      } else {
+        return html`
+          <div class="button">${this.renderVariables(component)}</div>
+        `;
+      }
+    });
+    return html`<div class="button-wrapper">
+      <div class="button-header">Template Buttons</div>
+      <div class="buttons">${buttons}</div>
+    </div>`;
   }
+
   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);
-      });
+      content = this.renderComponents(this.translation.components);
     } else {
-      otherComponents = html`<div class="error-message">
+      content = html`<div class="error-message">
         No approved translation was found for current language.
       </div>`;
     }
@@ -328,7 +294,7 @@ export class TemplateEditor extends FormElement {
           valuekey="uuid"
           class="picker"
           value="${this.template}"
-          endpoint=${this.url}
+          endpoint="${this.url}?comps_as_list=true"
           shouldExclude=${template => template.status !== 'approved'}
           placeholder="Select a template"
           @temba-content-changed=${this.swallowEvent}
@@ -336,11 +302,7 @@ export class TemplateEditor extends FormElement {
         >
         </temba-select>
 
-        ${this.template
-          ? html` <div class="template">
-              ${content} ${buttons} ${otherComponents}
-            </div>`
-          : null}
+        ${this.template ? html` <div class="template">${content}</div>` : null}
       </div>
     `;
   }

package/static/api/templates.json

@@ -14,8 +14,10 @@
                     "namespace": "",
                     "locale": "eng-US",
                     "status": "approved",
-                    "components": {
-                        "body": {
+                    "components": [
+                        {
+                            "name": "body",
+                            "type": "body",
                             "content": "Hi bob {{1}} from {{2}}",
                             "params": [
                                 {
@@ -26,11 +28,15 @@
                                 }
                             ]
                         },
-                        "buttons.0": {
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
                             "content": "Yes",
                             "params": []
                         },
-                        "buttons.1": {
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
                             "content": "No {{1}}",
                             "params": [
                                 {
@@ -38,7 +44,7 @@
                                 }
                             ]
                         }
-                    }
+                    ]
                 },
                 {
                     "channel": {
@@ -50,29 +56,33 @@
                     "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"
-                                    }
-                                ]
-                            }
+                            "name": "body",
+                            "type": "body",
+                            "content": "bon jour bob {{1}} from {{2}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
+                            "content": "Yes",
+                            "params": []
+                        },
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
+                            "content": "No {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
                         }
                     ]
                 }
@@ -92,8 +102,10 @@
                     "namespace": "",
                     "locale": "eng-US",
                     "status": "approved",
-                    "components": {
-                        "body": {
+                    "components": [
+                        {
+                            "name": "body",
+                            "type": "body",
                             "content": "Hi bob {{1}} from {{2}}",
                             "params": [
                                 {
@@ -104,11 +116,15 @@
                                 }
                             ]
                         },
-                        "buttons.0": {
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
                             "content": "Yes",
                             "params": []
                         },
-                        "buttons.1": {
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
                             "content": "No {{1}}",
                             "params": [
                                 {
@@ -116,7 +132,7 @@
                                 }
                             ]
                         }
-                    }
+                    ]
                 },
                 {
                     "channel": {
@@ -128,29 +144,33 @@
                     "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"
-                                    }
-                                ]
-                            }
+                            "name": "body",
+                            "type": "body",
+                            "content": "bon jour bob {{1}} from {{2}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                },
+                                {
+                                    "type": "text"
+                                }
+                            ]
+                        },
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
+                            "content": "Yes",
+                            "params": []
+                        },
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
+                            "content": "No {{1}}",
+                            "params": [
+                                {
+                                    "type": "text"
+                                }
+                            ]
                         }
                     ]
                 }
@@ -170,8 +190,10 @@
                     "namespace": "",
                     "locale": "eng-US",
                     "status": "approved",
-                    "components": {
-                        "body": {
+                    "components": [
+                        {
+                            "name": "body",
+                            "type": "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": [
                                 {
@@ -185,14 +207,20 @@
                                 }
                             ]
                         },
-                        "buttons.0": {
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
                             "content": "Yes",
                             "params": []
                         },
-                        "buttons.1": {
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
                             "content": "No"
                         },
-                        "buttons.2": {
+                        {
+                            "name": "buttons.2",
+                            "type": "button/quick_reply",
                             "content": "Wait until {{1}}",
                             "params": [
                                 {
@@ -200,7 +228,7 @@
                                 }
                             ]
                         }
-                    }
+                    ]
                 },
                 {
                     "channel": {
@@ -210,8 +238,10 @@
                     "namespace": "",
                     "locale": "fra-FR",
                     "status": "pending",
-                    "components": {
-                        "body": {
+                    "components": [
+                        {
+                            "name": "body",
+                            "type": "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": [
                                 {
@@ -225,14 +255,20 @@
                                 }
                             ]
                         },
-                        "buttons.0": {
+                        {
+                            "name": "buttons.0",
+                            "type": "button/quick_reply",
                             "content": "Oui",
                             "params": []
                         },
-                        "buttons.1": {
+                        {
+                            "name": "buttons.1",
+                            "type": "button/quick_reply",
                             "content": "No"
                         },
-                        "buttons.2": {
+                        {
+                            "name": "buttons.2",
+                            "type": "button/quick_reply",
                             "content": "Attendre jusqu'à {{1}}",
                             "params": [
                                 {
@@ -240,7 +276,7 @@
                                 }
                             ]
                         }
-                    }
+                    ]
                 }
             ],
             "created_on": "2023-09-08T22:38:22.710140Z",

package/test/temba-date.test.ts

@@ -1,3 +1,4 @@
+import { html, fixture, expect } from '@open-wc/testing';
 import { TembaDate } from '../src/date/TembaDate';
 import {
   assertScreenshot,
@@ -6,7 +7,6 @@ import {
   loadStore,
   mockNow,
 } from './utils.test';
-import { expect } from '@open-wc/testing';
 
 const TAG = 'temba-date';
 
@@ -25,7 +25,7 @@ describe('temba-date', () => {
   it('renders default', async () => {
     const date = await getDate({ value: '1978-11-18T02:22:00.000000-07:00' });
     const dateString = (
-      date.shadowRoot.querySelector('.date') as HTMLDivElement
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
     ).innerText;
 
     await assertScreenshot('date/date', getClip(date));
@@ -38,7 +38,7 @@ describe('temba-date', () => {
       display: 'duration',
     });
     const dateString = (
-      date.shadowRoot.querySelector('.date') as HTMLDivElement
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
     ).innerText;
 
     await assertScreenshot('date/duration', getClip(date));
@@ -51,10 +51,22 @@ describe('temba-date', () => {
       display: 'datetime',
     });
     const dateString = (
-      date.shadowRoot.querySelector('.date') as HTMLDivElement
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
     ).innerText;
 
     await assertScreenshot('date/datetime', getClip(date));
     expect(dateString).to.equal('11/18/1978, 9:22 AM');
   });
+
+  it('renders inline', async () => {
+    const el: HTMLElement = await fixture(html`
+      <span
+        >Your birthday is
+        <temba-date value="1978-11-18T02:22:00.000000-07:00"></temba-date
+        >!</span
+      >
+    `);
+
+    await assertScreenshot('date/date-inline', getClip(el));
+  });
 });