@nyaruka/temba-components 0.140.0 → 0.141.1

package/src/locales/locale-codes.ts

@@ -10,9 +10,18 @@ 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,13 +1,18 @@
-// 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

@@ -5,6 +5,8 @@ import { css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { postJSON, fromCookie, generateUUIDv7 } from '../utils';
 import { getStore } from '../store/Store';
+import { AppState, fromStore, zustand } from '../store/AppState';
+import { FlowDefinition } from '../store/flow-definition';
 import { CustomEventType } from '../interfaces';
 import { Chat, ContactEvent, MessageType } from '../display/Chat';
 import { Events, renderEvent } from '../events/eventRenderers';
@@ -692,6 +694,12 @@ export class Simulator extends RapidElement {
     `;
   }
 
+  @fromStore(zustand, (state: AppState) => state.flowDefinition)
+  private definition!: FlowDefinition;
+
+  @fromStore(zustand, (state: AppState) => state.viewingRevision)
+  private viewingRevision!: boolean;
+
   @property({ type: String })
   flow = '';
 
@@ -1726,6 +1734,10 @@ export class Simulator extends RapidElement {
   }
 
   protected render(): TemplateResult {
+    if (this.viewingRevision || this.definition?.nodes.length === 0) {
+      return html``;
+    }
+
     const config = this.sizeConfig;
 
     // set CSS custom properties dynamically based on size

package/src/store/AppState.ts

@@ -245,6 +245,7 @@ export interface AppState {
     actionUuid: string,
     localizationData: Record<string, any>
   ): void;
+  clearFlowData: () => void;
   setTranslationFilters: (filters: { categories: boolean }) => void;
   markAutoTranslated: (
     languageCode: string,
@@ -380,6 +381,20 @@ export const zustand = createStore<AppState>()(
         return { name: languageNames[languageCode], code: languageCode };
       },
 
+      clearFlowData: () => {
+        set({
+          flowDefinition: null,
+          flowInfo: null,
+          issuesByNode: new Map(),
+          issuesByAction: new Map(),
+          activity: null,
+          simulatorActivity: null,
+          simulatorActive: false,
+          dirtyDate: null,
+          viewingRevision: false
+        });
+      },
+
       // todo: eventually we should be doing the fetching
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {

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

@@ -325,6 +325,7 @@ export interface FlowUI {
   languages: Record<string, string>[];
   translation_filters?: { categories: boolean };
   auto_translations?: Record<string, Record<string, string[]>>;
+  editor?: string;
 }
 
 export interface FlowDefinition {

package/src/version.ts

@@ -0,0 +1,10 @@
+declare const __TEMBA_COMPONENTS_VERSION__: string;
+
+let _version = 'dev';
+try {
+  _version = __TEMBA_COMPONENTS_VERSION__;
+} catch {
+  // not replaced by build tooling; keep default
+}
+
+export const TEMBA_COMPONENTS_VERSION = _version;

package/test/actions/add_contact_groups.test.ts

@@ -86,4 +86,42 @@ describe('add_contact_groups action config', () => {
       'descriptive-group-names'
     );
   });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'VIP Customers',
+            query: 'status = vip',
+            status: 'ready',
+            count: 150,
+            system: false
+          },
+          {
+            uuid: 'group-2',
+            name: 'Beta Testers',
+            query: null,
+            status: 'ready',
+            count: 45,
+            system: false
+          }
+        ]
+      };
+
+      const action = add_contact_groups.fromFormData(formData) as AddToGroup;
+
+      expect(action.groups).to.have.lengthOf(2);
+      expect(action.groups[0]).to.deep.equal({
+        uuid: 'group-1',
+        name: 'VIP Customers'
+      });
+      expect(action.groups[1]).to.deep.equal({
+        uuid: 'group-2',
+        name: 'Beta Testers'
+      });
+    });
+  });
 });

package/test/actions/add_input_labels.test.ts

@@ -0,0 +1,67 @@
+import { expect } from '@open-wc/testing';
+import { add_input_labels } from '../../src/flow/actions/add_input_labels';
+import { AddInputLabels } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the add_input_labels action configuration.
+ */
+describe('add_input_labels action config', () => {
+  const helper = new ActionTest(add_input_labels, 'add_input_labels');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(add_input_labels.name).to.equal('Add Input Labels');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'add_input_labels',
+        labels: [{ uuid: 'label-1', name: 'Important' }]
+      } as AddInputLabels,
+      'single-label'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'add_input_labels',
+        labels: [
+          { uuid: 'label-1', name: 'Important' },
+          { uuid: 'label-2', name: 'Follow Up' },
+          { uuid: 'label-3', name: 'Spam' }
+        ]
+      } as AddInputLabels,
+      'multiple-labels'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from labels', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        labels: [
+          { uuid: 'label-1', name: 'Important', count: 250 },
+          { uuid: 'label-2', name: 'Follow Up', count: 42 }
+        ]
+      };
+
+      const action = add_input_labels.fromFormData(formData) as AddInputLabels;
+
+      expect(action.labels).to.have.lengthOf(2);
+      expect(action.labels[0]).to.deep.equal({
+        uuid: 'label-1',
+        name: 'Important'
+      });
+      expect(action.labels[1]).to.deep.equal({
+        uuid: 'label-2',
+        name: 'Follow Up'
+      });
+    });
+  });
+});

package/test/actions/enter_flow.test.ts

@@ -0,0 +1,88 @@
+import { expect } from '@open-wc/testing';
+import { enter_flow } from '../../src/flow/actions/enter_flow';
+import { EnterFlow } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the enter_flow action configuration.
+ */
+describe('enter_flow action config', () => {
+  const helper = new ActionTest(enter_flow, 'enter_flow');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(enter_flow.name).to.equal('Enter a Flow');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'enter_flow',
+        terminal: true,
+        flow: { uuid: 'flow-1', name: 'Registration Flow' }
+      } as EnterFlow,
+      'basic-flow'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'enter_flow',
+        terminal: true,
+        flow: {
+          uuid: 'flow-2',
+          name: 'Very Long Flow Name That Tests Layout Wrapping'
+        }
+      } as EnterFlow,
+      'long-flow-name'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from flow', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        flow: [
+          {
+            uuid: 'flow-1',
+            name: 'Registration Flow',
+            type: 'message',
+            archived: false,
+            labels: [],
+            expires: 720,
+            runs: { active: 0, waiting: 5, completed: 100 },
+            results: [],
+            parent_refs: [],
+            created_on: '2024-01-01T00:00:00.000Z',
+            modified_on: '2024-06-15T12:00:00.000Z'
+          }
+        ]
+      };
+
+      const action = enter_flow.fromFormData(formData) as EnterFlow;
+
+      expect(action.flow).to.deep.equal({
+        uuid: 'flow-1',
+        name: 'Registration Flow'
+      });
+    });
+
+    it('should handle flow selected via value key', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        flow: [{ value: 'flow-1', name: 'Test Flow' }]
+      };
+
+      const action = enter_flow.fromFormData(formData) as EnterFlow;
+
+      expect(action.flow).to.deep.equal({
+        uuid: 'flow-1',
+        name: 'Test Flow'
+      });
+    });
+  });
+});

package/test/actions/remove_contact_groups.test.ts

@@ -262,4 +262,33 @@ describe('remove_contact_groups action config', () => {
       expect(Object.keys(result.errors)).to.have.length(0);
     });
   });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        all_groups: false,
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'VIP Customers',
+            query: 'status = vip',
+            status: 'ready',
+            count: 150,
+            system: false
+          }
+        ]
+      };
+
+      const action = remove_contact_groups.fromFormData(
+        formData
+      ) as RemoveFromGroup;
+
+      expect(action.groups).to.have.lengthOf(1);
+      expect(action.groups[0]).to.deep.equal({
+        uuid: 'group-1',
+        name: 'VIP Customers'
+      });
+    });
+  });
 });

package/test/actions/send_broadcast.test.ts

@@ -188,5 +188,49 @@ describe('send_broadcast action config', () => {
 
       expect(formData.text).to.equal('Test message');
     });
+
+    it('should strip superfluous API metadata from contacts and groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        recipients: [
+          {
+            uuid: 'contact-1',
+            name: 'Alice',
+            status: 'active',
+            language: 'eng',
+            urns: ['tel:+250788123456'],
+            groups: [{ uuid: 'g-1', name: 'G1' }],
+            fields: { age: '30' },
+            created_on: '2024-01-01T00:00:00.000Z',
+            modified_on: '2024-06-15T12:00:00.000Z',
+            last_seen_on: '2024-06-14T10:00:00.000Z'
+          },
+          {
+            uuid: 'group-1',
+            name: 'Subscribers',
+            group: true,
+            query: null,
+            status: 'ready',
+            count: 500,
+            system: false
+          }
+        ],
+        text: 'Hello!',
+        attachments: []
+      };
+
+      const action = send_broadcast.fromFormData(formData) as SendBroadcast;
+
+      expect(action.contacts).to.have.lengthOf(1);
+      expect(action.contacts[0]).to.deep.equal({
+        uuid: 'contact-1',
+        name: 'Alice'
+      });
+      expect(action.groups).to.have.lengthOf(1);
+      expect(action.groups[0]).to.deep.equal({
+        uuid: 'group-1',
+        name: 'Subscribers'
+      });
+    });
   });
 });

package/test/actions/set_contact_channel.test.ts

@@ -0,0 +1,88 @@
+import { expect } from '@open-wc/testing';
+import { set_contact_channel } from '../../src/flow/actions/set_contact_channel';
+import { SetContactChannel } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_contact_channel action configuration.
+ */
+describe('set_contact_channel action config', () => {
+  const helper = new ActionTest(set_contact_channel, 'set_contact_channel');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_contact_channel.name).to.equal('Update Channel');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_contact_channel',
+        channel: { uuid: 'channel-1', name: 'WhatsApp Channel' }
+      } as SetContactChannel,
+      'whatsapp-channel'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_contact_channel',
+        channel: { uuid: 'channel-2', name: 'Twilio SMS' }
+      } as SetContactChannel,
+      'sms-channel'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from channel', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        channel: [
+          {
+            uuid: 'channel-1',
+            name: 'WhatsApp Channel',
+            address: '+250788123456',
+            country: 'RW',
+            schemes: ['whatsapp'],
+            roles: ['send', 'receive'],
+            created_on: '2024-01-01T00:00:00.000Z'
+          }
+        ]
+      };
+
+      const action = set_contact_channel.fromFormData(
+        formData
+      ) as SetContactChannel;
+
+      expect(action.channel).to.deep.equal({
+        uuid: 'channel-1',
+        name: 'WhatsApp Channel'
+      });
+    });
+
+    it('should handle channel selected via value key', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        channel: [
+          {
+            value: 'channel-1',
+            name: 'WhatsApp Channel'
+          }
+        ]
+      };
+
+      const action = set_contact_channel.fromFormData(
+        formData
+      ) as SetContactChannel;
+
+      expect(action.channel).to.deep.equal({
+        uuid: 'channel-1',
+        name: 'WhatsApp Channel'
+      });
+    });
+  });
+});

package/test/actions/set_contact_field.test.ts

@@ -0,0 +1,68 @@
+import { expect } from '@open-wc/testing';
+import { set_contact_field } from '../../src/flow/actions/set_contact_field';
+import { SetContactField } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_contact_field action configuration.
+ */
+describe('set_contact_field action config', () => {
+  const helper = new ActionTest(set_contact_field, 'set_contact_field');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_contact_field.name).to.equal('Update Field');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_contact_field',
+        field: { key: 'favorite_color', name: 'Favorite Color' },
+        value: 'Blue'
+      } as SetContactField,
+      'set-value'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_contact_field',
+        field: { key: 'age', name: 'Age' },
+        value: ''
+      } as SetContactField,
+      'clear-value'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from field', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        field: [
+          {
+            key: 'favorite_color',
+            name: 'Favorite Color',
+            value_type: 'text',
+            featured: true,
+            usages: { campaign_events: 0, flows: 3, groups: 1 }
+          }
+        ],
+        value: 'Red'
+      };
+
+      const action = set_contact_field.fromFormData(
+        formData
+      ) as SetContactField;
+
+      expect(action.field).to.deep.equal({
+        key: 'favorite_color',
+        name: 'Favorite Color'
+      });
+    });
+  });
+});

package/test/actions/set_contact_language.test.ts

@@ -0,0 +1,55 @@
+import { expect } from '@open-wc/testing';
+import { set_contact_language } from '../../src/flow/actions/set_contact_language';
+import { SetContactLanguage } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_contact_language action configuration.
+ */
+describe('set_contact_language action config', () => {
+  const helper = new ActionTest(set_contact_language, 'set_contact_language');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_contact_language.name).to.equal('Update Language');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_contact_language',
+        language: 'eng'
+      } as SetContactLanguage,
+      'english'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_contact_language',
+        language: 'fra'
+      } as SetContactLanguage,
+      'french'
+    );
+  });
+
+  describe('round-trip', () => {
+    it('should extract language code from select option', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        language: [{ value: 'spa', name: 'Spanish' }]
+      };
+
+      const action = set_contact_language.fromFormData(
+        formData
+      ) as SetContactLanguage;
+
+      expect(action.language).to.equal('spa');
+      expect(action.type).to.equal('set_contact_language');
+    });
+  });
+});

package/test/actions/set_contact_name.test.ts

@@ -0,0 +1,39 @@
+import { expect } from '@open-wc/testing';
+import { set_contact_name } from '../../src/flow/actions/set_contact_name';
+import { SetContactName } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_contact_name action configuration.
+ */
+describe('set_contact_name action config', () => {
+  const helper = new ActionTest(set_contact_name, 'set_contact_name');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_contact_name.name).to.equal('Update Name');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_contact_name',
+        name: 'Alice Johnson'
+      } as SetContactName,
+      'static-name'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_contact_name',
+        name: '@(title(input))'
+      } as SetContactName,
+      'expression-name'
+    );
+  });
+});