@nyaruka/temba-components 0.129.10 → 0.130.0

package/src/events.ts

@@ -30,8 +30,10 @@ export interface ChannelEvent extends ContactEvent {
 
 export interface ContactLanguageChangedEvent extends ContactEvent {
   language: string;
-  step_uuid: string;
-  session_uuid: string;
+}
+
+export interface ContactStatusChangedEvent extends ContactEvent {
+  status: string;
 }
 
 export interface OptInEvent extends ContactEvent {

package/src/flow/CanvasNode.ts

@@ -873,30 +873,7 @@ export class CanvasNode extends RapidElement {
   private renderRouter(router: Router, ui: NodeUI) {
     const nodeConfig = NODE_CONFIG[ui.type];
     if (nodeConfig) {
-      // For tests that call renderRouter directly without setting this.node
-      const hasActions = this.node ? this.node.actions.length > 0 : false;
-      const isRemoving =
-        this.node &&
-        this.node.actions.length === 0 &&
-        this.actionRemovingState.has(this.node.uuid);
-
       return html`<div class="router" style="position: relative;">
-        ${!hasActions
-          ? html` <button
-                class="remove-button"
-                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
-                title="Remove node"
-              >
-                ✕
-              </button>
-              <div
-                @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
-                @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
-                style="cursor: pointer;"
-              >
-                ${this.renderNodeTitle(nodeConfig, isRemoving)}
-              </div>`
-          : ''}
         ${router.result_name
           ? html`<div
               class="body"
@@ -969,7 +946,7 @@ export class CanvasNode extends RapidElement {
           : ''}"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
-        ${nodeConfig && nodeConfig.render
+        ${nodeConfig && nodeConfig.type !== 'execute_actions'
           ? html`<div class="router" style="position: relative;">
               <button
                 class="remove-button"
@@ -987,7 +964,7 @@ export class CanvasNode extends RapidElement {
                   nodeConfig,
                   this.actionRemovingState.has(this.node.uuid)
                 )}
-                ${nodeConfig.render(this.node)}
+                ${nodeConfig.render ? nodeConfig.render(this.node) : null}
               </div>
             </div>`
           : this.node.actions.length > 0
@@ -1007,20 +984,6 @@ export class CanvasNode extends RapidElement {
                 (action) => action.uuid,
                 (action, index) => this.renderAction(this.node, action, index)
               )}`
-          : !this.node.router && nodeConfig && nodeConfig.name
-          ? html`<div class="router" style="position: relative;">
-              <button
-                class="remove-button"
-                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
-                title="Remove node"
-              >
-                ✕
-              </button>
-              ${this.renderNodeTitle(
-                nodeConfig,
-                this.actionRemovingState.has(this.node.uuid)
-              )}
-            </div>`
           : ''}
         ${this.node.router
           ? html` ${this.renderRouter(this.node.router, this.ui)}

package/src/flow/Editor.ts

@@ -653,7 +653,7 @@ export class Editor extends RapidElement {
     this.definition?.nodes.forEach((node) => {
       const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
       if (nodeElement) {
-        const position = this.definition._ui.nodes[node.uuid]?.position;
+        const position = this.definition._ui?.nodes[node.uuid]?.position;
         if (position) {
           const rect = nodeElement.getBoundingClientRect();
           const canvasRect =
@@ -1085,8 +1085,11 @@ export class Editor extends RapidElement {
                   this.definition.nodes,
                   (node) => node.uuid,
                   (node) => {
-                    const position =
-                      this.definition._ui.nodes[node.uuid].position;
+                    const position = this.definition._ui?.nodes[node.uuid]
+                      ?.position || {
+                      left: 0,
+                      top: 0
+                    };
 
                     const dragging =
                       this.isDragging &&

package/src/flow/NodeEditor.ts

@@ -320,14 +320,6 @@ export class NodeEditor extends RapidElement {
     this.isOpen = true;
   }
 
-  private closeDialog(): void {
-    this.isOpen = false;
-    this.formData = {};
-    this.errors = {};
-    this.groupCollapseState = {};
-    this.groupHoverState = {};
-  }
-
   private initializeFormData(): void {
     const nodeConfig = this.getNodeConfig();
 
@@ -393,9 +385,51 @@ export class NodeEditor extends RapidElement {
       }
     });
 
+    // Convert select fields to array format
+    const config = this.getConfig();
+    if (config?.form) {
+      this.processSelectFields(processed, config.form);
+    }
+
     this.formData = processed;
   }
 
+  private processSelectFields(data: any, formConfig: any): void {
+    Object.entries(formConfig).forEach(
+      ([fieldName, fieldConfig]: [string, any]) => {
+        const value = data[fieldName];
+
+        // Handle top-level select fields
+        if (fieldConfig.type === 'select' && value) {
+          data[fieldName] = this.convertToSelectArray(value);
+        }
+
+        // Handle select fields within array items
+        if (
+          fieldConfig.type === 'array' &&
+          Array.isArray(value) &&
+          fieldConfig.itemConfig
+        ) {
+          value.forEach((item: any) => {
+            this.processSelectFields(item, fieldConfig.itemConfig);
+          });
+        }
+      }
+    );
+  }
+
+  private convertToSelectArray(value: any): any[] {
+    if (Array.isArray(value)) {
+      return value.map((v) =>
+        typeof v === 'string' ? { name: v, value: v } : v
+      );
+    } else if (typeof value === 'string') {
+      return [{ name: value, value: value }];
+    } else {
+      return [value];
+    }
+  }
+
   private isKeyValueField(fieldName: string): boolean {
     // Check if this field is configured as a key-value type
     const config = this.getConfig();
@@ -533,6 +567,18 @@ export class NodeEditor extends RapidElement {
       if (config.form) {
         Object.entries(config.form).forEach(([fieldName, fieldConfig]) => {
           const value = this.formData[fieldName];
+          if (fieldConfig.type === 'select' && fieldConfig.allowCreate) {
+            // check our values to see if any have arbitrary set
+            let selected = this.formData[fieldName];
+            selected = Array.isArray(selected)
+              ? selected.find((v: any) => v.arbitrary)
+              : null;
+
+            if (selected && selected.arbitrary) {
+              errors[fieldName] =
+                'There was an error creating' + ' "' + selected.name + '"';
+            }
+          }
 
           // Check required fields
           if (
@@ -856,11 +902,6 @@ export class NodeEditor extends RapidElement {
     // Handle different component types like ActionEditor does
     if (target.tagName === 'TEMBA-CHECKBOX') {
       value = target.checked;
-    } else if (
-      target.tagName === 'TEMBA-SELECT' &&
-      (target.multi || target.emails || target.tags)
-    ) {
-      value = target.values || [];
     } else if (target.values !== undefined) {
       value = target.values;
     } else {

package/src/flow/actions/add_contact_groups.ts

@@ -5,7 +5,7 @@ import { renderNamedObjects } from '../utils';
 
 export const add_contact_groups: ActionConfig = {
   name: 'Add to Group',
-  color: COLORS.add,
+  color: COLORS.update,
   render: (_node: Node, action: AddToGroup) => {
     return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
   },

package/src/flow/actions/add_contact_urn.ts

@@ -4,7 +4,7 @@ import { Node, AddContactUrn } from '../../store/flow-definition';
 import { urnSchemeMap } from '../utils';
 
 export const add_contact_urn: ActionConfig = {
-  name: 'Add Contact URN',
+  name: 'Add URN',
   color: COLORS.update,
   render: (_node: Node, action: AddContactUrn) => {
     const friendlyScheme = urnSchemeMap[action.scheme] || action.scheme;

package/src/flow/actions/add_input_labels.ts

@@ -5,7 +5,7 @@ import { renderNamedObjects } from '../utils';
 
 export const add_input_labels: ActionConfig = {
   name: 'Add Input Labels',
-  color: COLORS.update,
+  color: COLORS.save,
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
   },

package/src/flow/actions/remove_contact_groups.ts

@@ -5,7 +5,7 @@ import { renderNamedObjects } from '../utils';
 
 export const remove_contact_groups: ActionConfig = {
   name: 'Remove from Group',
-  color: COLORS.remove,
+  color: COLORS.update,
   render: (_node: Node, action: RemoveFromGroup) => {
     if (action.all_groups) {
       return html`<div>Remove from all groups</div>`;

package/src/flow/actions/send_email.ts

@@ -19,7 +19,6 @@ export const send_email: ActionConfig = {
       </div>
     </div>`;
   },
-
   form: {
     addresses: {
       type: 'select',
@@ -44,6 +43,17 @@ export const send_email: ActionConfig = {
       minHeight: 175
     }
   },
+  fromFormData: (formData: any): SendEmail => {
+    return {
+      uuid: formData.uuid,
+      type: 'send_email',
+      addresses: formData.addresses.map(
+        (addr: { name: string; value: string }) => addr.value
+      ),
+      subject: formData.subject,
+      body: formData.body
+    };
+  },
   validate: (action: SendEmail): ValidationResult => {
     const errors: { [key: string]: string } = {};
 

package/src/flow/actions/send_msg.ts

@@ -2,6 +2,7 @@ import { html } from 'lit-html';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SendMsg } from '../../store/flow-definition';
+import { titleCase } from '../../utils';
 
 export const send_msg: ActionConfig = {
   name: 'Send Message',
@@ -65,10 +66,10 @@ export const send_msg: ActionConfig = {
         type: {
           type: 'select',
           options: [
-            { value: 'image', label: 'Image' },
-            { value: 'audio', label: 'Audio' },
-            { value: 'video', label: 'Video' },
-            { value: 'document', label: 'Document' }
+            { value: 'image', name: 'Image' },
+            { value: 'audio', name: 'Audio' },
+            { value: 'video', name: 'Video' },
+            { value: 'document', name: 'Document' }
           ],
           required: true,
           searchable: false
@@ -116,7 +117,10 @@ export const send_msg: ActionConfig = {
   ],
   toFormData: (action: SendMsg) => {
     // Extract runtime attachments from the text field attachments
-    const runtimeAttachments: { type: string; expression: string }[] = [];
+    const runtimeAttachments: {
+      type: { name: string; value: string };
+      expression: string;
+    }[] = [];
     const staticAttachments: string[] = [];
 
     if (action.attachments && Array.isArray(action.attachments)) {
@@ -127,13 +131,11 @@ export const send_msg: ActionConfig = {
           const value = attachment.substring(colonIndex + 1);
 
           if (!contentType.includes('/')) {
-            // This is a runtime attachment
             runtimeAttachments.push({
-              type: contentType,
+              type: { name: titleCase(contentType), value: contentType },
               expression: value
             });
           } else {
-            // This is a static attachment
             staticAttachments.push(attachment);
           }
         }
@@ -165,10 +167,17 @@ export const send_msg: ActionConfig = {
     // Combine static attachments from text field with runtime attachments
     const staticAttachments = data.attachments || [];
     const runtimeAttachments = (data.runtime_attachments || [])
-      .filter((item: any) => item && item.type && item.expression) // Filter out invalid items
+      .filter(
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) => item && item.type && item.expression
+      ) // Filter out invalid items
       .map(
-        (item: { type: string; expression: string }) =>
-          `${item.type}:${item.expression}`
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) => `${item.type[0].value}:${item.expression}`
       );
 
     result.attachments = [...staticAttachments, ...runtimeAttachments];

package/src/flow/actions/set_contact_channel.ts

@@ -1,13 +1,36 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
 
 export const set_contact_channel: ActionConfig = {
-  name: 'Update Contact Channel',
+  name: 'Update Channel',
   color: COLORS.update,
   render: (_node: Node, action: SetContactChannel) => {
-    return html`<div>
-      Set contact channel to <b>${action.channel.name}</b>
-    </div>`;
+    return html`<div>Set to <b>${action.channel.name}</b></div>`;
+  },
+  form: {
+    channel: {
+      type: 'select',
+      label: 'Channel',
+      required: true,
+      searchable: true,
+      clearable: false,
+      endpoint: '/api/v2/channels.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      helpText: 'Select the channel to set for the contact'
+    }
+  },
+  validate: (formData: SetContactChannel): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.channel) {
+      errors.channel = 'Channel is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
   }
 };

package/src/flow/actions/set_contact_field.ts

@@ -1,13 +1,67 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, COLORS, ValidationResult } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
 
 export const set_contact_field: ActionConfig = {
-  name: 'Update Contact Field',
+  name: 'Update Field',
   color: COLORS.update,
   render: (_node: Node, action: SetContactField) => {
     return html`<div>
       Set <b>${action.field.name}</b> to <b>${action.value}</b>
     </div>`;
+  },
+  form: {
+    field: {
+      type: 'select',
+      label: 'Field',
+      required: true,
+      searchable: true,
+      clearable: false,
+      nameKey: 'name',
+      valueKey: 'key',
+      endpoint: '/api/v2/fields.json',
+      helpText: 'Select the contact field to update',
+      allowCreate: true,
+      createArbitraryOption: (input: string) => ({ key: input, name: input })
+    },
+    value: {
+      type: 'text',
+      label: 'Value',
+      placeholder: 'Enter field value...',
+      required: true,
+      evaluated: true,
+      helpText:
+        'The new value for the contact field. You can use expressions like @contact.name'
+    }
+  },
+  fromFormData: (formData: SetContactField): SetContactField => {
+    const field = formData.field[0];
+    return {
+      uuid: formData.uuid,
+      type: 'set_contact_field',
+      field: { name: field.name, key: field.key },
+      value: formData.value
+    };
+  },
+  validate: (formData: SetContactField): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.field) {
+      errors.field = 'Field is required';
+    }
+
+    if (!formData.value || formData.value.trim() === '') {
+      errors.value = 'Field value is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  sanitize: (formData: SetContactField): void => {
+    if (formData.value && typeof formData.value === 'string') {
+      formData.value = formData.value.trim();
+    }
   }
 };