@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/locales/locale-codes.ts

@@ -10,18 +10,9 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [
-  `es`,
-  `fr`,
-  `pt`,
-] as const;
+export const targetLocales = [`es`, `fr`, `pt`] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [
-  `en`,
-  `es`,
-  `fr`,
-  `pt`,
-] as const;
+export const allLocales = [`en`, `es`, `fr`, `pt`] as const;

package/src/locales/pt.ts

@@ -1,18 +1,13 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's73b4d70c02f4b4e0': `No options`,
-'scf1453991c986b25': `Tab to complete, enter to select`,
-'s8f02e3a18ffc083a': `Are not currently in a flow`,
-'s638236250662c6b3': `Have sent a message in the last`,
-'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
-    };
-  
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  s73b4d70c02f4b4e0: `No options`,
+  scf1453991c986b25: `Tab to complete, enter to select`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s638236250662c6b3: `Have sent a message in the last`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+};

package/src/simulator/Simulator.ts

@@ -148,6 +148,10 @@ const SIMULATOR_SIZES: Record<string, SimulatorSize> = {
 export class Simulator extends RapidElement {
   static get styles() {
     return css`
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       :host {
         /* size-specific dimensions are set dynamically via inline styles */
         --phone-width: 300px;
@@ -1117,8 +1121,12 @@ export class Simulator extends RapidElement {
           continue;
         }
 
-        // skip msg_created events without a proper msg property
-        if (rawEvent.type === 'msg_created' && !(rawEvent as any).msg) {
+        // skip msg_created/ivr_created events without a proper msg property
+        if (
+          (rawEvent.type === 'msg_created' ||
+            rawEvent.type === 'ivr_created') &&
+          !(rawEvent as any).msg
+        ) {
           continue;
         }
 
@@ -1140,7 +1148,8 @@ export class Simulator extends RapidElement {
           this.currentQuickReplies = (event as any).msg.quick_replies;
         }
 
-        const isMessage = event.type === 'msg_created';
+        const isMessage =
+          event.type === 'msg_created' || event.type === 'ivr_created';
         const msg = (event as any).msg;
 
         // Check if the event should be displayed.
@@ -1934,6 +1943,7 @@ export class Simulator extends RapidElement {
         icon="simulator"
         label="Phone Simulator"
         color="#10b981"
+        order="4"
         .hidden=${this.isVisible}
         @temba-button-clicked=${this.handleShow}
       ></temba-floating-tab>

package/src/store/AppState.ts

@@ -18,6 +18,59 @@ import { produce } from 'immer';
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+/**
+ * Temporary: Reclassify nodes based on whether they contain terminal actions.
+ * - execute_actions nodes with a terminal action become "terminal"
+ * - terminal nodes that no longer have a terminal action become "execute_actions"
+ * This can be removed once we stop supporting terminal nodes.
+ */
+function reclassifyTerminalNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI) continue;
+
+    const hasTerminalAction = node.actions?.some(
+      (action) => (action as any).terminal === true
+    );
+
+    if (nodeUI.type === 'execute_actions' && hasTerminalAction) {
+      nodeUI.type = 'terminal' as any;
+    } else if (nodeUI.type === ('terminal' as any) && !hasTerminalAction) {
+      nodeUI.type = 'execute_actions';
+    }
+  }
+}
+
+/**
+ * Reclassify wait_for_response nodes that are actually voice-specific wait types.
+ * The server stores all voice waits as wait_for_response, but we detect the specific
+ * type from the router's wait hint:
+ * - hint.type === 'digits' && hint.count === 1 → wait_for_menu
+ * - hint.type === 'digits' (no count) → wait_for_digits
+ * - hint.type === 'audio' → wait_for_audio
+ */
+function reclassifyVoiceWaitNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI || nodeUI.type !== 'wait_for_response') continue;
+
+    const hint = node.router?.wait?.hint;
+    if (!hint) continue;
+
+    if (hint.type === 'digits' && hint.count === 1) {
+      nodeUI.type = 'wait_for_menu' as any;
+    } else if (hint.type === 'digits') {
+      nodeUI.type = 'wait_for_digits' as any;
+    } else if (hint.type === 'audio') {
+      nodeUI.type = 'wait_for_audio' as any;
+    }
+  }
+}
+
 /**
  * Sorts nodes by their position - first by y (top), then by x (left)
  */
@@ -65,11 +118,44 @@ export interface Language {
   name: string;
 }
 
+export interface FlowIssue {
+  type: string;
+  node_uuid: string;
+  action_uuid?: string;
+  description: string;
+  dependency?: {
+    key: string;
+    name: string;
+    type: string;
+  };
+}
+
 export interface FlowInfo {
   results: InfoResult[];
   dependencies: TypedObjectRef[];
   counts: { nodes: number; languages: number };
   locals: string[];
+  issues?: FlowIssue[];
+}
+
+function buildIssueMaps(issues: FlowIssue[] = []): {
+  byNode: Map<string, FlowIssue[]>;
+  byAction: Map<string, FlowIssue[]>;
+} {
+  const byNode = new Map<string, FlowIssue[]>();
+  const byAction = new Map<string, FlowIssue[]>();
+  for (const issue of issues) {
+    if (issue.action_uuid) {
+      const actionList = byAction.get(issue.action_uuid) || [];
+      actionList.push(issue);
+      byAction.set(issue.action_uuid, actionList);
+    } else {
+      const nodeList = byNode.get(issue.node_uuid) || [];
+      nodeList.push(issue);
+      byNode.set(issue.node_uuid, nodeList);
+    }
+  }
+  return { byNode, byAction };
 }
 
 export interface FlowContents {
@@ -100,6 +186,8 @@ export interface Activity {
 export interface AppState {
   flowDefinition: FlowDefinition;
   flowInfo: FlowInfo;
+  issuesByNode: Map<string, FlowIssue[]>;
+  issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
   languageNames: { [code: string]: Language };
@@ -174,6 +262,8 @@ export const zustand = createStore<AppState>()(
       workspace: null,
       flowDefinition: null,
       flowInfo: null,
+      issuesByNode: new Map(),
+      issuesByAction: new Map(),
       isTranslating: false,
       viewingRevision: false,
       dirtyDate: null,
@@ -201,10 +291,15 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
+        reclassifyTerminalNodes(data.definition);
+        reclassifyVoiceWaitNodes(data.definition);
+        const issueMaps = buildIssueMaps(data.info?.issues);
         set({
           flowInfo: data.info,
           flowDefinition: data.definition,
-          viewingRevision
+          viewingRevision,
+          issuesByNode: issueMaps.byNode,
+          issuesByAction: issueMaps.byAction
         });
       },
 
@@ -295,10 +390,16 @@ export const zustand = createStore<AppState>()(
             nodes: [...(flow.definition.nodes || [])]
           };
           state.flowInfo = flow.info;
+          const issueMaps = buildIssueMaps(flow.info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
           // Reset to the flow's default language when loading a new flow
           state.languageCode = flowLang;
           state.isTranslating = false;
 
+          reclassifyTerminalNodes(state.flowDefinition);
+          reclassifyVoiceWaitNodes(state.flowDefinition);
+
           // Sort nodes by position when loading flow
           if (state.flowDefinition?.nodes && state.flowDefinition?._ui?.nodes) {
             sortNodesByPosition(
@@ -312,6 +413,9 @@ export const zustand = createStore<AppState>()(
       setFlowInfo: (info: FlowInfo) => {
         set((state: AppState) => {
           state.flowInfo = info;
+          const issueMaps = buildIssueMaps(info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
         });
       },
 

package/src/store/flow-definition.d.ts

@@ -28,6 +28,7 @@ export type ActionType =
   | 'send_email'
   | 'send_broadcast'
   | 'enter_flow'
+  | 'terminal'
   | 'start_session'
   | 'transfer_airtime'
   | 'split_by_airtime'
@@ -152,6 +153,7 @@ export interface SendBroadcast extends Action {
 
 export interface EnterFlow extends Action {
   flow: NamedObject;
+  terminal?: boolean;
 }
 
 export interface StartSession extends Action {

package/test/actions/play_audio.test.ts

@@ -0,0 +1,155 @@
+import { expect } from '@open-wc/testing';
+import { play_audio } from '../../src/flow/actions/play_audio';
+import { PlayAudio } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the play_audio action configuration.
+ */
+describe('play_audio action config', () => {
+  const helper = new ActionTest(play_audio, 'play_audio');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(play_audio.name).to.equal('Play Recording');
+    });
+
+    it('is voice-only', () => {
+      expect(play_audio.flowTypes).to.deep.equal(['voice']);
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-play-1',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      } as PlayAudio,
+      'expression-url'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-play-2',
+        type: 'play_audio',
+        audio_url: 'https://example.com/greeting.mp3'
+      } as PlayAudio,
+      'static-url'
+    );
+  });
+
+  describe('data transformation', () => {
+    it('converts action to form data', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = play_audio.toFormData!(action);
+      expect(formData.uuid).to.equal('test-action');
+      expect(formData.audio_url).to.equal('@results.voicemail');
+    });
+
+    it('handles missing audio_url', () => {
+      const action = {
+        uuid: 'test-action',
+        type: 'play_audio'
+      } as PlayAudio;
+
+      const formData = play_audio.toFormData!(action);
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to action', () => {
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail'
+      };
+
+      const action = play_audio.fromFormData!(formData) as PlayAudio;
+      expect(action.uuid).to.equal('test-action');
+      expect(action.type).to.equal('play_audio');
+      expect(action.audio_url).to.equal('@results.voicemail');
+    });
+
+    it('trims whitespace from audio_url', () => {
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '  @results.voicemail  '
+      };
+
+      const action = play_audio.fromFormData!(formData) as PlayAudio;
+      expect(action.audio_url).to.equal('@results.voicemail');
+    });
+  });
+
+  describe('localization', () => {
+    it('converts localization to form data', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const localization = {
+        audio_url: ['@results.voicemail_es']
+      };
+
+      const formData = play_audio.toLocalizationFormData!(action, localization);
+      expect(formData.audio_url).to.equal('@results.voicemail_es');
+    });
+
+    it('handles missing localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = play_audio.toLocalizationFormData!(action, {});
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail_es'
+      };
+
+      const localization = play_audio.fromLocalizationFormData!(
+        formData,
+        action
+      );
+      expect(localization.audio_url).to.deep.equal(['@results.voicemail_es']);
+    });
+
+    it('omits unchanged localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail' // same as original
+      };
+
+      const localization = play_audio.fromLocalizationFormData!(
+        formData,
+        action
+      );
+      expect(localization.audio_url).to.be.undefined;
+    });
+  });
+});

package/test/actions/say_msg.test.ts

@@ -0,0 +1,196 @@
+import { expect } from '@open-wc/testing';
+import { say_msg } from '../../src/flow/actions/say_msg';
+import { SayMsg } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the say_msg action configuration.
+ */
+describe('say_msg action config', () => {
+  const helper = new ActionTest(say_msg, 'say_msg');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(say_msg.name).to.equal('Say Message');
+    });
+
+    it('is voice-only', () => {
+      expect(say_msg.flowTypes).to.deep.equal(['voice']);
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-say-1',
+        type: 'say_msg',
+        text: 'Hello, welcome to our service.'
+      } as SayMsg,
+      'simple-text'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-say-2',
+        type: 'say_msg',
+        text: 'Press 1 for sales.\nPress 2 for support.\nPress 3 to leave a message.'
+      } as SayMsg,
+      'multiline-text'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-say-3',
+        type: 'say_msg',
+        text: 'Please listen to the following recording.',
+        audio_url: 'https://example.com/greeting.mp3'
+      } as SayMsg,
+      'text-with-audio-url'
+    );
+  });
+
+  describe('data transformation', () => {
+    it('converts action to form data', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello world',
+        audio_url: 'https://example.com/audio.mp3'
+      };
+
+      const formData = say_msg.toFormData!(action);
+      expect(formData.uuid).to.equal('test-action');
+      expect(formData.text).to.equal('Hello world');
+      expect(formData.audio_url).to.equal('https://example.com/audio.mp3');
+    });
+
+    it('handles missing audio_url in toFormData', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello'
+      } as SayMsg;
+
+      const formData = say_msg.toFormData!(action);
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to action', () => {
+      const formData = {
+        uuid: 'test-action',
+        text: 'Hello world',
+        audio_url: 'https://example.com/audio.mp3'
+      };
+
+      const action = say_msg.fromFormData!(formData) as SayMsg;
+      expect(action.uuid).to.equal('test-action');
+      expect(action.type).to.equal('say_msg');
+      expect(action.text).to.equal('Hello world');
+      expect(action.audio_url).to.equal('https://example.com/audio.mp3');
+    });
+
+    it('omits empty audio_url in fromFormData', () => {
+      const formData = {
+        uuid: 'test-action',
+        text: 'Hello world',
+        audio_url: ''
+      };
+
+      const action = say_msg.fromFormData!(formData) as SayMsg;
+      expect(action.audio_url).to.be.undefined;
+    });
+
+    it('trims whitespace from audio_url', () => {
+      const formData = {
+        uuid: 'test-action',
+        text: 'Hello',
+        audio_url: '  https://example.com/audio.mp3  '
+      };
+
+      const action = say_msg.fromFormData!(formData) as SayMsg;
+      expect(action.audio_url).to.equal('https://example.com/audio.mp3');
+    });
+  });
+
+  describe('sanitize', () => {
+    it('trims text whitespace', () => {
+      const formData = { text: '  Hello world  ' };
+      say_msg.sanitize!(formData);
+      expect(formData.text).to.equal('Hello world');
+    });
+  });
+
+  describe('localization', () => {
+    it('converts localization to form data', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello',
+        audio_url: 'https://example.com/en.mp3'
+      };
+
+      const localization = {
+        text: ['Hola'],
+        audio_url: ['https://example.com/es.mp3']
+      };
+
+      const formData = say_msg.toLocalizationFormData!(action, localization);
+      expect(formData.text).to.equal('Hola');
+      expect(formData.audio_url).to.equal('https://example.com/es.mp3');
+    });
+
+    it('handles missing localization fields', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello'
+      } as SayMsg;
+
+      const formData = say_msg.toLocalizationFormData!(action, {});
+      expect(formData.text).to.equal('');
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to localization', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello',
+        audio_url: 'https://example.com/en.mp3'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        text: 'Hola',
+        audio_url: 'https://example.com/es.mp3'
+      };
+
+      const localization = say_msg.fromLocalizationFormData!(formData, action);
+      expect(localization.text).to.deep.equal(['Hola']);
+      expect(localization.audio_url).to.deep.equal([
+        'https://example.com/es.mp3'
+      ]);
+    });
+
+    it('omits unchanged localization fields', () => {
+      const action: SayMsg = {
+        uuid: 'test-action',
+        type: 'say_msg',
+        text: 'Hello',
+        audio_url: 'https://example.com/en.mp3'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        text: 'Hello', // same as original
+        audio_url: 'https://example.com/en.mp3' // same as original
+      };
+
+      const localization = say_msg.fromLocalizationFormData!(formData, action);
+      expect(localization.text).to.be.undefined;
+      expect(localization.audio_url).to.be.undefined;
+    });
+  });
+});