@nyaruka/temba-components 0.131.1 → 0.131.2

package/static/svg/work/traced/lightning-02.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.740 1.118 C 7.221 1.327,6.920 1.836,4.718 6.240 C 2.218 11.241,2.170 11.364,2.475 12.093 C 2.609 12.414,2.878 12.708,3.123 12.801 C 3.353 12.888,4.796 12.960,6.330 12.960 C 7.865 12.960,9.120 12.999,9.120 13.046 C 9.120 13.093,8.544 15.048,7.840 17.390 C 7.136 19.731,6.560 21.851,6.560 22.100 C 6.560 22.690,7.179 23.129,7.738 22.935 C 8.123 22.802,20.460 10.117,20.999 9.302 C 21.442 8.632,21.362 7.938,20.788 7.454 L 20.295 7.040 16.868 7.040 C 14.982 7.040,13.440 7.022,13.441 7.000 C 13.441 6.978,13.837 5.916,14.320 4.640 C 14.803 3.364,15.199 2.158,15.199 1.960 C 15.200 1.762,15.056 1.456,14.880 1.280 C 14.580 0.980,14.354 0.961,11.320 0.970 C 9.538 0.976,7.927 1.042,7.740 1.118 M12.622 3.480 C 12.528 3.722,12.134 4.769,11.746 5.808 C 10.545 9.020,10.460 8.939,15.116 8.997 L 18.613 9.040 14.245 13.565 C 11.843 16.054,9.851 18.064,9.819 18.032 C 9.786 18.000,10.156 16.653,10.640 15.040 C 11.124 13.426,11.520 12.010,11.520 11.893 C 11.520 11.776,11.376 11.536,11.200 11.360 C 10.902 11.062,10.667 11.040,7.759 11.040 L 4.639 11.040 6.640 7.040 L 8.641 3.040 10.717 3.040 L 12.792 3.040 12.622 3.480 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/lightning-02.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2495 2H8.49395C8.31447 2 8.22473 2 8.14551 2.02733C8.07544 2.05149 8.01163 2.09093 7.95868 2.14279C7.89881 2.20143 7.85868 2.2817 7.77841 2.44223L3.57841 10.8422C3.38673 11.2256 3.29089 11.4173 3.31391 11.5731C3.33401 11.7091 3.40927 11.8309 3.52197 11.9097C3.65104 12 3.86534 12 4.29395 12H10.4995L7.49953 22L19.6926 9.35531C20.104 8.9287 20.3097 8.7154 20.3217 8.53288C20.3321 8.37446 20.2667 8.22049 20.1454 8.11803C20.0057 8 19.7094 8 19.1167 8H11.9995L14.2495 2Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/temba-modules.ts

@@ -58,6 +58,8 @@ import { MediaPicker } from './src/form/MediaPicker';
 import { Editor } from './src/flow/Editor';
 import { CanvasNode } from './src/flow/CanvasNode';
 import { StickyNote } from './src/flow/StickyNote';
+import { CanvasMenu } from './src/flow/CanvasMenu';
+import { NodeTypeSelector } from './src/flow/NodeTypeSelector';
 import { ContactNotepad } from './src/live/ContactNotepad';
 import { ProgressBar } from './src/display/ProgressBar';
 import { StartProgress } from './src/live/StartProgress';
@@ -143,6 +145,8 @@ addCustomElement('temba-flow-editor', Editor);
 addCustomElement('temba-node-editor', NodeEditor);
 addCustomElement('temba-flow-node', CanvasNode);
 addCustomElement('temba-sticky-note', StickyNote);
+addCustomElement('temba-canvas-menu', CanvasMenu);
+addCustomElement('temba-node-type-selector', NodeTypeSelector);
 addCustomElement('temba-contact-notepad', ContactNotepad);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);

package/test/ActionHelper.ts

@@ -111,9 +111,9 @@ export class ActionTest<T extends Action> {
         expect(convertedAction.uuid).to.equal(action.uuid);
         expect(convertedAction.type).to.equal(action.type);
 
-        // Validate the converted action
+        // Validate the form data
         if (this.actionConfig.validate) {
-          const validation = this.actionConfig.validate(convertedAction);
+          const validation = this.actionConfig.validate(formData);
           expect(validation.valid).to.be.true;
         }
       }
@@ -126,7 +126,7 @@ export class ActionTest<T extends Action> {
   testBasicProperties() {
     it('has correct basic properties', () => {
       expect(this.actionConfig.name).to.be.a('string');
-      expect(this.actionConfig.color).to.exist;
+      expect(this.actionConfig.group).to.exist;
 
       // toFormData and fromFormData are optional - only needed for complex data transformations
       if (this.actionConfig.toFormData) {

package/test/NodeHelper.ts

@@ -144,9 +144,12 @@ export class NodeTest<T extends Node> {
         expect(this.nodeConfig.name).to.be.a('string');
       }
 
-      // Color is optional
-      if (this.nodeConfig.color) {
-        expect(this.nodeConfig.color).to.be.a('string');
+      // EditorType is optional but recommended
+      if (this.nodeConfig.editorType) {
+        expect(this.nodeConfig.editorType).to.be.an('object');
+        expect(this.nodeConfig.editorType.color).to.be.a('string');
+        expect(this.nodeConfig.editorType.title).to.be.a('string');
+        expect(this.nodeConfig.editorType.description).to.be.a('string');
       }
 
       // toFormData and fromFormData are optional - only needed for complex data transformations

package/test/actions/add_contact_urn.test.ts

@@ -0,0 +1,287 @@
+import { expect } from '@open-wc/testing';
+import { add_contact_urn } from '../../src/flow/actions/add_contact_urn';
+import { AddContactUrn } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the add_contact_urn action configuration.
+ */
+describe('add_contact_urn action config', () => {
+  const helper = new ActionTest(add_contact_urn, 'add_contact_urn');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(add_contact_urn.name).to.equal('Add URN');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'add_contact_urn',
+        scheme: 'tel',
+        path: '+12065551212'
+      } as AddContactUrn,
+      'phone-number'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'add_contact_urn',
+        scheme: 'whatsapp',
+        path: '+447123456789'
+      } as AddContactUrn,
+      'whatsapp'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'add_contact_urn',
+        scheme: 'facebook',
+        path: '1234567890'
+      } as AddContactUrn,
+      'facebook-id'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'add_contact_urn',
+        scheme: 'telegram',
+        path: '987654321'
+      } as AddContactUrn,
+      'telegram-id'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'add_contact_urn',
+        scheme: 'instagram',
+        path: 'user_instagram_handle'
+      } as AddContactUrn,
+      'instagram-handle'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-6',
+        type: 'add_contact_urn',
+        scheme: 'tel',
+        path: '@run.results.phone_number'
+      } as AddContactUrn,
+      'expression-phone'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-7',
+        type: 'add_contact_urn',
+        scheme: 'facebook',
+        path: '@fields.facebook_id'
+      } as AddContactUrn,
+      'expression-facebook'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-8',
+        type: 'add_contact_urn',
+        scheme: 'line',
+        path: 'U1234567890abcdef1234567890abcdef'
+      } as AddContactUrn,
+      'line-id'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-9',
+        type: 'add_contact_urn',
+        scheme: 'viber',
+        path: '0123456789ABC='
+      } as AddContactUrn,
+      'viber-id'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-10',
+        type: 'add_contact_urn',
+        scheme: 'wechat',
+        path: 'wechatuser123'
+      } as AddContactUrn,
+      'wechat-id'
+    );
+  });
+
+  describe('validation', () => {
+    it('validates that scheme is required', () => {
+      const formData = {
+        scheme: [],
+        path: '+12065551212'
+      };
+
+      const result = add_contact_urn.validate!(formData);
+
+      expect(result.valid).to.be.false;
+      expect(result.errors.scheme).to.equal('URN type is required');
+    });
+
+    it('validates that path is required', () => {
+      const formData = {
+        scheme: [{ name: 'Phone Number', value: 'tel' }],
+        path: ''
+      };
+
+      const result = add_contact_urn.validate!(formData);
+
+      expect(result.valid).to.be.false;
+      expect(result.errors.path).to.equal('URN value is required');
+    });
+
+    it('validates that path with only whitespace is invalid', () => {
+      const formData = {
+        scheme: [{ name: 'Phone Number', value: 'tel' }],
+        path: '   '
+      };
+
+      const result = add_contact_urn.validate!(formData);
+
+      expect(result.valid).to.be.false;
+      expect(result.errors.path).to.equal('URN value is required');
+    });
+
+    it('validates successfully with both scheme and path', () => {
+      const formData = {
+        scheme: [{ name: 'Phone Number', value: 'tel' }],
+        path: '+12065551212'
+      };
+
+      const result = add_contact_urn.validate!(formData);
+
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.lengthOf(0);
+    });
+
+    it('validates successfully with expression in path', () => {
+      const formData = {
+        scheme: [{ name: 'Facebook ID', value: 'facebook' }],
+        path: '@fields.facebook_id'
+      };
+
+      const result = add_contact_urn.validate!(formData);
+
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.lengthOf(0);
+    });
+  });
+
+  describe('round-trip transformation', () => {
+    it('should preserve action structure through toFormData -> fromFormData', () => {
+      const originalAction: AddContactUrn = {
+        uuid: 'test-uuid-123',
+        type: 'add_contact_urn',
+        scheme: 'whatsapp',
+        path: '+447123456789'
+      };
+
+      const formData = add_contact_urn.toFormData!(originalAction);
+      const convertedAction = add_contact_urn.fromFormData!(
+        formData
+      ) as AddContactUrn;
+
+      expect(convertedAction.uuid).to.equal(originalAction.uuid);
+      expect(convertedAction.type).to.equal(originalAction.type);
+      expect(convertedAction.scheme).to.equal(originalAction.scheme);
+      expect(convertedAction.path).to.equal(originalAction.path);
+    });
+
+    it('should handle different URN schemes correctly', () => {
+      const schemes = ['tel', 'facebook', 'telegram', 'instagram', 'whatsapp'];
+
+      schemes.forEach((scheme) => {
+        const originalAction: AddContactUrn = {
+          uuid: 'test-uuid',
+          type: 'add_contact_urn',
+          scheme: scheme,
+          path: 'test-value'
+        };
+
+        const formData = add_contact_urn.toFormData!(originalAction);
+        const convertedAction = add_contact_urn.fromFormData!(
+          formData
+        ) as AddContactUrn;
+
+        expect(convertedAction.scheme).to.equal(scheme);
+      });
+    });
+
+    it('should handle expressions in path', () => {
+      const originalAction: AddContactUrn = {
+        uuid: 'test-uuid',
+        type: 'add_contact_urn',
+        scheme: 'tel',
+        path: '@run.results.phone_number'
+      };
+
+      const formData = add_contact_urn.toFormData!(originalAction);
+      const convertedAction = add_contact_urn.fromFormData!(
+        formData
+      ) as AddContactUrn;
+
+      expect(convertedAction.path).to.equal('@run.results.phone_number');
+    });
+
+    it('should default to tel scheme if scheme is missing in form data', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        scheme: [],
+        path: '+12065551212'
+      };
+
+      const convertedAction = add_contact_urn.fromFormData!(
+        formData
+      ) as AddContactUrn;
+
+      expect(convertedAction.scheme).to.equal('tel');
+    });
+  });
+
+  describe('form data structure', () => {
+    it('should convert scheme to select array format in toFormData', () => {
+      const action: AddContactUrn = {
+        uuid: 'test-uuid',
+        type: 'add_contact_urn',
+        scheme: 'whatsapp',
+        path: '+447123456789'
+      };
+
+      const formData = add_contact_urn.toFormData!(action);
+
+      expect(formData.scheme).to.be.an('array');
+      expect(formData.scheme).to.have.lengthOf(1);
+      expect(formData.scheme[0]).to.deep.include({
+        name: 'WhatsApp Number',
+        value: 'whatsapp'
+      });
+    });
+
+    it('should handle unknown scheme gracefully', () => {
+      const action: AddContactUrn = {
+        uuid: 'test-uuid',
+        type: 'add_contact_urn',
+        scheme: 'unknown_scheme',
+        path: 'some-value'
+      };
+
+      const formData = add_contact_urn.toFormData!(action);
+
+      expect(formData.scheme).to.be.null;
+    });
+  });
+});

package/test/actions/send_broadcast.test.ts

@@ -0,0 +1,190 @@
+import { expect } from '@open-wc/testing';
+import { send_broadcast } from '../../src/flow/actions/send_broadcast';
+import { SendBroadcast } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the send_broadcast action configuration.
+ */
+describe('send_broadcast action config', () => {
+  const helper = new ActionTest(send_broadcast, 'send_broadcast');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(send_broadcast.name).to.equal('Send Broadcast');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'send_broadcast',
+        text: 'Important announcement for all subscribers!',
+        groups: [
+          { uuid: 'group-1', name: 'Subscribers' },
+          { uuid: 'group-2', name: 'VIP Members' }
+        ],
+        contacts: []
+      } as SendBroadcast,
+      'groups-only'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'send_broadcast',
+        text: 'Personal message to specific contacts.',
+        groups: [],
+        contacts: [
+          { uuid: 'contact-1', name: 'Alice Johnson' },
+          { uuid: 'contact-2', name: 'Bob Smith' }
+        ]
+      } as SendBroadcast,
+      'contacts-only'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'send_broadcast',
+        text: 'Urgent update for everyone!',
+        groups: [{ uuid: 'group-1', name: 'All Members' }],
+        contacts: [{ uuid: 'contact-1', name: 'Admin' }]
+      } as SendBroadcast,
+      'groups-and-contacts'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'send_broadcast',
+        text: 'Multi-line broadcast message.\n\nThis is the second paragraph.\n\nAnd the third.',
+        groups: [{ uuid: 'group-1', name: 'Newsletter Subscribers' }],
+        contacts: []
+      } as SendBroadcast,
+      'multiline-text'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'send_broadcast',
+        text: 'Broadcast with attachments',
+        groups: [{ uuid: 'group-1', name: 'Members' }],
+        contacts: [],
+        attachments: [
+          'image/jpeg:https://example.com/photo.jpg',
+          'application/pdf:https://example.com/document.pdf'
+        ]
+      } as SendBroadcast,
+      'with-attachments'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-6',
+        type: 'send_broadcast',
+        text: 'Message to many groups',
+        groups: [
+          { uuid: 'group-1', name: 'Group A' },
+          { uuid: 'group-2', name: 'Group B' },
+          { uuid: 'group-3', name: 'Group C' },
+          { uuid: 'group-4', name: 'Group D' }
+        ],
+        contacts: []
+      } as SendBroadcast,
+      'many-groups'
+    );
+  });
+
+  describe('form data conversion', () => {
+    it('converts action to form data correctly', () => {
+      const action: SendBroadcast = {
+        uuid: 'test-uuid',
+        type: 'send_broadcast',
+        text: 'Test message',
+        groups: [{ uuid: 'group-1', name: 'Test Group' }],
+        contacts: [{ uuid: 'contact-1', name: 'Test Contact' }],
+        attachments: ['image/jpeg:test.jpg']
+      };
+
+      const formData = send_broadcast.toFormData(action);
+
+      expect(formData.uuid).to.equal('test-uuid');
+      expect(formData.text).to.equal('Test message');
+      expect(formData.recipients).to.have.lengthOf(2);
+      expect(formData.attachments).to.deep.equal(['image/jpeg:test.jpg']);
+    });
+
+    it('converts form data to action correctly with contacts only', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        recipients: [
+          { uuid: 'contact-1', name: 'Contact 1' },
+          { uuid: 'contact-2', name: 'Contact 2' }
+        ],
+        text: 'Test message',
+        attachments: []
+      };
+
+      const action = send_broadcast.fromFormData(formData) as SendBroadcast;
+
+      expect(action.uuid).to.equal('test-uuid');
+      expect(action.type).to.equal('send_broadcast');
+      expect(action.text).to.equal('Test message');
+      expect(action.contacts).to.have.lengthOf(2);
+      expect(action.groups).to.have.lengthOf(0);
+      expect(action.attachments).to.be.undefined;
+    });
+
+    it('converts form data to action correctly with groups only', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        recipients: [
+          { uuid: 'group-1', name: 'Group 1', group: true },
+          { uuid: 'group-2', name: 'Group 2', group: true }
+        ],
+        text: 'Test message',
+        attachments: []
+      };
+
+      const action = send_broadcast.fromFormData(formData) as SendBroadcast;
+
+      expect(action.contacts).to.have.lengthOf(0);
+      expect(action.groups).to.have.lengthOf(2);
+    });
+
+    it('converts form data to action correctly with mixed recipients', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        recipients: [
+          { uuid: 'contact-1', name: 'Contact 1' },
+          { uuid: 'group-1', name: 'Group 1', group: true }
+        ],
+        text: 'Test message',
+        attachments: ['image/jpeg:test.jpg']
+      };
+
+      const action = send_broadcast.fromFormData(formData) as SendBroadcast;
+
+      expect(action.contacts).to.have.lengthOf(1);
+      expect(action.groups).to.have.lengthOf(1);
+      expect(action.attachments).to.deep.equal(['image/jpeg:test.jpg']);
+    });
+
+    it('sanitizes text by trimming whitespace', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        recipients: [{ uuid: 'contact-1', name: 'Test Contact' }],
+        text: '  Test message  \n  '
+      };
+
+      send_broadcast.sanitize(formData);
+
+      expect(formData.text).to.equal('Test message');
+    });
+  });
+});

package/test/actions/send_email.test.ts

@@ -118,15 +118,14 @@ describe('send_email action config', () => {
 
   describe('validation edge cases', () => {
     it('fails validation for empty addresses array', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
         addresses: [],
         subject: 'Test Subject',
         body: 'Test Body'
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.false;
       expect(result.errors.addresses).to.equal(
         'At least one recipient email address is required'
@@ -134,15 +133,14 @@ describe('send_email action config', () => {
     });
 
     it('fails validation for null addresses', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
         addresses: null as any,
         subject: 'Test Subject',
         body: 'Test Body'
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.false;
       expect(result.errors.addresses).to.equal(
         'At least one recipient email address is required'
@@ -150,15 +148,14 @@ describe('send_email action config', () => {
     });
 
     it('fails validation for undefined addresses', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
         addresses: undefined as any,
         subject: 'Test Subject',
         body: 'Test Body'
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.false;
       expect(result.errors.addresses).to.equal(
         'At least one recipient email address is required'
@@ -166,47 +163,44 @@ describe('send_email action config', () => {
     });
 
     it('passes validation with valid email addresses', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
-        addresses: ['valid@example.com'],
+        addresses: [{ name: 'valid@example.com', value: 'valid@example.com' }],
         subject: 'Test Subject',
         body: 'Test Body'
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.true;
       expect(Object.keys(result.errors)).to.have.length(0);
     });
 
     it('passes validation with multiple email addresses', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
         addresses: [
-          'user1@example.com',
-          'user2@example.com',
-          'user3@example.com'
+          { name: 'user1@example.com', value: 'user1@example.com' },
+          { name: 'user2@example.com', value: 'user2@example.com' },
+          { name: 'user3@example.com', value: 'user3@example.com' }
         ],
         subject: 'Test Subject',
         body: 'Test Body'
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.true;
       expect(Object.keys(result.errors)).to.have.length(0);
     });
 
     it('passes validation with empty subject and body', () => {
-      const action: SendEmail = {
+      const formData = {
         uuid: 'test-action',
-        type: 'send_email',
-        addresses: ['test@example.com'],
+        addresses: [{ name: 'test@example.com', value: 'test@example.com' }],
         subject: '',
         body: ''
       };
 
-      const result = send_email.validate(action);
+      const result = send_email.validate(formData);
       expect(result.valid).to.be.true;
       expect(Object.keys(result.errors)).to.have.length(0);
     });