@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/flow/actions/add_contact_groups.ts

@@ -1,11 +1,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, AddToGroup } from '../../store/flow-definition';
 import { renderNamedObjects } from '../utils';
 
 export const add_contact_groups: ActionConfig = {
   name: 'Add to Group',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: AddToGroup) => {
     return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
   },
@@ -13,7 +14,7 @@ export const add_contact_groups: ActionConfig = {
   // Form-level transformations - default 1:1 mapping for this case
   toFormData: (action: AddToGroup) => {
     return {
-      groups: action.groups || [],
+      groups: action.groups || null,
       uuid: action.uuid
     };
   },
@@ -47,7 +48,7 @@ export const add_contact_groups: ActionConfig = {
       }
     }
   },
-  fromFormData: (formData: any): AddToGroup => {
+  fromFormData: (formData: FormData): AddToGroup => {
     return {
       uuid: formData.uuid,
       type: 'add_contact_groups',

package/src/flow/actions/add_contact_urn.ts

@@ -1,17 +1,91 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult,
+  FlowTypes
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   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,12 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: AddInputLabels) => {
     return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
   },
@@ -13,7 +14,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 +49,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,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, PlayAudio } from '../../store/flow-definition';
 
 export const play_audio: ActionConfig = {
   name: 'Play Audio',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
+  flowTypes: [FlowTypes.VOICE],
   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,18 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult,
+  FlowTypes
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: RemoveFromGroup) => {
     if (action.all_groups) {
       return html`<div>Remove from all groups</div>`;
@@ -16,7 +23,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 +49,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 +65,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,11 @@
 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,
+  flowTypes: [],
   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,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
-  color: COLORS.send,
+  group: ACTION_GROUPS.send,
+  flowTypes: [FlowTypes.VOICE],
   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,98 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   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,19 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult,
+  FlowTypes
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SendEmail) => {
     return html`<div>
       <div>${renderStringList(action.addresses, Icon.email)}</div>
@@ -23,7 +30,6 @@ export const send_email: ActionConfig = {
     addresses: {
       type: 'select',
       label: 'Recipients',
-      options: [],
       multi: true,
       searchable: true,
       placeholder: 'Search for contacts...',
@@ -43,7 +49,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 +60,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,19 +1,26 @@
 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,
+  FlowTypes
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SendMsg) => {
     const text = action.text.replace(/\n/g, '<br>');
     return html`
       ${unsafeHTML(text)}
-      ${action.quick_replies?.length > 0
+      ${(action.quick_replies || [])?.length > 0
         ? html`<div class="quick-replies">
-            ${action.quick_replies.map((reply) => {
+            ${(action.quick_replies || []).map((reply) => {
               return html`<div class="quick-reply">${reply}</div>`;
             })}
             ${action.template
@@ -91,11 +98,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 +113,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 +161,7 @@ export const send_msg: ActionConfig = {
       }))
     };
   },
-  fromFormData: (data: Record<string, any>) => {
+  fromFormData: (data: FormData) => {
     const result = {
       uuid: data.uuid,
       type: 'send_msg',
@@ -190,44 +197,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';
       }
     }
 
@@ -235,5 +227,134 @@ export const send_msg: ActionConfig = {
       valid: Object.keys(errors).length === 0,
       errors
     };
+  },
+  localizable: ['text', 'quick_replies', 'attachments'],
+  toLocalizationFormData: (
+    action: SendMsg,
+    localization: Record<string, any>
+  ) => {
+    // Convert localized values to form data format
+    // Localized values are stored as arrays even for single values
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    // Handle text (single value, but stored as array in localization)
+    if (localization.text && Array.isArray(localization.text)) {
+      formData.text = localization.text[0] || '';
+    } else {
+      // Fall back to empty string if no localization
+      formData.text = '';
+    }
+
+    // Handle attachments (already an array)
+    if (localization.attachments && Array.isArray(localization.attachments)) {
+      formData.attachments = localization.attachments;
+    }
+
+    // Handle quick_replies (already an array)
+    if (
+      localization.quick_replies &&
+      Array.isArray(localization.quick_replies)
+    ) {
+      formData.quick_replies = localization.quick_replies.map((reply) => ({
+        name: reply,
+        value: reply
+      }));
+    }
+
+    // Extract runtime attachments from localized attachments
+    const runtimeAttachments: {
+      type: { name: string; value: string };
+      expression: string;
+    }[] = [];
+    const staticAttachments: string[] = [];
+
+    if (formData.attachments && Array.isArray(formData.attachments)) {
+      formData.attachments.forEach((attachment) => {
+        if (typeof attachment === 'string' && attachment.includes(':')) {
+          const colonIndex = attachment.indexOf(':');
+          const contentType = attachment.substring(0, colonIndex);
+          const value = attachment.substring(colonIndex + 1);
+
+          if (!contentType.includes('/')) {
+            runtimeAttachments.push({
+              type: { name: titleCase(contentType), value: contentType },
+              expression: value
+            });
+          } else {
+            staticAttachments.push(attachment);
+          }
+        }
+      });
+    }
+
+    formData.attachments = staticAttachments;
+    formData.runtime_attachments = runtimeAttachments;
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendMsg) => {
+    // Convert form data to localization format
+    // All values must be stored as arrays
+    const localization: Record<string, any> = {};
+
+    // Handle text (store as single-element array)
+    // Only save if not empty and different from base action
+    if (formData.text && formData.text.trim() !== '') {
+      if (formData.text !== action.text) {
+        localization.text = [formData.text];
+      }
+    }
+
+    // Handle quick_replies (store as array)
+    const quickReplies = (formData.quick_replies || [])
+      .map((reply: any) =>
+        typeof reply === 'string' ? reply : reply.value || reply.name || reply
+      )
+      .filter((reply: string) => reply && reply.trim() !== '');
+
+    // Only save if there are quick replies and different from base action
+    if (quickReplies.length > 0) {
+      if (
+        JSON.stringify(quickReplies) !==
+        JSON.stringify(action.quick_replies || [])
+      ) {
+        localization.quick_replies = quickReplies;
+      }
+    }
+
+    // Handle attachments (combine static and runtime attachments)
+    const staticAttachments = (formData.attachments || []).filter(
+      (att: string) => att && att.trim() !== ''
+    );
+    const runtimeAttachments = (formData.runtime_attachments || [])
+      .filter(
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) =>
+          item && item.type && item.expression && item.expression.trim() !== ''
+      )
+      .map(
+        (item: {
+          type: [{ name: string; value: string }];
+          expression: string;
+        }) => `${item.type[0].value}:${item.expression}`
+      );
+
+    const allAttachments = [...staticAttachments, ...runtimeAttachments];
+
+    // Only save if there are attachments and different from base action
+    if (allAttachments.length > 0) {
+      if (
+        JSON.stringify(allAttachments) !==
+        JSON.stringify(action.attachments || [])
+      ) {
+        localization.attachments = allAttachments;
+      }
+    }
+
+    return localization;
   }
 };