@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/flow/actions/set_contact_channel.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, ACTION_GROUPS, FlowTypes } 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactChannel) => {
     return html`<div>Set to <strong>${action.channel.name}</strong></div>`;
   },
@@ -21,16 +22,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,20 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   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 +23,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 +35,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 +56,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,18 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult,
+  FlowTypes
+} 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,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
     const languageNames = new Intl.DisplayNames(['en'], {
       type: 'language'
@@ -61,7 +68,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 +76,7 @@ export const set_contact_language: ActionConfig = {
     };
   },
 
-  validate: (formData: any): ValidationResult => {
+  validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 
     if (!formData.language) {

package/src/flow/actions/set_contact_name.ts

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS, ValidationResult } from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactName } from '../../store/flow-definition';
 
 export const set_contact_name: ActionConfig = {
   name: 'Update Name',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactName) => {
     return html`<div>Set to <strong>${action.name}</strong></div>`;
   },
@@ -19,19 +20,7 @@ export const set_contact_name: ActionConfig = {
         'The new name for the contact. You can use expressions like @contact.name'
     }
   },
-  validate: (formData: SetContactName): ValidationResult => {
-    const errors: { [key: string]: string } = {};
-
-    if (!formData.name || formData.name.trim() === '') {
-      errors.name = 'Name is required';
-    }
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  },
-  sanitize: (formData: SetContactName): void => {
+  sanitize: (formData: FormData): void => {
     if (formData.name && typeof formData.name === 'string') {
       formData.name = formData.name.trim();
     }

package/src/flow/actions/set_contact_status.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, SetContactStatus } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
 
 export const set_contact_status: ActionConfig = {
   name: 'Update Status',
-  color: COLORS.update,
+  group: ACTION_GROUPS.contacts,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactStatus) => {
     return html`<div>Set to <strong>${titleCase(action.status)}</strong></div>`;
   },
@@ -18,7 +19,7 @@ export const set_contact_status: ActionConfig = {
       }
     };
   },
-  fromFormData: (formData: any): SetContactStatus => {
+  fromFormData: (formData: FormData): SetContactStatus => {
     return {
       status: formData.status[0].value,
       type: 'set_contact_status',

package/src/flow/actions/set_run_result.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, SetRunResult } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
 
 export const set_run_result: ActionConfig = {
   name: 'Save Flow Result',
-  color: COLORS.save,
+  group: ACTION_GROUPS.save,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetRunResult) => {
     return html`<div>
       Save <strong>${action.value}</strong> as <strong>${action.name}</strong>
@@ -60,12 +61,12 @@ export const set_run_result: ActionConfig = {
   toFormData: (action: SetRunResult) => {
     return {
       uuid: action.uuid,
-      name: action.name ? [{ name: action.name, value: action.name }] : [],
+      name: action.name ? [{ name: action.name, value: action.name }] : null,
       value: action.value || '',
       category: action.category || ''
     };
   },
-  fromFormData: (formData: any): SetRunResult => {
+  fromFormData: (formData: FormData): SetRunResult => {
     // Ensure name is a simple string, handling both direct values and select option objects
     let name = formData.name || '';
     if (Array.isArray(name) && name.length > 0) {

package/src/flow/actions/start_session.ts

@@ -1,12 +1,216 @@
 import { html } from 'lit-html';
-import { ActionConfig, COLORS } from '../types';
+import {
+  ActionConfig,
+  ACTION_GROUPS,
+  FormData,
+  ValidationResult,
+  FlowTypes
+} from '../types';
 import { Node, StartSession } from '../../store/flow-definition';
+import { renderNamedObjects } from '../utils';
 
 export const start_session: ActionConfig = {
-  name: 'Start Session',
-  color: COLORS.execute,
-  render: (_node: Node, _action: StartSession) => {
-    // This will need to be implemented based on the actual render logic
-    return html`<div>Start Session</div>`;
+  name: 'Start Flow',
+  group: ACTION_GROUPS.broadcast,
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  render: (_node: Node, action: StartSession) => {
+    const hasGroups = action.groups && action.groups.length > 0;
+    const hasContacts = action.contacts && action.contacts.length > 0;
+    const hasRecipients = hasGroups || hasContacts;
+
+    // Build the recipients display
+    let recipientsDisplay = html``;
+    if (action.create_contact) {
+      recipientsDisplay = html`Create a new contact`;
+    } else if ((action as any).contact_query) {
+      recipientsDisplay = html`${(action as any).contact_query}`;
+    } else if (hasRecipients) {
+      const allRecipients = [
+        ...(action.contacts || []),
+        ...(action.groups || [])
+      ];
+      recipientsDisplay = html`${renderNamedObjects(
+        allRecipients,
+        hasGroups ? 'group' : 'contact'
+      )}`;
+    }
+
+    return html`
+      <div>
+        <div
+          style="padding: 3px 10px; background: #f5f5f5; padding-bottom: 0px; font-size: 11px; border-radius: var(--curvature); margin-bottom: 10px;"
+        >
+          ${recipientsDisplay}
+        </div>
+        <div style="padding: 0px 10px;">
+          ${renderNamedObjects([action.flow], 'flow')}
+        </div>
+      </div>
+    `;
+  },
+
+  toFormData: (action: StartSession) => {
+    const extendedAction = action as StartSession & {
+      contact_query?: string;
+      exclusions?: { in_a_flow?: boolean };
+    };
+
+    // Determine start type based on action properties
+    let startTypeValue = 'manual';
+    if (action.create_contact) {
+      startTypeValue = 'create';
+    } else if (extendedAction.contact_query) {
+      startTypeValue = 'query';
+    }
+
+    // Map value to full option object for proper display
+    const startTypeOptions = [
+      { value: 'manual', name: 'Select recipients manually' },
+      { value: 'query', name: 'Select a contact with a query' },
+      { value: 'create', name: 'Create a new contact' }
+    ];
+    const startType =
+      startTypeOptions.find((opt) => opt.value === startTypeValue) ||
+      startTypeOptions[0];
+
+    return {
+      flow: action.flow ? [action.flow] : null,
+      recipients: [...(action.contacts || []), ...(action.groups || [])],
+      startType: [startType],
+      contactQuery: extendedAction.contact_query || '',
+      skipContactsInFlow: extendedAction.exclusions?.in_a_flow || false,
+      uuid: action.uuid
+    };
+  },
+
+  form: {
+    flow: {
+      type: 'select',
+      label: 'Flow',
+      helpText: 'Select the flow to start',
+      required: true,
+      searchable: true,
+      endpoint: '/api/v2/flows.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Select a flow...'
+    },
+    startType: {
+      type: 'select',
+      label: 'Start Type',
+      helpText: 'How should contacts be selected?',
+      required: true,
+      options: [
+        { value: 'manual', name: 'Select recipients manually' },
+        { value: 'query', name: 'Select a contact with a query' },
+        { value: 'create', name: 'Create a new contact' }
+      ]
+    },
+    recipients: {
+      type: 'select',
+      label: 'Recipients',
+      helpText: 'Select who should be started in the flow',
+      options: [],
+      multi: true,
+      searchable: true,
+      endpoint: '/api/v2/contacts.json',
+      valueKey: 'uuid',
+      nameKey: 'name',
+      placeholder: 'Search for contacts or groups...',
+      conditions: {
+        visible: (formData: FormData) => {
+          const startType = formData.startType?.[0]?.value;
+          return startType === 'manual';
+        }
+      }
+    },
+    contactQuery: {
+      type: 'text',
+      evaluated: true,
+      label: 'Contact Query',
+      helpText: 'Only one matching contact will be started',
+      placeholder: 'household_id = @fields.household_id',
+      conditions: {
+        visible: (formData: FormData) => {
+          const startType = formData.startType?.[0]?.value;
+          return startType === 'query';
+        }
+      }
+    },
+    skipContactsInFlow: {
+      type: 'checkbox',
+      label: 'Skip contacts currently in a flow',
+      helpText: 'Avoid interrupting a contact who is already in a flow'
+    }
+  },
+
+  layout: [
+    'flow',
+    'startType',
+    'recipients',
+    'contactQuery',
+    'skipContactsInFlow'
+  ],
+
+  validate: (formData: FormData): ValidationResult => {
+    const errors: { [key: string]: string } = {};
+
+    const startType = formData.startType?.[0]?.value;
+
+    // Check if manual selection has recipients
+    if (
+      startType === 'manual' &&
+      (!formData.recipients || formData.recipients.length === 0)
+    ) {
+      errors.recipients = 'At least one contact or group must be selected';
+    }
+
+    // Check if query has a query string
+    if (
+      startType === 'query' &&
+      (!formData.contactQuery || !formData.contactQuery.trim())
+    ) {
+      errors.contactQuery = 'Contact query is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+
+  fromFormData: (formData: FormData): StartSession => {
+    const action: StartSession & {
+      contact_query?: string;
+      exclusions?: { in_a_flow: boolean };
+    } = {
+      uuid: formData.uuid,
+      type: 'start_session',
+      flow: formData.flow[0],
+      groups: [],
+      contacts: []
+    };
+
+    // Get the start type value from array
+    const startTypeValue = formData.startType[0].value;
+
+    // Handle different start types
+    if (startTypeValue === 'create') {
+      action.create_contact = true;
+    } else if (startTypeValue === 'query') {
+      action.contact_query = formData.contactQuery || '';
+    } else {
+      // Manual selection - separate contacts and groups
+      const recipients = formData.recipients || [];
+      action.contacts = recipients.filter((r: any) => !r.group);
+      action.groups = recipients.filter((r: any) => r.group);
+    }
+
+    // Add exclusions if set
+    if (formData.skipContactsInFlow) {
+      action.exclusions = { in_a_flow: true };
+    }
+
+    return action;
   }
 };

package/src/flow/config.ts

@@ -14,9 +14,6 @@ import { set_run_result } from './actions/set_run_result';
 import { send_msg } from './actions/send_msg';
 import { send_email } from './actions/send_email';
 import { start_session } from './actions/start_session';
-import { call_classifier } from './actions/call_classifier';
-import { call_resthook } from './actions/call_resthook';
-import { transfer_airtime } from './actions/transfer_airtime';
 import { set_contact_name } from './actions/set_contact_name';
 import { add_contact_groups } from './actions/add_contact_groups';
 import { remove_contact_groups } from './actions/remove_contact_groups';
@@ -36,46 +33,39 @@ import { split_by_scheme } from './nodes/split_by_scheme';
 import { split_by_subflow } from './nodes/split_by_subflow';
 import { split_by_ticket } from './nodes/split_by_ticket';
 import { split_by_webhook } from './nodes/split_by_webhook';
+import { split_by_resthook } from './nodes/split_by_resthook';
 import { split_by_llm } from './nodes/split_by_llm';
 import { split_by_llm_categorize } from './nodes/split_by_llm_categorize';
-import { wait_for_audio } from './nodes/wait_for_audio';
 import { wait_for_digits } from './nodes/wait_for_digits';
-import { wait_for_image } from './nodes/wait_for_image';
-import { wait_for_location } from './nodes/wait_for_location';
 import { wait_for_menu } from './nodes/wait_for_menu';
 import { wait_for_response } from './nodes/wait_for_response';
-import { wait_for_video } from './nodes/wait_for_video';
 
 export const ACTION_CONFIG: {
   [key: string]: ActionConfig;
 } = {
-  add_input_labels,
-  add_contact_urn,
+  say_msg,
+  play_audio,
   set_contact_field,
-  set_contact_channel,
-  set_contact_language,
-  set_contact_status,
   send_broadcast,
   set_run_result,
   send_msg,
   send_email,
   start_session,
-  call_classifier,
-  call_resthook,
-  transfer_airtime,
   set_contact_name,
   add_contact_groups,
   remove_contact_groups,
-  request_optin,
-  say_msg,
-  play_audio
+  set_contact_channel,
+  set_contact_language,
+  set_contact_status,
+  add_contact_urn,
+  add_input_labels,
+  request_optin
 };
 
 export const NODE_CONFIG: {
   [key: string]: NodeConfig;
 } = {
   execute_actions,
-  split_by_airtime,
   split_by_contact_field,
   split_by_expression,
   split_by_groups,
@@ -87,11 +77,9 @@ export const NODE_CONFIG: {
   split_by_subflow,
   split_by_ticket,
   split_by_webhook,
-  wait_for_audio,
+  split_by_resthook,
   wait_for_digits,
-  wait_for_image,
-  wait_for_location,
   wait_for_menu,
   wait_for_response,
-  wait_for_video
+  split_by_airtime
 };

package/src/flow/currencies.ts

@@ -0,0 +1,51 @@
+// Currency definitions for airtime transfers
+// Based on the original React implementation
+
+export interface Currency {
+  code: string;
+  name: string;
+}
+
+export const CURRENCIES: Record<string, Currency> = {
+  ARS: { code: 'ARS', name: 'Argentine Peso' },
+  AUD: { code: 'AUD', name: 'Australian Dollar' },
+  BIF: { code: 'BIF', name: 'Burundi Franc' },
+  BRL: { code: 'BRL', name: 'Brazilian Real' },
+  CAD: { code: 'CAD', name: 'Canadian Dollar' },
+  CDF: { code: 'CDF', name: 'Congolese Franc' },
+  CLP: { code: 'CLP', name: 'Chilean Peso' },
+  COP: { code: 'COP', name: 'Colombian Peso' },
+  DJF: { code: 'DJF', name: 'Djibouti Franc' },
+  DOP: { code: 'DOP', name: 'Dominican Peso' },
+  DZD: { code: 'DZD', name: 'Algerian Dinar' },
+  EUR: { code: 'EUR', name: 'Euro' },
+  GBP: { code: 'GBP', name: 'Pound Sterling' },
+  GHS: { code: 'GHS', name: 'Ghana Cedi' },
+  GNF: { code: 'GNF', name: 'Guinean Franc' },
+  KES: { code: 'KES', name: 'Kenyan Shilling' },
+  LBP: { code: 'LBP', name: 'Lebanese Pound' },
+  LKR: { code: 'LKR', name: 'Sri Lanka Rupee' },
+  LRD: { code: 'LRD', name: 'Liberian Dollar' },
+  MWK: { code: 'MWK', name: 'Malawian Kwacha' },
+  MXN: { code: 'MXN', name: 'Mexican Peso' },
+  MZN: { code: 'MZN', name: 'Mozambican Metical' },
+  NAD: { code: 'NAD', name: 'Namibian Dollar' },
+  NGN: { code: 'NGN', name: 'Nigerian Naira' },
+  PEN: { code: 'PEN', name: 'Peruvian Sol' },
+  PHP: { code: 'PHP', name: 'Philippine Peso' },
+  RWF: { code: 'RWF', name: 'Rwandan Franc' },
+  SZL: { code: 'SZL', name: 'Swazi Lilangeni' },
+  TZS: { code: 'TZS', name: 'Tanzanian Shilling' },
+  UGX: { code: 'UGX', name: 'Ugandan Shilling' },
+  USD: { code: 'USD', name: 'US Dollar' },
+  XAF: { code: 'XAF', name: 'Central African CFA Franc' },
+  XOF: { code: 'XOF', name: 'West African CFA Franc' },
+  ZAR: { code: 'ZAR', name: 'South African Rand' },
+  ZMW: { code: 'ZMW', name: 'Zambian Kwacha' }
+};
+
+// Convert currencies to select options format
+export const CURRENCY_OPTIONS = Object.values(CURRENCIES).map((currency) => ({
+  value: currency.code,
+  name: `${currency.name} (${currency.code})`
+}));