@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/actions/add_contact_urn.ts

@@ -1,17 +1,89 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult
+} from '../types';
 import { Node, AddContactUrn } from '../../store/flow-definition';
-import { urnSchemeMap } from '../utils';
+import { SCHEMES } from '../utils';
 
 export const add_contact_urn: ActionConfig = {
   name: 'Add URN',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
   render: (_node: Node, action: AddContactUrn) => {
-    const friendlyScheme = urnSchemeMap[action.scheme] || action.scheme;
+    const schemeObj = SCHEMES.find((s) => s.scheme === action.scheme);
+    const friendlyScheme = schemeObj?.path || action.scheme;
     return html`<div
       style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
     >
       Add ${friendlyScheme} <strong>${action.path}</strong>
     </div>`;
+  },
+
+  toFormData: (action: AddContactUrn) => {
+    const schemeObj = SCHEMES.find((s) => s.scheme === action.scheme);
+    return {
+      uuid: action.uuid,
+      scheme: schemeObj
+        ? [{ name: schemeObj.path, value: action.scheme }]
+        : null,
+      path: action.path || ''
+    };
+  },
+
+  fromFormData: (formData: FormData): AddContactUrn => {
+    // Extract scheme value from select format
+    const schemeValue =
+      Array.isArray(formData.scheme) && formData.scheme.length > 0
+        ? formData.scheme[0].value
+        : 'tel';
+
+    return {
+      uuid: formData.uuid,
+      type: 'add_contact_urn',
+      scheme: schemeValue,
+      path: formData.path || ''
+    };
+  },
+
+  form: {
+    scheme: {
+      type: 'select',
+      label: 'URN Type',
+      helpText: 'Select the type of URN to add to the contact',
+      required: true,
+      searchable: false,
+      multi: false,
+      options: SCHEMES.map((scheme) => ({
+        name: scheme.path,
+        value: scheme.scheme
+      }))
+    },
+    path: {
+      type: 'text',
+      label: 'URN Value',
+      helpText: 'Enter the URN value (e.g., phone number, Facebook ID, etc.)',
+      required: true,
+      placeholder: 'Enter the URN value...',
+      evaluated: true
+    }
+  },
+
+  validate: (formData: FormData): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    if (!formData.scheme || formData.scheme.length === 0) {
+      errors.scheme = 'URN type is required';
+    }
+
+    if (!formData.path || formData.path.trim() === '') {
+      errors.path = 'URN value is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
   }
 };

package/src/flow/actions/add_input_labels.ts

@@ -1,11 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
 import { Node, AddInputLabels } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
 
 export const add_input_labels: ActionConfig = {
   name: 'Add Input Labels',
-  color: COLORS.save,
+  group: ACTION_GROUPS.save,
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
   },
@@ -13,7 +13,7 @@ export const add_input_labels: ActionConfig = {
   // Form-level transformations
   toFormData: (action: AddInputLabels) => {
     return {
-      labels: action.labels || [],
+      labels: action.labels || null,
       uuid: action.uuid
     };
   },
@@ -48,7 +48,7 @@ export const add_input_labels: ActionConfig = {
       }
     }
   },
-  fromFormData: (formData: any): AddInputLabels => {
+  fromFormData: (formData: FormData): AddInputLabels => {
     return {
       uuid: formData.uuid,
       type: 'add_input_labels',

package/src/flow/actions/play_audio.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS } from '../types';
 import { Node, PlayAudio } from '../../store/flow-definition';
 
 export const play_audio: ActionConfig = {
   name: 'Play Audio',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
   render: (_node: Node, _action: PlayAudio) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Play Audio</div>`;

package/src/flow/actions/remove_contact_groups.ts

@@ -1,11 +1,16 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult
+} from '../types';
 import { Node, RemoveFromGroup } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
 
 export const remove_contact_groups: ActionConfig = {
   name: 'Remove from Group',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
   render: (_node: Node, action: RemoveFromGroup) => {
     if (action.all_groups) {
       return html`<div>Remove from all groups</div>`;
@@ -16,7 +21,7 @@ export const remove_contact_groups: ActionConfig = {
     return {
       uuid: action.uuid,
       all_groups: action.all_groups || false,
-      groups: action.groups || []
+      groups: action.groups || null
     };
   },
   form: {
@@ -42,10 +47,13 @@ export const remove_contact_groups: ActionConfig = {
         'Check this to remove the contact from all groups instead of specific ones'
     }
   },
-  validate: (action: RemoveFromGroup): ValidationResult => {
+  validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 
-    if (!action.all_groups && (!action.groups || action.groups.length === 0)) {
+    if (
+      !formData.all_groups &&
+      (!formData.groups || formData.groups.length === 0)
+    ) {
       errors.groups =
         'At least one group must be selected or check "Remove from All Groups"';
     }
@@ -55,7 +63,7 @@ export const remove_contact_groups: ActionConfig = {
       errors
     };
   },
-  fromFormData: (formData: any): RemoveFromGroup => {
+  fromFormData: (formData: FormData): RemoveFromGroup => {
     return {
       uuid: formData.uuid,
       type: 'remove_contact_groups',

package/src/flow/actions/request_optin.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS } from '../types';
 import { Node, RequestOptin } from '../../store/flow-definition';
 
 export const request_optin: ActionConfig = {
   name: 'Request Opt-in',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
   render: (_node: Node, _action: RequestOptin) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Request Opt-in</div>`;

package/src/flow/actions/say_msg.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
   render: (_node: Node, _action: SayMsg) => {
     // This will need to be implemented based on the actual render logic
     return html`<div>Say Message</div>`;

package/src/flow/actions/send_broadcast.ts

@@ -1,35 +1,97 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
 import { Node, SendBroadcast } from '../../store/flow-definition';
-import { renderNamedObjects } from '../utils';
+import { renderStringList } from '../utils';
+import { Icon } from '../../Icons';
 
 export const send_broadcast: ActionConfig = {
   name: 'Send Broadcast',
-  color: COLORS.broadcast,
+  group: ACTION_GROUPS.broadcast,
   render: (_node: Node, action: SendBroadcast) => {
-    const hasGroups = action.groups && action.groups.length > 0;
-    const hasContacts = action.contacts && action.contacts.length > 0;
+    const recipients = [
+      ...(action.contacts || []).map((c) => c.name),
+      ...(action.groups || []).map((g) => g.name)
+    ];
 
     return html`<div>
-      <div
-        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; margin-bottom: 0.5em"
-      >
-        ${action.text}
+      <div>${renderStringList(recipients, Icon.contacts)}</div>
+      <div style="margin-top: 0.5em">
+        <div
+          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+        >
+          ${action.text}
+        </div>
       </div>
-      ${hasGroups
-        ? html`<div style="margin-bottom: 0.25em">
-            <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
-            ${renderNamedObjects(action.groups, 'group')}
-          </div>`
-        : null}
-      ${hasContacts
-        ? html`<div>
-            <div style="font-weight: bold; margin-bottom: 0.25em">
-              Contacts:
-            </div>
-            ${renderNamedObjects(action.contacts, 'contact')}
-          </div>`
-        : null}
     </div>`;
+  },
+
+  form: {
+    recipients: {
+      type: 'select',
+      label: 'Recipients',
+      helpText: 'Select the contacts or groups to receive the broadcast',
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/contacts.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for contacts or groups...',
+      required: true
+    },
+    text: {
+      type: 'message-editor',
+      label: 'Message',
+      helpText:
+        'Enter the message to send with optional attachments. You can use expressions like @contact.name',
+      required: true,
+      evaluated: true,
+      placeholder: 'Type your message here...',
+      maxAttachments: 10,
+      accept: '',
+      endpoint: '/api/v2/media.json',
+      counter: 'temba-charcount',
+      gsm: true,
+      autogrow: true
+    }
+  },
+
+  layout: ['recipients', 'text'],
+
+  toFormData: (action: SendBroadcast) => {
+    return {
+      uuid: action.uuid,
+      recipients: [...(action.contacts || []), ...(action.groups || [])],
+      text: action.text || '',
+      attachments: action.attachments || []
+    };
+  },
+
+  fromFormData: (formData: FormData): SendBroadcast => {
+    const recipients = formData.recipients || [];
+    const contacts = recipients.filter((r: any) => !r.group);
+    const groups = recipients.filter((r: any) => r.group);
+
+    const result: SendBroadcast = {
+      uuid: formData.uuid,
+      type: 'send_broadcast',
+      text: formData.text || '',
+      contacts,
+      groups,
+      attachments: formData.attachments || []
+    };
+
+    // Remove empty attachments array to match original format
+    if (result.attachments.length === 0) {
+      delete result.attachments;
+    }
+
+    return result;
+  },
+
+  sanitize: (formData: FormData): void => {
+    if (formData.text && typeof formData.text === 'string') {
+      formData.text = formData.text.trim();
+    }
   }
 };

package/src/flow/actions/send_email.ts

@@ -1,12 +1,17 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult
+} from '../types';
 import { Node, SendEmail } from '../../store/flow-definition';
 import { renderStringList } from '../utils';
 import { Icon } from '../../Icons';
 
 export const send_email: ActionConfig = {
   name: 'Send Email',
-  color: COLORS.send,
+  group: ACTION_GROUPS.broadcast,
   render: (_node: Node, action: SendEmail) => {
     return html`<div>
       <div>${renderStringList(action.addresses, Icon.email)}</div>
@@ -23,7 +28,6 @@ export const send_email: ActionConfig = {
     addresses: {
       type: 'select',
       label: 'Recipients',
-      options: [],
       multi: true,
       searchable: true,
       placeholder: 'Search for contacts...',
@@ -43,7 +47,7 @@ export const send_email: ActionConfig = {
       minHeight: 175
     }
   },
-  fromFormData: (formData: any): SendEmail => {
+  fromFormData: (formData: FormData): SendEmail => {
     return {
       uuid: formData.uuid,
       type: 'send_email',
@@ -54,10 +58,10 @@ export const send_email: ActionConfig = {
       body: formData.body
     };
   },
-  validate: (action: SendEmail): ValidationResult => {
+  validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 
-    if (!action.addresses || action.addresses.length === 0) {
+    if (!formData.addresses || formData.addresses.length === 0) {
       errors.addresses = 'At least one recipient email address is required';
     }
 

package/src/flow/actions/send_msg.ts

@@ -1,12 +1,17 @@
 import { html } from 'lit-html';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult
+} from '../types';
 import { Node, SendMsg } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
 
 export const send_msg: ActionConfig = {
   name: 'Send Message',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
   render: (_node: Node, action: SendMsg) => {
     const text = action.text.replace(/\n/g, '<br>');
     return html`
@@ -91,11 +96,11 @@ export const send_msg: ActionConfig = {
       label: 'Quick Replies',
       items: ['quick_replies'],
       collapsible: true,
-      collapsed: (formData: any) => {
+      collapsed: (formData: FormData) => {
         // Collapse only if there are no quick replies
         return !formData.quick_replies || formData.quick_replies.length === 0;
       },
-      getGroupValueCount: (formData: any) => {
+      getGroupValueCount: (formData: FormData) => {
         return formData.quick_replies?.length || 0;
       }
     },
@@ -106,7 +111,7 @@ export const send_msg: ActionConfig = {
       collapsible: true,
       collapsed: true,
       helpText: 'Add dynamic attachments that are evaluated at runtime',
-      getGroupValueCount: (formData: any) => {
+      getGroupValueCount: (formData: FormData) => {
         return (
           formData.runtime_attachments?.filter(
             (item: any) =>
@@ -154,7 +159,7 @@ export const send_msg: ActionConfig = {
       }))
     };
   },
-  fromFormData: (data: Record<string, any>) => {
+  fromFormData: (data: FormData) => {
     const result = {
       uuid: data.uuid,
       type: 'send_msg',
@@ -190,44 +195,29 @@ export const send_msg: ActionConfig = {
 
     return result as SendMsg;
   },
-  sanitize: (formData: any): void => {
+  sanitize: (formData: FormData): void => {
     if (formData.text && typeof formData.text === 'string') {
       formData.text = formData.text.trim();
     }
   },
-  validate: (action: SendMsg): ValidationResult => {
+  validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 
-    if (!action.text || action.text.trim() === '') {
-      errors.text = 'Message text is required';
-    }
-
-    const attachments = action.attachments || [];
-    if (attachments.length > 10) {
-      const staticAttachments = attachments.filter(
-        (attachment) =>
-          typeof attachment === 'string' &&
-          attachment.substring(0, attachment.indexOf(':')).includes('/')
-      );
-
-      const runtimeAttachments = attachments.filter(
-        (attachment) =>
-          typeof attachment === 'string' &&
-          !attachment.substring(0, attachment.indexOf(':')).includes('/')
-      );
+    // Check total attachment count (static + runtime should not exceed 10)
+    const staticAttachments = formData.attachments || [];
+    const runtimeAttachments = (formData.runtime_attachments || []).filter(
+      (item: any) => item && item.expression && item.expression.trim() !== ''
+    );
 
+    const totalAttachments =
+      staticAttachments.length + runtimeAttachments.length;
+    if (totalAttachments > 10) {
       if (runtimeAttachments.length > 0) {
         errors.runtime_attachments =
           'Each message can only have up to 10 attachments';
       }
-
       if (staticAttachments.length > 0) {
-        const message = 'Each message can only have up to 10 total attachments';
-        if (errors.text) {
-          errors.text += ` ${message}`;
-        } else {
-          errors.text = message;
-        }
+        errors.text = 'Each message can only have up to 10 total attachments';
       }
     }
 

package/src/flow/actions/set_contact_channel.ts

@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, ACTION_GROUPS } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
 
 export const set_contact_channel: ActionConfig = {
   name: 'Update Channel',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
   render: (_node: Node, action: SetContactChannel) => {
     return html`<div>Set to <strong>${action.channel.name}</strong></div>`;
   },
@@ -21,16 +21,10 @@ export const set_contact_channel: ActionConfig = {
       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';
-    }
-
+  toFormData: (action: SetContactChannel) => {
     return {
-      valid: Object.keys(errors).length === 0,
-      errors
+      uuid: action.uuid,
+      channel: action.channel ? [action.channel] : null
     };
   }
 };

package/src/flow/actions/set_contact_field.ts

@@ -1,15 +1,19 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
 
 export const set_contact_field: ActionConfig = {
   name: 'Update Field',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
   render: (_node: Node, action: SetContactField) => {
-    return html`<div>
-      Set <strong>${action.field.name}</strong> to
-      <strong>${action.value}</strong>
-    </div>`;
+    if (action.value) {
+      return html`<div>
+        Set <strong>${action.field.name}</strong> to
+        <strong>${action.value}</strong>
+      </div>`;
+    } else {
+      return html`<div>Clear <strong>${action.field.name}</strong></div>`;
+    }
   },
   form: {
     field: {
@@ -18,6 +22,7 @@ export const set_contact_field: ActionConfig = {
       required: true,
       searchable: true,
       clearable: false,
+      placeholder: 'Search for contact fields...',
       nameKey: 'name',
       valueKey: 'key',
       endpoint: '/api/v2/fields.json',
@@ -29,13 +34,19 @@ export const set_contact_field: ActionConfig = {
       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 => {
+  toFormData: (action: SetContactField) => {
+    return {
+      uuid: action.uuid,
+      field: action.field ? [action.field] : null,
+      value: action.value
+    };
+  },
+  fromFormData: (formData: FormData): SetContactField => {
     const field = formData.field[0];
     return {
       uuid: formData.uuid,
@@ -44,23 +55,7 @@ export const set_contact_field: ActionConfig = {
       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 => {
+  sanitize: (formData: FormData): void => {
     if (formData.value && typeof formData.value === 'string') {
       formData.value = formData.value.trim();
     }

package/src/flow/actions/set_contact_language.ts

@@ -1,11 +1,16 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult
+} from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
   render: (_node: Node, action: SetContactLanguage) => {
     const languageNames = new Intl.DisplayNames(['en'], {
       type: 'language'
@@ -61,7 +66,7 @@ export const set_contact_language: ActionConfig = {
       uuid: action.uuid
     };
   },
-  fromFormData: (formData: any): SetContactLanguage => {
+  fromFormData: (formData: FormData): SetContactLanguage => {
     return {
       uuid: formData.uuid,
       type: 'set_contact_language',
@@ -69,7 +74,7 @@ export const set_contact_language: ActionConfig = {
     };
   },
 
-  validate: (formData: any): ValidationResult => {
+  validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 
     if (!formData.language) {