@nyaruka/temba-components 0.156.8 → 0.156.10

package/src/flow/nodes/split_by_run_result.ts

@@ -10,9 +10,7 @@ import {
   resultNameField,
   localizeRulesField,
   localizeCategoriesField,
-  nodeOptionsAccordion,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
+  nodeOptionsAccordion
 } from './shared';
 import {
   createRulesArrayConfig,
@@ -20,6 +18,7 @@ import {
   casesToFormRules
 } from './shared-rules';
 import { getStore } from '../../store/Store';
+import { validateWith } from '../utils';
 
 // delimit index options (first through 20th)
 const DELIMIT_INDEX_OPTIONS = [
@@ -125,19 +124,11 @@ export const split_by_run_result: NodeConfig = {
     'rules',
     nodeOptionsAccordion
   ],
-  validate: (formData: FormData) => {
-    const errors: { [key: string]: string } = {};
-
-    // Validate result is provided
+  validate: validateWith((formData, errors) => {
     if (!formData.result || formData.result.length === 0) {
       errors.result = 'A flow result is required';
     }
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  },
+  }),
   toFormData: (node: Node, nodeUI?: any) => {
     // Get the result from the UI config operand (source of truth)
     // Normalize: toUIConfig saves { id, name, type } but the Select component
@@ -274,12 +265,12 @@ export const split_by_run_result: NodeConfig = {
       : 'split_by_run_result';
 
     config.localizeRules = !!formData.localizeRules;
-    config.localizeCategories = formData.result_name ? !!formData.localizeCategories : false;
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
     return config;
   },
 
   // Localization support for categories
-  localizable: 'categories',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  localizable: 'categories'
 };

package/src/flow/nodes/split_by_scheme.ts

@@ -1,15 +1,13 @@
 import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
-import { Node, Category, Exit, Case } from '../../store/flow-definition.d';
-import { generateUUID } from '../../utils';
-import { SCHEMES } from '../utils';
+import { Node, Case } from '../../store/flow-definition.d';
+import { SCHEMES, validateWith } from '../utils';
 import {
   resultNameField,
   nodeOptionsAccordionSimple,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
+  buildCategoriesExitsCases,
+  appendOtherCategory
 } from './shared';
 
-// Helper function to get scheme options for the select dropdown
 const getSchemeOptions = () => {
   return SCHEMES.map((scheme) => ({
     value: scheme.scheme,
@@ -17,95 +15,8 @@ const getSchemeOptions = () => {
   }));
 };
 
-// Helper function to create a switch router with scheme cases
-const createSchemeRouter = (
-  selectedSchemes: string[],
-  existingCategories: Category[] = [],
-  existingExits: Exit[] = [],
-  existingCases: Case[] = [],
-  resultName: string = ''
-) => {
-  const categories: Category[] = [];
-  const exits: Exit[] = [];
-  const cases: Case[] = [];
-
-  // Create categories, exits, and cases for each selected scheme
-  selectedSchemes.forEach((scheme) => {
-    const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
-    const schemeName = schemeObj?.name || scheme;
-
-    // Try to find existing category by scheme name
-    const existingCategory = existingCategories.find(
-      (cat) => cat.name === schemeName
-    );
-    const existingExit = existingCategory
-      ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
-      : null;
-    const existingCase = existingCases.find((c) => c.arguments?.[0] === scheme);
-
-    const exitUuid = existingExit?.uuid || generateUUID();
-    const categoryUuid = existingCategory?.uuid || generateUUID();
-    const caseUuid = existingCase?.uuid || generateUUID();
-
-    categories.push({
-      uuid: categoryUuid,
-      name: schemeName,
-      exit_uuid: exitUuid
-    });
-
-    exits.push({
-      uuid: exitUuid,
-      destination_uuid: existingExit?.destination_uuid || null
-    });
-
-    cases.push({
-      uuid: caseUuid,
-      type: 'has_only_phrase',
-      arguments: [scheme],
-      category_uuid: categoryUuid
-    });
-  });
-
-  // Add default "Other" category for schemes not in the selected list
-  const existingOtherCategory = existingCategories.find((cat) => {
-    const matchesSelected = selectedSchemes.some((scheme) => {
-      const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
-      return schemeObj?.name === cat.name;
-    });
-    return cat.name === 'Other' && !matchesSelected;
-  });
-  const existingOtherExit = existingOtherCategory
-    ? existingExits.find(
-        (exit) => exit.uuid === existingOtherCategory.exit_uuid
-      )
-    : null;
-
-  const otherExitUuid = existingOtherExit?.uuid || generateUUID();
-  const otherCategoryUuid = existingOtherCategory?.uuid || generateUUID();
-
-  categories.push({
-    uuid: otherCategoryUuid,
-    name: 'Other',
-    exit_uuid: otherExitUuid
-  });
-
-  exits.push({
-    uuid: otherExitUuid,
-    destination_uuid: existingOtherExit?.destination_uuid || null
-  });
-
-  return {
-    router: {
-      type: 'switch' as const,
-      cases: cases,
-      categories: categories,
-      default_category_uuid: otherCategoryUuid,
-      operand: '@(urn_parts(contact.urn).scheme)',
-      result_name: resultName
-    },
-    exits: exits
-  };
-};
+const getSchemeName = (scheme: string) =>
+  SCHEMES.find((s) => s.scheme === scheme)?.name || scheme;
 
 export const split_by_scheme: NodeConfig = {
   type: 'split_by_scheme',
@@ -127,9 +38,7 @@ export const split_by_scheme: NodeConfig = {
     result_name: resultNameField
   },
   layout: ['schemes', nodeOptionsAccordionSimple],
-  validate: (formData: FormData) => {
-    const errors: { [key: string]: string } = {};
-
+  validate: validateWith((formData, errors) => {
     if (
       !formData.schemes ||
       !Array.isArray(formData.schemes) ||
@@ -137,14 +46,8 @@ export const split_by_scheme: NodeConfig = {
     ) {
       errors.schemes = 'At least one channel type is required';
     }
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  },
+  }),
   toFormData: (node: Node) => {
-    // Extract schemes from the existing node structure
     const schemes: string[] = [];
 
     if (node.router?.cases) {
@@ -157,43 +60,57 @@ export const split_by_scheme: NodeConfig = {
 
     return {
       uuid: node.uuid,
-      schemes: schemes.map((scheme) => {
-        const schemeObj = SCHEMES.find((s) => s.scheme === scheme);
-        return {
-          value: scheme,
-          name: schemeObj?.name || scheme
-        };
-      }),
+      schemes: schemes.map((scheme) => ({
+        value: scheme,
+        name: getSchemeName(scheme)
+      })),
       result_name: node.router?.result_name || ''
     };
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
-    // Get selected schemes (handle both array of objects and array of strings)
     const selectedSchemes = (formData.schemes || [])
       .filter((scheme: any) => scheme)
       .map((scheme: any) =>
         typeof scheme === 'string' ? scheme : scheme.value
       );
 
-    // Create router and exits using existing data when possible
     const existingCategories = originalNode.router?.categories || [];
     const existingExits = originalNode.exits || [];
     const existingCases = originalNode.router?.cases || [];
 
-    const { router, exits } = createSchemeRouter(
-      selectedSchemes,
+    const { categories, exits, cases } = buildCategoriesExitsCases(
+      selectedSchemes.map((scheme) => ({
+        name: getSchemeName(scheme),
+        case: {
+          type: 'has_only_phrase',
+          arguments: [scheme]
+        }
+      })),
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    const defaultCategoryUuid = appendOtherCategory(
+      categories,
+      exits,
       existingCategories,
       existingExits,
-      existingCases,
-      formData.result_name || ''
+      selectedSchemes.map(getSchemeName)
     );
 
-    // Return the complete node
     return {
       uuid: originalNode.uuid,
       actions: originalNode.actions || [],
-      router: router,
-      exits: exits
+      router: {
+        type: 'switch',
+        cases,
+        categories,
+        default_category_uuid: defaultCategoryUuid,
+        operand: '@(urn_parts(contact.urn).scheme)',
+        result_name: formData.result_name || ''
+      },
+      exits
     };
   },
   router: {
@@ -202,7 +119,5 @@ export const split_by_scheme: NodeConfig = {
   },
 
   // Localization support for categories
-  localizable: 'categories',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  localizable: 'categories'
 };

package/src/flow/nodes/split_by_subflow.ts

@@ -4,10 +4,6 @@ import { generateUUID } from '../../utils';
 import { html } from 'lit';
 import { renderFlowLinks } from '../utils';
 import { shouldExcludeFlow } from '../flow-utils';
-import {
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
-} from './shared';
 
 export const split_by_subflow: NodeConfig = {
   type: 'split_by_subflow',
@@ -293,7 +289,5 @@ export const split_by_subflow: NodeConfig = {
 
   // Localization support for categories
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };

package/src/flow/nodes/split_by_ticket.ts

@@ -2,10 +2,6 @@ import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, OpenTicket } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
-import {
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
-} from './shared';
 
 export const split_by_ticket: NodeConfig = {
   type: 'split_by_ticket',
@@ -147,7 +143,5 @@ export const split_by_ticket: NodeConfig = {
 
   // Localization support for categories
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };

package/src/flow/nodes/split_by_webhook.ts

@@ -2,11 +2,7 @@ import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { CallWebhook, Node } from '../../store/flow-definition';
 import { generateUUID, createSuccessFailureRouter } from '../../utils';
 import { html } from 'lit';
-import {
-  resultNameField,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
-} from './shared';
+import { resultNameField } from './shared';
 import { renderClamped, renderHighlightedText } from '../utils';
 
 // Default headers as {key, value} arrays (format used by key-value editor)
@@ -267,7 +263,5 @@ export const split_by_webhook: NodeConfig = {
 
   // Localization support for categories
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };

package/src/flow/nodes/wait_for_audio.ts

@@ -1,10 +1,6 @@
 import { SPLIT_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node, Category, Exit } from '../../store/flow-definition';
 import { generateUUID } from '../../utils';
-import {
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
-} from './shared';
 
 export const wait_for_audio: NodeConfig = {
   type: 'wait_for_audio',
@@ -84,7 +80,5 @@ export const wait_for_audio: NodeConfig = {
     };
   },
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };

package/src/flow/nodes/wait_for_dial.ts

@@ -1,11 +1,7 @@
 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';
+import { resultNameField } from './shared';
 
 const DIAL_CATEGORIES = ['Answered', 'No Answer', 'Busy', 'Failed'];
 const DIAL_CASES = [
@@ -171,7 +167,5 @@ export const wait_for_dial: NodeConfig = {
     };
   },
   localizable: 'categories',
-  nonTranslatableCategories: 'all',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: 'all'
 };

package/src/flow/nodes/wait_for_digits.ts

@@ -10,9 +10,7 @@ import {
   resultNameField,
   localizeRulesField,
   localizeCategoriesField,
-  nodeOptionsAccordion,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
+  nodeOptionsAccordion
 } from './shared';
 import {
   createRulesArrayConfig,
@@ -62,7 +60,9 @@ export const wait_for_digits: NodeConfig = {
   toUIConfig: (formData: FormData) => {
     const config: Record<string, any> = {};
     config.localizeRules = !!formData.localizeRules;
-    config.localizeCategories = formData.result_name ? !!formData.localizeCategories : false;
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
     return config;
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
@@ -100,7 +100,5 @@ export const wait_for_digits: NodeConfig = {
       exits
     };
   },
-  localizable: 'categories',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  localizable: 'categories'
 };

package/src/flow/nodes/wait_for_menu.ts

@@ -5,9 +5,7 @@ import {
   resultNameField,
   localizeRulesField,
   localizeCategoriesField,
-  nodeOptionsAccordion,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
+  nodeOptionsAccordion
 } from './shared';
 
 // Menu digits in display order: 1-9 then 0
@@ -105,7 +103,9 @@ export const wait_for_menu: NodeConfig = {
   toUIConfig: (formData: FormData) => {
     const config: Record<string, any> = {};
     config.localizeRules = !!formData.localizeRules;
-    config.localizeCategories = formData.result_name ? !!formData.localizeCategories : false;
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
     return config;
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
@@ -221,7 +221,5 @@ export const wait_for_menu: NodeConfig = {
       exits
     };
   },
-  localizable: 'categories',
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  localizable: 'categories'
 };

package/src/flow/nodes/wait_for_response.ts

@@ -10,15 +10,14 @@ import {
   resultNameField,
   localizeRulesField,
   localizeCategoriesField,
-  nodeOptionsAccordion,
-  categoriesToLocalizationFormData,
-  localizationFormDataToCategories
+  nodeOptionsAccordion
 } from './shared';
 import {
   createRulesArrayConfig,
   extractUserRules,
   casesToFormRules
 } from './shared-rules';
+import { validateWith } from '../utils';
 
 const TIMEOUT_OPTIONS = [
   { value: '60', name: '1 minute' },
@@ -127,17 +126,10 @@ export const wait_for_response: NodeConfig = {
       gap: '0.5rem'
     }
   ],
-  validate: (_formData: FormData) => {
-    const errors: { [key: string]: string } = {};
-
-    // No validation needed - allow multiple rules to use same category name
-    // Rules with the same category name will be merged to use the same exit
-
-    return {
-      valid: Object.keys(errors).length === 0,
-      errors
-    };
-  },
+  validate: validateWith(() => {
+    // No validation needed - allow multiple rules to use same category name.
+    // Rules with the same category name will be merged to use the same exit.
+  }),
   toFormData: (node: Node, nodeUI?: any) => {
     // Extract rules from router cases using shared function
     const rules = casesToFormRules(node);
@@ -165,7 +157,9 @@ export const wait_for_response: NodeConfig = {
   toUIConfig: (formData: FormData) => {
     const config: Record<string, any> = {};
     config.localizeRules = !!formData.localizeRules;
-    config.localizeCategories = formData.result_name ? !!formData.localizeCategories : false;
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
     return config;
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
@@ -413,7 +407,5 @@ export const wait_for_response: NodeConfig = {
 
   // Localization support for categories
   localizable: 'categories',
-  nonTranslatableCategories: ['Timeout'],
-  toLocalizationFormData: categoriesToLocalizationFormData,
-  fromLocalizationFormData: localizationFormDataToCategories
+  nonTranslatableCategories: ['Timeout']
 };

package/src/flow/types.ts

@@ -17,6 +17,33 @@ export const FlowTypes = {
 
 export type FlowType = (typeof FlowTypes)[keyof typeof FlowTypes];
 
+/**
+ * Shortcut entry shown in the canvas context menu. The `type` is the
+ * action or node type to open the editor with when selected.
+ */
+export interface ContextMenuShortcut {
+  type: string;
+  name: string;
+  icon: string;
+}
+
+/**
+ * Per-flow-type context menu shortcuts.
+ */
+export const CONTEXT_MENU_SHORTCUTS: Record<FlowType, ContextMenuShortcut[]> = {
+  [FlowTypes.MESSAGE]: [
+    { type: 'send_msg', name: 'Send Message', icon: 'send' },
+    { type: 'wait_for_response', name: 'Wait for Response', icon: 'message' }
+  ],
+  [FlowTypes.VOICE]: [
+    { type: 'say_msg', name: 'Say Message', icon: 'send' },
+    { type: 'wait_for_menu', name: 'Wait for Menu', icon: 'dots-grid' }
+  ],
+  [FlowTypes.BACKGROUND]: [
+    { type: 'set_contact_field', name: 'Update Contact', icon: 'contact' }
+  ]
+};
+
 /**
  * Features - defines the features available in the account
  */

package/src/flow/utils.ts

@@ -1,17 +1,125 @@
 import { html, TemplateResult } from 'lit-html';
 import { Action, NamedObject, FlowPosition } from '../store/flow-definition';
-import { FlowIssue } from '../store/AppState';
+import { FlowIssue, zustand } from '../store/AppState';
 import { CustomEventType } from '../interfaces';
 import { tokenize, TokenType } from '../excellent/tokenizer';
 import { TOKEN_COLORS } from '../excellent/token-styles';
 import { messageParser, sessionParser } from '../excellent/helpers';
+import { FormData, ValidationResult, NodeConfig, ActionConfig } from './types';
+import {
+  categoriesToLocalizationFormData,
+  localizationFormDataToCategories
+} from './nodes/shared';
 
-const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
+/**
+ * Wraps a validation check into the standard `validate` signature. The check
+ * populates an `errors` object; the wrapper computes `valid` and returns the
+ * ValidationResult. Eliminates the `const errors = {}; ...; return {valid, errors}`
+ * boilerplate that appears in every node and action config.
+ */
+export function validateWith(
+  check: (formData: FormData, errors: { [key: string]: string }) => void
+): (formData: FormData) => ValidationResult {
+  return (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+    check(formData, errors);
+    return { valid: Object.keys(errors).length === 0, errors };
+  };
+}
+
+function makeTextToLocalizationFormData(fields: readonly string[]) {
+  return (
+    action: { uuid: string },
+    localization: Record<string, any>
+  ): FormData => {
+    const formData: FormData = { uuid: action.uuid };
+    fields.forEach((field) => {
+      const value = localization[field];
+      formData[field] = Array.isArray(value) ? value[0] || '' : '';
+    });
+    return formData;
+  };
+}
+
+function makeTextFromLocalizationFormData(fields: readonly string[]) {
+  return (
+    formData: FormData,
+    action: Record<string, any>
+  ): Record<string, any> => {
+    const localization: Record<string, any> = {};
+    fields.forEach((field) => {
+      const value = formData[field];
+      if (value && value.trim() !== '' && value !== action[field]) {
+        localization[field] = [value];
+      }
+    });
+    return localization;
+  };
+}
+
+type ToLocalizationFn = (
+  nodeOrAction: any,
+  localization: Record<string, any>
+) => FormData;
+
+type FromLocalizationFn = (
+  formData: FormData,
+  nodeOrAction: any
+) => Record<string, any>;
+
+/**
+ * Returns the `toLocalizationFormData` impl for a node or action config. Uses
+ * the explicit impl if the config provides one; otherwise infers from the
+ * `localizable` shape: `'categories'` → category helper, `string[]` → text
+ * factory. Returns undefined if the config isn't localizable.
+ */
+export function resolveToLocalizationFormData(
+  config: NodeConfig | ActionConfig
+): ToLocalizationFn | undefined {
+  if (config.toLocalizationFormData) {
+    return config.toLocalizationFormData as ToLocalizationFn;
+  }
+  if (config.localizable === 'categories') {
+    return categoriesToLocalizationFormData;
+  }
+  if (Array.isArray(config.localizable)) {
+    return makeTextToLocalizationFormData(config.localizable);
+  }
+  return undefined;
+}
+
+/**
+ * Mirror of resolveToLocalizationFormData for `fromLocalizationFormData`.
+ */
+export function resolveFromLocalizationFormData(
+  config: NodeConfig | ActionConfig
+): FromLocalizationFn | undefined {
+  if (config.fromLocalizationFormData) {
+    return config.fromLocalizationFormData as FromLocalizationFn;
+  }
+  if (config.localizable === 'categories') {
+    return localizationFormDataToCategories;
+  }
+  if (Array.isArray(config.localizable)) {
+    return makeTextFromLocalizationFormData(config.localizable);
+  }
+  return undefined;
+}
+
+const intlLanguageNames = new Intl.DisplayNames(['en'], { type: 'language' });
 
 export function getLanguageDisplayName(code: string): string {
   if (code === 'und') return 'Unknown';
+
+  // Prefer names from the RapidPro languages endpoint, which supplies
+  // ISO 639-3 codes (e.g. prd, pst) that Intl.DisplayNames doesn't cover.
+  const storeName = zustand.getState().languageNames?.[code];
+  if (storeName) {
+    return storeName;
+  }
+
   try {
-    return languageNames.of(code) || code;
+    return intlLanguageNames.of(code) || code;
   } catch {
     return code;
   }