@nyaruka/temba-components 0.156.9 → 0.156.11

package/src/flow/ZoomManager.ts

@@ -524,8 +524,7 @@ export class ZoomManager {
     const dx = canvasX - this.loupeCursorCanvas.x;
     const dy = canvasY - this.loupeCursorCanvas.y;
     const moved =
-      Math.abs(dx) > visibleRadius * 0.5 ||
-      Math.abs(dy) > visibleRadius * 0.5;
+      Math.abs(dx) > visibleRadius * 0.5 || Math.abs(dy) > visibleRadius * 0.5;
 
     if (
       !this.loupeClone ||

package/src/flow/actions/play_audio.ts

@@ -42,32 +42,5 @@ export const play_audio: ActionConfig = {
       audio_url: (data.audio_url || '').trim()
     } as PlayAudio;
   },
-  localizable: ['audio_url'],
-  toLocalizationFormData: (
-    action: PlayAudio,
-    localization: Record<string, any>
-  ) => {
-    const formData: FormData = {
-      uuid: action.uuid
-    };
-
-    if (localization.audio_url && Array.isArray(localization.audio_url)) {
-      formData.audio_url = localization.audio_url[0] || '';
-    } else {
-      formData.audio_url = '';
-    }
-
-    return formData;
-  },
-  fromLocalizationFormData: (formData: FormData, action: PlayAudio) => {
-    const localization: Record<string, any> = {};
-
-    if (formData.audio_url && formData.audio_url.trim() !== '') {
-      if (formData.audio_url !== action.audio_url) {
-        localization.audio_url = [formData.audio_url];
-      }
-    }
-
-    return localization;
-  }
+  localizable: ['audio_url']
 };

package/src/flow/actions/say_msg.ts

@@ -63,44 +63,5 @@ export const say_msg: ActionConfig = {
       formData.text = formData.text.trim();
     }
   },
-  localizable: ['text', 'audio_url'],
-  toLocalizationFormData: (
-    action: SayMsg,
-    localization: Record<string, any>
-  ) => {
-    const formData: FormData = {
-      uuid: action.uuid
-    };
-
-    if (localization.text && Array.isArray(localization.text)) {
-      formData.text = localization.text[0] || '';
-    } else {
-      formData.text = '';
-    }
-
-    if (localization.audio_url && Array.isArray(localization.audio_url)) {
-      formData.audio_url = localization.audio_url[0] || '';
-    } else {
-      formData.audio_url = '';
-    }
-
-    return formData;
-  },
-  fromLocalizationFormData: (formData: FormData, action: SayMsg) => {
-    const localization: Record<string, any> = {};
-
-    if (formData.text && formData.text.trim() !== '') {
-      if (formData.text !== action.text) {
-        localization.text = [formData.text];
-      }
-    }
-
-    if (formData.audio_url && formData.audio_url.trim() !== '') {
-      if (formData.audio_url !== action.audio_url) {
-        localization.audio_url = [formData.audio_url];
-      }
-    }
-
-    return localization;
-  }
+  localizable: ['text', 'audio_url']
 };

package/src/flow/actions/send_broadcast.ts

@@ -220,8 +220,7 @@ export const send_broadcast: ActionConfig = {
 
     if (attachments.length > 0) {
       if (
-        JSON.stringify(attachments) !==
-        JSON.stringify(action.attachments || [])
+        JSON.stringify(attachments) !== JSON.stringify(action.attachments || [])
       ) {
         localization.attachments = attachments;
       }

package/src/flow/actions/send_email.ts

@@ -1,16 +1,11 @@
 import { html } from 'lit-html';
-import {
-  ActionConfig,
-  ACTION_GROUPS,
-  FormData,
-  ValidationResult,
-  FlowTypes
-} from '../types';
+import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SendEmail } from '../../store/flow-definition';
 import {
   renderStringList,
   renderClamped,
-  renderHighlightedText
+  renderHighlightedText,
+  validateWith
 } from '../utils';
 import { Icon } from '../../Icons';
 
@@ -67,55 +62,9 @@ export const send_email: ActionConfig = {
     };
   },
   localizable: ['subject', 'body'],
-  toLocalizationFormData: (
-    action: SendEmail,
-    localization: Record<string, any>
-  ) => {
-    const formData: FormData = {
-      uuid: action.uuid
-    };
-
-    if (localization.subject && Array.isArray(localization.subject)) {
-      formData.subject = localization.subject[0] || '';
-    } else {
-      formData.subject = '';
-    }
-
-    if (localization.body && Array.isArray(localization.body)) {
-      formData.body = localization.body[0] || '';
-    } else {
-      formData.body = '';
-    }
-
-    return formData;
-  },
-  fromLocalizationFormData: (formData: FormData, action: SendEmail) => {
-    const localization: Record<string, any> = {};
-
-    if (formData.subject && formData.subject.trim() !== '') {
-      if (formData.subject !== action.subject) {
-        localization.subject = [formData.subject];
-      }
-    }
-
-    if (formData.body && formData.body.trim() !== '') {
-      if (formData.body !== action.body) {
-        localization.body = [formData.body];
-      }
-    }
-
-    return localization;
-  },
-  validate: (formData: FormData): ValidationResult => {
-    const errors: { [key: string]: string } = {};
-
+  validate: validateWith((formData, errors) => {
     if (!formData.addresses || formData.addresses.length === 0) {
       errors.addresses = 'At least one recipient email address is required';
     }
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  }
+  })
 };

package/src/flow/actions/send_msg.ts

@@ -172,7 +172,11 @@ export const send_msg: ActionConfig = {
 
           if (!contentType.includes('/')) {
             runtimeAttachments.push({
-              type: { name: ATTACHMENT_TYPE_NAMES[contentType] || titleCase(contentType), value: contentType },
+              type: {
+                name:
+                  ATTACHMENT_TYPE_NAMES[contentType] || titleCase(contentType),
+                value: contentType
+              },
               expression: value
             });
           } else {
@@ -319,7 +323,11 @@ export const send_msg: ActionConfig = {
 
           if (!contentType.includes('/')) {
             runtimeAttachments.push({
-              type: { name: ATTACHMENT_TYPE_NAMES[contentType] || titleCase(contentType), value: contentType },
+              type: {
+                name:
+                  ATTACHMENT_TYPE_NAMES[contentType] || titleCase(contentType),
+                value: contentType
+              },
               expression: value
             });
           } else {

package/src/flow/actions/start_session.ts

@@ -236,8 +236,7 @@ export const start_session: ActionConfig = {
       const recipients = formData.recipients || [];
       action.contacts = recipients
         .filter(
-          (r: any) =>
-            r.type === 'contact' || (!r.type && !r.expression && r.id)
+          (r: any) => r.type === 'contact' || (!r.type && !r.expression && r.id)
         )
         .map((c: any) => ({ uuid: c.id, name: c.name }));
       action.groups = recipients

package/src/flow/categoryLocalization.ts

@@ -1,10 +1,6 @@
 import { Category } from '../store/flow-definition';
 import { NODE_CONFIG } from './config';
-
-const SYSTEM_CATEGORIES_ALLOWED_FOR_TRANSLATION = new Set([
-  'Other',
-  'No Response'
-]);
+import { SYSTEM_CATEGORIES_ALLOWED_FOR_TRANSLATION } from './categoryUtils';
 
 export function getTranslatableCategoriesForNode(
   nodeType: string | undefined,

package/src/flow/categoryUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Shared helpers and constants for router category handling.
+ *
+ * This module is the single source of truth for:
+ *  - reserved category names (forbidden to users across all node types)
+ *  - system category names (auto-generated; filtered from user-editable rules)
+ *  - case-insensitive category name comparison and lookup
+ */
+
+/**
+ * Names reserved for system-generated categories. Users may not create
+ * categories whose names collide with these (matching is case-insensitive).
+ */
+export const RESERVED_CATEGORY_NAMES = [
+  'Other',
+  'All Responses',
+  'No Response',
+  'Failure',
+  'Success',
+  'Timeout'
+] as const;
+
+/**
+ * Categories that are auto-generated by the system and should be filtered out
+ * when converting router data back into user-editable form rules.
+ */
+export const SYSTEM_CATEGORY_NAMES = [
+  'Other',
+  'All Responses',
+  'No Response',
+  'Timeout'
+] as const;
+
+/**
+ * System categories permitted to be localized even on nodes that otherwise
+ * block translation of system categories.
+ */
+export const SYSTEM_CATEGORIES_ALLOWED_FOR_TRANSLATION: ReadonlySet<string> =
+  new Set(['Other', 'No Response']);
+
+const RESERVED_LOWER = new Set<string>(
+  RESERVED_CATEGORY_NAMES.map((n) => n.toLowerCase())
+);
+
+const SYSTEM_LOWER = new Set<string>(
+  SYSTEM_CATEGORY_NAMES.map((n) => n.toLowerCase())
+);
+
+const normalize = (name: string | undefined | null): string =>
+  (name || '').trim().toLowerCase();
+
+/** Case-insensitive check for reserved category names. */
+export const isReservedCategoryName = (name: string): boolean =>
+  RESERVED_LOWER.has(normalize(name));
+
+/** Case-insensitive check for auto-generated system categories. */
+export const isSystemCategory = (name: string): boolean =>
+  SYSTEM_LOWER.has(normalize(name));
+
+/** Case-insensitive equality test for two category names. */
+export const categoryNamesEqual = (a: string, b: string): boolean =>
+  normalize(a) === normalize(b);
+
+/** Case-insensitive lookup of a category by name. */
+export const findCategoryByName = <T extends { name: string }>(
+  categories: T[],
+  name: string
+): T | undefined => {
+  const target = normalize(name);
+  return categories.find((cat) => normalize(cat.name) === target);
+};
+
+/**
+ * Returns the subset of the provided names that collide with a reserved
+ * category name. Originals (with their casing) are preserved in the output;
+ * duplicates are de-duplicated.
+ */
+export const findReservedNames = (names: string[]): string[] => {
+  const seen = new Set<string>();
+  const result: string[] = [];
+  for (const name of names) {
+    const trimmed = (name || '').trim();
+    if (!trimmed) continue;
+    if (!isReservedCategoryName(trimmed)) continue;
+    const key = trimmed.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    result.push(trimmed);
+  }
+  return result;
+};
+
+/**
+ * Form fields whose entries become router category names. Kept in one place so
+ * the reserved-name validator can be applied uniformly across node types.
+ *
+ *  - categories[].name   (split_by_random)
+ *  - groups[].name       (split_by_groups — the group name becomes the
+ *                         category name, so a group literally named "Other"
+ *                         must be rejected)
+ *  - rules[].category    (split_by_expression, wait_for_response)
+ */
+const CATEGORY_FIELD_SHAPES: Array<{
+  fieldName: string;
+  getName: (item: any) => unknown;
+}> = [
+  { fieldName: 'categories', getName: (item) => item?.name },
+  { fieldName: 'groups', getName: (item) => item?.name },
+  { fieldName: 'rules', getName: (item) => item?.category }
+];
+
+/**
+ * Scans form data for user-authored category names that collide with reserved
+ * system names, returning an `errors` map keyed by form field name. Checks all
+ * known category-bearing field shapes so callers don't have to know which one
+ * a given node uses.
+ */
+export const collectReservedCategoryErrors = (formData: {
+  [key: string]: any;
+}): { [fieldName: string]: string } => {
+  const errors: { [fieldName: string]: string } = {};
+
+  for (const { fieldName, getName } of CATEGORY_FIELD_SHAPES) {
+    const value = formData[fieldName];
+    if (!Array.isArray(value)) continue;
+
+    const names = value
+      .map((item) => getName(item))
+      .filter((name): name is string => typeof name === 'string');
+
+    const reservedUsed = findReservedNames(names);
+    if (reservedUsed.length > 0) {
+      errors[fieldName] =
+        `Reserved category names cannot be used: ${reservedUsed.join(', ')}`;
+    }
+  }
+
+  return errors;
+};

package/src/flow/nodes/shared-rules.ts

@@ -4,6 +4,7 @@ import {
   operatorsToSelectOptions
 } from '../operators';
 import { generateDefaultCategoryName } from '../../utils';
+import { isSystemCategory } from '../categoryUtils';
 import { FormData } from '../types';
 import { zustand } from '../../store/AppState';
 
@@ -301,15 +302,6 @@ export const casesToFormRules = (node: any) => {
   return rules;
 };
 
-/**
- * Helper to check if a category is a system category
- */
-function isSystemCategory(categoryName: string): boolean {
-  return ['No Response', 'Other', 'All Responses', 'Timeout'].includes(
-    categoryName
-  );
-}
-
 /**
  * Creates a complete rules array configuration for forms.
  * This is the shared configuration used by both wait_for_response and split_by_expression.
@@ -340,13 +332,11 @@ export const createRulesArrayConfig = (
 
     // Default to the last rule's non-location operator that has at least one operand,
     // falling back to the first non-location operator option
-    const lastWithOperand = [...items]
-      .reverse()
-      .find((item) => {
-        const opValue = getOperatorValue(item.operator);
-        const config = opValue ? getOperatorConfig(opValue) : undefined;
-        return config && config.operands >= 1 && config.filter !== 'locations';
-      });
+    const lastWithOperand = [...items].reverse().find((item) => {
+      const opValue = getOperatorValue(item.operator);
+      const config = opValue ? getOperatorConfig(opValue) : undefined;
+      return config && config.operands >= 1 && config.filter !== 'locations';
+    });
 
     const nonLocationOptions = currentOptions.filter((o: any) => {
       const config = getOperatorConfig(o.value);

package/src/flow/nodes/shared.ts

@@ -4,8 +4,10 @@ import {
   AccordionLayoutConfig,
   CheckboxFieldConfig
 } from '../types';
-import { Node } from '../../store/flow-definition';
+import { Node, Category, Exit, Case } from '../../store/flow-definition';
 import { getOperatorConfig } from '../operators';
+import { generateUUID } from '../../utils';
+import { categoryNamesEqual, findCategoryByName } from '../categoryUtils';
 
 /**
  * Shared result_name field configuration for router nodes.
@@ -124,10 +126,9 @@ export function categoriesToLocalizationFormData(
     rulesData[c.uuid] = {
       operatorName,
       originalArguments: [...c.arguments],
-      localizedArguments:
-        caseLocalization?.arguments
-          ? [...caseLocalization.arguments]
-          : c.arguments.map(() => '')
+      localizedArguments: caseLocalization?.arguments
+        ? [...caseLocalization.arguments]
+        : c.arguments.map(() => '')
     };
   });
 
@@ -173,7 +174,8 @@ export function localizationFormDataToCategories(
 
       // Save if any argument differs from original and is non-empty
       const hasLocalization = localized.some(
-        (arg: string, i: number) => arg?.trim() && arg.trim() !== (original[i] || '')
+        (arg: string, i: number) =>
+          arg?.trim() && arg.trim() !== (original[i] || '')
       );
 
       if (hasLocalization) {
@@ -186,3 +188,108 @@ export function localizationFormDataToCategories(
 
   return localizationData;
 }
+
+/**
+ * Describes a category to build for a router node. When `case` is provided,
+ * a matching switch-router case is also built and linked to the category.
+ */
+export interface CategoryEntry {
+  name: string;
+  case?: {
+    type: string;
+    arguments: string[];
+  };
+}
+
+/**
+ * Builds categories, exits, and (optionally) cases for a router node,
+ * preserving UUIDs and exit destinations from existing data when possible.
+ * Categories/exits are matched by category name; cases by their first argument.
+ */
+export function buildCategoriesExitsCases(
+  entries: CategoryEntry[],
+  existingCategories: Category[],
+  existingExits: Exit[],
+  existingCases: Case[] = []
+): { categories: Category[]; exits: Exit[]; cases: Case[] } {
+  const categories: Category[] = [];
+  const exits: Exit[] = [];
+  const cases: Case[] = [];
+
+  entries.forEach((entry) => {
+    const existingCategory = findCategoryByName(existingCategories, entry.name);
+    const existingExit = existingCategory
+      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+      : null;
+
+    const exitUuid = existingExit?.uuid || generateUUID();
+    const categoryUuid = existingCategory?.uuid || generateUUID();
+
+    categories.push({
+      uuid: categoryUuid,
+      name: entry.name,
+      exit_uuid: exitUuid
+    });
+
+    exits.push({
+      uuid: exitUuid,
+      destination_uuid: existingExit?.destination_uuid || null
+    });
+
+    if (entry.case) {
+      const matchArg = entry.case.arguments[0];
+      const existingCase = existingCases.find(
+        (c) => c.arguments?.[0] === matchArg
+      );
+      cases.push({
+        uuid: existingCase?.uuid || generateUUID(),
+        type: entry.case.type,
+        arguments: entry.case.arguments,
+        category_uuid: categoryUuid
+      });
+    }
+  });
+
+  return { categories, exits, cases };
+}
+
+/**
+ * Appends a default "Other" category and its exit to the given arrays,
+ * preserving the UUID/destination of an existing "Other" unless the user
+ * selected an item also named "Other" (in which case the existing one was
+ * already consumed by buildCategoriesExitsCases). Returns the Other category
+ * UUID for use as `default_category_uuid`.
+ */
+export function appendOtherCategory(
+  categories: Category[],
+  exits: Exit[],
+  existingCategories: Category[],
+  existingExits: Exit[],
+  userItemNames: string[]
+): string {
+  const userHasOther = userItemNames.some((name) =>
+    categoryNamesEqual(name, 'Other')
+  );
+  const existingOther = userHasOther
+    ? null
+    : findCategoryByName(existingCategories, 'Other');
+  const existingOtherExit = existingOther
+    ? existingExits.find((exit) => exit.uuid === existingOther.exit_uuid)
+    : null;
+
+  const otherExitUuid = existingOtherExit?.uuid || generateUUID();
+  const otherCategoryUuid = existingOther?.uuid || generateUUID();
+
+  categories.push({
+    uuid: otherCategoryUuid,
+    name: 'Other',
+    exit_uuid: otherExitUuid
+  });
+
+  exits.push({
+    uuid: otherExitUuid,
+    destination_uuid: existingOtherExit?.destination_uuid || null
+  });
+
+  return otherCategoryUuid;
+}

package/src/flow/nodes/split_by_airtime.ts

@@ -7,13 +7,10 @@ import {
 } from '../types';
 import { TransferAirtime, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { validateWith } from '../utils';
 import { html } from 'lit';
 import { CURRENCY_OPTIONS, CURRENCIES } from '../currencies';
-import {
-  resultNameField,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
-} from './shared';
+import { resultNameField } from './shared';
 
 export const split_by_airtime: NodeConfig = {
   type: 'split_by_airtime',
@@ -55,68 +52,51 @@ export const split_by_airtime: NodeConfig = {
     result_name: resultNameField
   },
   layout: ['amounts', 'result_name'],
-  validate: (formData: FormData) => {
-    const errors: { [key: string]: string } = {};
-
-    // Validate that we have at least one amount
-    if (formData.amounts && Array.isArray(formData.amounts)) {
-      const validAmounts = formData.amounts.filter(
-        (item: any) =>
-          item?.currency && item?.amount && item.amount.trim() !== ''
-      );
-
-      if (validAmounts.length === 0) {
-        errors.amounts = 'At least one currency and amount is required';
-        return {
-          valid: false,
-          errors
-        };
-      }
-
-      // Check for duplicate currencies
-      const currencies = new Set();
-      const duplicates: string[] = [];
+  validate: validateWith((formData, errors) => {
+    if (!formData.amounts || !Array.isArray(formData.amounts)) {
+      errors.amounts = 'At least one currency and amount is required';
+      return;
+    }
 
-      validAmounts.forEach((item: any) => {
-        // Extract currency code from selection
-        const currencyCode =
-          Array.isArray(item.currency) && item.currency.length > 0
-            ? item.currency[0].value
-            : typeof item.currency === 'string'
-              ? item.currency
-              : item.currency?.value;
+    const validAmounts = formData.amounts.filter(
+      (item: any) => item?.currency && item?.amount && item.amount.trim() !== ''
+    );
 
-        if (currencies.has(currencyCode)) {
-          duplicates.push(currencyCode);
-        } else {
-          currencies.add(currencyCode);
-        }
-      });
+    if (validAmounts.length === 0) {
+      errors.amounts = 'At least one currency and amount is required';
+      return;
+    }
 
-      if (duplicates.length > 0) {
-        errors.amounts = `Duplicate currencies found: ${duplicates.join(', ')}`;
+    const currencies = new Set();
+    const duplicates: string[] = [];
+
+    validAmounts.forEach((item: any) => {
+      const currencyCode =
+        Array.isArray(item.currency) && item.currency.length > 0
+          ? item.currency[0].value
+          : typeof item.currency === 'string'
+            ? item.currency
+            : item.currency?.value;
+
+      if (currencies.has(currencyCode)) {
+        duplicates.push(currencyCode);
+      } else {
+        currencies.add(currencyCode);
       }
+    });
 
-      // Validate amounts are numeric
-      for (const item of validAmounts) {
-        const amount = item.amount.trim();
-        if (isNaN(Number(amount)) || Number(amount) <= 0) {
-          errors.amounts = 'All amounts must be valid positive numbers';
-          return {
-            valid: false,
-            errors
-          };
-        }
-      }
-    } else {
-      errors.amounts = 'At least one currency and amount is required';
+    if (duplicates.length > 0) {
+      errors.amounts = `Duplicate currencies found: ${duplicates.join(', ')}`;
     }
 
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  },
+    for (const item of validAmounts) {
+      const amount = item.amount.trim();
+      if (isNaN(Number(amount)) || Number(amount) <= 0) {
+        errors.amounts = 'All amounts must be valid positive numbers';
+        return;
+      }
+    }
+  }),
   render: (node: Node) => {
     const transferAirtimeAction = node.actions?.find(
       (action) => action.type === 'transfer_airtime'
@@ -254,7 +234,5 @@ export const split_by_airtime: NodeConfig = {
 
   // Localization support for categories
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };