@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/flow/nodes/wait_for_dial.ts

@@ -0,0 +1,176 @@
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+
+const DIAL_CATEGORIES = ['Answered', 'No Answer', 'Busy', 'Failed'];
+const DIAL_CASES = [
+  { type: 'has_only_text', arguments: ['answered'], categoryName: 'Answered' },
+  {
+    type: 'has_only_text',
+    arguments: ['no_answer'],
+    categoryName: 'No Answer'
+  },
+  { type: 'has_only_text', arguments: ['busy'], categoryName: 'Busy' }
+];
+
+export const wait_for_dial: NodeConfig = {
+  type: 'wait_for_dial',
+  name: 'Redirect Call',
+  group: SPLIT_GROUPS.wait,
+  flowTypes: [FlowTypes.VOICE],
+  router: {
+    type: 'switch',
+    defaultCategory: 'Failed',
+    rules: DIAL_CASES.map((c) => ({
+      type: c.type as any,
+      arguments: c.arguments,
+      categoryName: c.categoryName
+    }))
+  },
+  form: {
+    phone: {
+      type: 'text',
+      label: 'Phone Number',
+      required: true,
+      evaluated: true,
+      placeholder: 'Phone number or expression'
+    },
+    dial_limit_seconds: {
+      type: 'text',
+      label: 'Dial Limit (seconds)',
+      required: false,
+      placeholder: '60'
+    },
+    call_limit_seconds: {
+      type: 'text',
+      label: 'Call Limit (seconds)',
+      required: false,
+      placeholder: '7200'
+    },
+    result_name: resultNameField
+  },
+  layout: [
+    'phone',
+    {
+      type: 'row',
+      items: ['dial_limit_seconds', 'call_limit_seconds']
+    },
+    'result_name'
+  ],
+  toFormData: (node: Node) => {
+    const wait = node.router?.wait;
+    return {
+      uuid: node.uuid,
+      phone: wait?.phone || '',
+      dial_limit_seconds: wait?.dial_limit_seconds
+        ? String(wait.dial_limit_seconds)
+        : '',
+      call_limit_seconds: wait?.call_limit_seconds
+        ? String(wait.call_limit_seconds)
+        : '',
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const categories: Category[] = [];
+    const exits: Exit[] = [];
+    const cases: any[] = [];
+
+    // Build categories and cases for each dial outcome
+    for (const catName of DIAL_CATEGORIES) {
+      const existing = existingCategories.find(
+        (c: Category) => c.name === catName
+      );
+
+      if (existing) {
+        categories.push(existing);
+        const existingExit = existingExits.find(
+          (e: Exit) => e.uuid === existing.exit_uuid
+        );
+        exits.push(
+          existingExit || {
+            uuid: existing.exit_uuid,
+            destination_uuid: null
+          }
+        );
+      } else {
+        const exitUuid = generateUUID();
+        categories.push({
+          uuid: generateUUID(),
+          name: catName,
+          exit_uuid: exitUuid
+        });
+        exits.push({ uuid: exitUuid, destination_uuid: null });
+      }
+    }
+
+    // Build cases for non-default categories
+    for (const dialCase of DIAL_CASES) {
+      const category = categories.find((c) => c.name === dialCase.categoryName);
+      if (!category) continue;
+
+      const existingCase = existingCases.find(
+        (c: any) =>
+          c.type === dialCase.type && c.arguments?.[0] === dialCase.arguments[0]
+      );
+
+      cases.push({
+        uuid: existingCase?.uuid || generateUUID(),
+        type: dialCase.type,
+        arguments: dialCase.arguments,
+        category_uuid: category.uuid
+      });
+    }
+
+    const failedCategory = categories.find((c) => c.name === 'Failed');
+
+    // Build wait config
+    const phone = (formData.phone || '').trim();
+    const dialLimit = parseInt(formData.dial_limit_seconds, 10);
+    const callLimit = parseInt(formData.call_limit_seconds, 10);
+
+    const waitConfig: any = {
+      type: 'dial',
+      phone
+    };
+
+    if (!isNaN(dialLimit) && dialLimit > 0) {
+      waitConfig.dial_limit_seconds = dialLimit;
+    }
+
+    if (!isNaN(callLimit) && callLimit > 0) {
+      waitConfig.call_limit_seconds = callLimit;
+    }
+
+    const router: any = {
+      type: 'switch',
+      operand: '@(default(resume.dial.status, ""))',
+      default_category_uuid: failedCategory?.uuid,
+      cases,
+      categories,
+      wait: waitConfig
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      router.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
+};

package/src/flow/nodes/wait_for_digits.ts

@@ -1,8 +1,92 @@
-import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node } from '../../store/flow-definition';
+import { createRulesRouter } from '../../utils';
+import {
+  getDigitOperators,
+  operatorsToSelectOptions,
+  getOperatorConfig
+} from '../operators';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+import {
+  createRulesArrayConfig,
+  extractUserRules,
+  casesToFormRules
+} from './shared-rules';
 
 export const wait_for_digits: NodeConfig = {
   type: 'wait_for_digits',
   name: 'Wait for Digits',
   group: SPLIT_GROUPS.wait,
-  flowTypes: [FlowTypes.VOICE]
+  flowTypes: [FlowTypes.VOICE],
+  dialogSize: 'large',
+  form: {
+    rules: createRulesArrayConfig(
+      operatorsToSelectOptions(getDigitOperators())
+    ),
+    result_name: resultNameField
+  },
+  layout: [
+    {
+      type: 'text',
+      text: 'Rules match against all digits pressed by the caller followed by the # sign.'
+    },
+    'rules',
+    'result_name'
+  ],
+  validate: (_formData: FormData) => {
+    return {
+      valid: true,
+      errors: {}
+    };
+  },
+  toFormData: (node: Node) => {
+    const rules = casesToFormRules(node);
+    return {
+      uuid: node.uuid,
+      rules,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const userRules = extractUserRules(formData);
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createRulesRouter(
+      '@input.text',
+      userRules,
+      getOperatorConfig,
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    const finalRouter: any = {
+      ...router,
+      wait: {
+        type: 'msg',
+        hint: {
+          type: 'digits'
+        }
+      }
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router: finalRouter,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/nodes/wait_for_menu.ts

@@ -1,8 +1,214 @@
-import { SPLIT_GROUPS, NodeConfig, FlowTypes } from '../types';
+import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
+import { Node, Category, Exit } from '../../store/flow-definition';
+import { generateUUID } from '../../utils';
+import {
+  resultNameField,
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './shared';
+
+// Menu digits in display order: 1-9 then 0
+const MENU_DIGITS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+
+function digitFieldKey(digit: string): string {
+  return `digit_${digit}`;
+}
 
 export const wait_for_menu: NodeConfig = {
   type: 'wait_for_menu',
-  name: 'Wait for Menu Selection',
+  name: 'Wait for Menu',
   group: SPLIT_GROUPS.wait,
-  flowTypes: [FlowTypes.VOICE]
+  flowTypes: [FlowTypes.VOICE],
+  form: {
+    ...Object.fromEntries(
+      MENU_DIGITS.map((digit) => [
+        digitFieldKey(digit),
+        {
+          type: 'text' as const,
+          required: false,
+          placeholder: '',
+          flavor: 'xsmall' as const
+        }
+      ])
+    ),
+    result_name: resultNameField
+  },
+  layout: [
+    {
+      type: 'row' as const,
+      items: ['digit_1', 'digit_2', 'digit_3'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_1: '1', digit_2: '2', digit_3: '3' }
+    },
+    {
+      type: 'row' as const,
+      items: ['digit_4', 'digit_5', 'digit_6'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_4: '4', digit_5: '5', digit_6: '6' }
+    },
+    {
+      type: 'row' as const,
+      items: ['digit_7', 'digit_8', 'digit_9'],
+      gap: '2rem',
+      marginBottom: '0.5rem',
+      inlineLabels: { digit_7: '7', digit_8: '8', digit_9: '9' }
+    },
+    {
+      type: 'row' as const,
+      items: [
+        { type: 'spacer' as const },
+        'digit_0',
+        { type: 'spacer' as const }
+      ],
+      gap: '2rem',
+      inlineLabels: { digit_0: '0' }
+    },
+    'result_name'
+  ],
+  toFormData: (node: Node) => {
+    const formData: FormData = {
+      uuid: node.uuid,
+      result_name: node.router?.result_name || ''
+    };
+
+    // Initialize all digit fields as empty
+    for (const digit of MENU_DIGITS) {
+      formData[digitFieldKey(digit)] = '';
+    }
+
+    // Fill in category names from cases
+    if (node.router?.cases && node.router?.categories) {
+      for (const case_ of node.router.cases) {
+        if (case_.type === 'has_number_eq' && case_.arguments?.[0]) {
+          const digit = case_.arguments[0];
+          const category = node.router.categories.find(
+            (cat: Category) => cat.uuid === case_.category_uuid
+          );
+          if (category && MENU_DIGITS.includes(digit)) {
+            formData[digitFieldKey(digit)] = category.name;
+          }
+        }
+      }
+    }
+
+    return formData;
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const categories: Category[] = [];
+    const exits: Exit[] = [];
+    const cases: any[] = [];
+
+    // Build categories and cases for each filled digit
+    for (const digit of MENU_DIGITS) {
+      const categoryName = (formData[digitFieldKey(digit)] || '').trim();
+      if (!categoryName) continue;
+
+      // Check if a category with this name already exists in our new list
+      let category = categories.find((c) => c.name === categoryName);
+
+      if (!category) {
+        // Try to find existing category with same name to preserve UUIDs
+        const existingCat = existingCategories.find(
+          (c: Category) => c.name === categoryName
+        );
+
+        if (existingCat) {
+          category = existingCat;
+          const existingExit = existingExits.find(
+            (e: Exit) => e.uuid === existingCat.exit_uuid
+          );
+          categories.push(category);
+          exits.push(
+            existingExit || {
+              uuid: existingCat.exit_uuid,
+              destination_uuid: null
+            }
+          );
+        } else {
+          const exitUuid = generateUUID();
+          category = {
+            uuid: generateUUID(),
+            name: categoryName,
+            exit_uuid: exitUuid
+          };
+          categories.push(category);
+          exits.push({ uuid: exitUuid, destination_uuid: null });
+        }
+      }
+
+      // Find existing case for this digit to preserve UUID
+      const existingCase = existingCases.find(
+        (c: any) => c.type === 'has_number_eq' && c.arguments?.[0] === digit
+      );
+
+      cases.push({
+        uuid: existingCase?.uuid || generateUUID(),
+        type: 'has_number_eq',
+        arguments: [digit],
+        category_uuid: category.uuid
+      });
+    }
+
+    // Add "Other" default category
+    const existingOther = existingCategories.find(
+      (c: Category) => c.name === 'Other'
+    );
+
+    let otherCategory: Category;
+    if (existingOther) {
+      otherCategory = existingOther;
+      const existingExit = existingExits.find(
+        (e: Exit) => e.uuid === existingOther.exit_uuid
+      );
+      exits.push(
+        existingExit || {
+          uuid: existingOther.exit_uuid,
+          destination_uuid: null
+        }
+      );
+    } else {
+      const exitUuid = generateUUID();
+      otherCategory = {
+        uuid: generateUUID(),
+        name: 'Other',
+        exit_uuid: exitUuid
+      };
+      exits.push({ uuid: exitUuid, destination_uuid: null });
+    }
+    categories.push(otherCategory);
+
+    const router: any = {
+      type: 'switch',
+      operand: '@input.text',
+      default_category_uuid: otherCategory.uuid,
+      cases,
+      categories,
+      wait: {
+        type: 'msg',
+        hint: {
+          type: 'digits',
+          count: 1
+        }
+      }
+    };
+
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      router.result_name = formData.result_name.trim();
+    }
+
+    return {
+      ...originalNode,
+      router,
+      exits
+    };
+  },
+  localizable: 'categories',
+  toLocalizationFormData: categoriesToLocalizationFormData,
+  fromLocalizationFormData: localizationFormDataToCategories
 };

package/src/flow/operators.ts

@@ -44,11 +44,6 @@ export const OPERATORS: OperatorConfig[] = [
     operands: 0,
     categoryName: 'Has Text'
   },
-  {
-    type: 'has_pattern',
-    name: 'matches regex',
-    operands: 1
-  },
 
   // Number operators
   {
@@ -180,6 +175,11 @@ export const OPERATORS: OperatorConfig[] = [
     operands: 0,
     categoryName: 'Not Empty',
     visibility: 'hidden'
+  },
+  {
+    type: 'has_pattern',
+    name: 'matches regex',
+    operands: 1
   }
 ];
 
@@ -190,6 +190,24 @@ export const getWaitForResponseOperators = (): OperatorConfig[] => {
   );
 };
 
+// Number operator types used for digit-based routing
+const DIGIT_OPERATOR_TYPES = new Set([
+  'has_beginning',
+  'has_number',
+  'has_number_between',
+  'has_number_lt',
+  'has_number_lte',
+  'has_number_eq',
+  'has_number_gte',
+  'has_number_gt',
+  'has_pattern'
+]);
+
+// Get operators suitable for wait_for_digits rules (number operators + regex)
+export const getDigitOperators = (): OperatorConfig[] => {
+  return OPERATORS.filter((op) => DIGIT_OPERATOR_TYPES.has(op.type));
+};
+
 // Get operator configuration by type
 export const getOperatorConfig = (type: string): OperatorConfig | undefined => {
   return OPERATORS.find((op) => op.type === type);

package/src/flow/types.ts

@@ -114,6 +114,8 @@ export interface NodeConfig extends FormConfig {
     rules?: {
       type:
         | 'has_number_between'
+        | 'has_number_eq'
+        | 'has_only_text'
         | 'has_string'
         | 'has_value'
         | 'has_not_value'
@@ -253,6 +255,12 @@ export interface MessageEditorFieldConfig extends BaseFieldConfig {
   disableCompletion?: boolean;
 }
 
+export interface MediaFieldConfig extends BaseFieldConfig {
+  type: 'media';
+  accept?: string; // MIME filter, e.g. 'audio/*'
+  endpoint?: string; // upload endpoint, defaults to DEFAULT_MEDIA_ENDPOINT
+}
+
 export type FieldConfig =
   | TextFieldConfig
   | TextareaFieldConfig
@@ -260,7 +268,8 @@ export type FieldConfig =
   | KeyValueFieldConfig
   | ArrayFieldConfig
   | CheckboxFieldConfig
-  | MessageEditorFieldConfig;
+  | MessageEditorFieldConfig
+  | MediaFieldConfig;
 
 // Layout configurations for better form organization
 // Recursive layout system - any layout item can contain other layout items
@@ -276,6 +285,8 @@ export interface RowLayoutConfig {
   gap?: string; // CSS gap value, defaults to '1rem'
   label?: string; // optional label for the entire row
   helpText?: string; // optional help text for the entire row
+  inlineLabels?: Record<string, string>; // map of field name to inline label text
+  marginBottom?: string; // CSS margin-bottom for spacing below the row
 }
 
 export interface GroupLayoutConfig {
@@ -288,10 +299,21 @@ export interface GroupLayoutConfig {
   getGroupValueCount?: (formData: FormData) => number; // optional function to get count for bubble display
 }
 
+export interface SpacerLayoutConfig {
+  type: 'spacer';
+}
+
+export interface TextLayoutConfig {
+  type: 'text';
+  text: string;
+}
+
 export type LayoutItem =
   | FieldItemConfig
   | RowLayoutConfig
   | GroupLayoutConfig
+  | SpacerLayoutConfig
+  | TextLayoutConfig
   | string; // string is shorthand for field
 
 /**