@nyaruka/temba-components 0.140.0 → 0.141.1

package/test/actions/set_contact_status.test.ts

@@ -0,0 +1,64 @@
+import { expect } from '@open-wc/testing';
+import { set_contact_status } from '../../src/flow/actions/set_contact_status';
+import { SetContactStatus } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_contact_status action configuration.
+ */
+describe('set_contact_status action config', () => {
+  const helper = new ActionTest(set_contact_status, 'set_contact_status');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_contact_status.name).to.equal('Update Status');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_contact_status',
+        status: 'active'
+      } as SetContactStatus,
+      'active'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_contact_status',
+        status: 'blocked'
+      } as SetContactStatus,
+      'blocked'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'set_contact_status',
+        status: 'archived'
+      } as SetContactStatus,
+      'archived'
+    );
+  });
+
+  describe('round-trip', () => {
+    it('should extract status value from select option', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        status: [{ value: 'stopped', name: 'Stopped' }]
+      };
+
+      const action = set_contact_status.fromFormData(
+        formData
+      ) as SetContactStatus;
+
+      expect(action.status).to.equal('stopped');
+      expect(action.type).to.equal('set_contact_status');
+    });
+  });
+});

package/test/actions/set_run_result.test.ts

@@ -0,0 +1,61 @@
+import { expect } from '@open-wc/testing';
+import { set_run_result } from '../../src/flow/actions/set_run_result';
+import { SetRunResult } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the set_run_result action configuration.
+ */
+describe('set_run_result action config', () => {
+  const helper = new ActionTest(set_run_result, 'set_run_result');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(set_run_result.name).to.equal('Save Flow Result');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'set_run_result',
+        name: 'Score',
+        value: '100',
+        category: 'High'
+      } as SetRunResult,
+      'with-category'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'set_run_result',
+        name: 'Response',
+        value: '@input.text',
+        category: ''
+      } as SetRunResult,
+      'expression-value'
+    );
+  });
+
+  describe('round-trip', () => {
+    it('should extract name from select option array', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        name: [{ value: 'Score', name: 'Score' }],
+        value: '42',
+        category: 'Medium'
+      };
+
+      const action = set_run_result.fromFormData(formData) as SetRunResult;
+
+      expect(action.name).to.equal('Score');
+      expect(action.value).to.equal('42');
+      expect(action.category).to.equal('Medium');
+      expect(action.type).to.equal('set_run_result');
+    });
+  });
+});

package/test/actions/start_session.test.ts

@@ -148,4 +148,86 @@ describe('start_session action config', () => {
     expect(result.valid).to.be.true;
     expect(Object.keys(result.errors).length).to.equal(0);
   });
+
+  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,
+              interrupted: 2,
+              expired: 1,
+              failed: 0
+            },
+            results: [],
+            parent_refs: [],
+            created_on: '2024-01-01T00:00:00.000Z',
+            modified_on: '2024-06-15T12:00:00.000Z'
+          }
+        ],
+        startType: [{ value: 'create', name: 'Create a new contact' }]
+      };
+
+      const action = start_session.fromFormData(formData) as StartSession;
+
+      expect(action.flow).to.deep.equal({
+        uuid: 'flow-1',
+        name: 'Registration Flow'
+      });
+    });
+
+    it('should strip superfluous API metadata from contacts and groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        flow: [{ uuid: 'flow-1', name: 'Test Flow' }],
+        startType: [{ value: 'manual', name: 'Select recipients manually' }],
+        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: 'VIP',
+            group: true,
+            query: 'status = vip',
+            status: 'ready',
+            count: 42,
+            system: false
+          }
+        ]
+      };
+
+      const action = start_session.fromFormData(formData) as StartSession;
+
+      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: 'VIP'
+      });
+    });
+  });
 });

package/test/nodes/split_by_contact_field.test.ts

@@ -448,4 +448,63 @@ describe('split_by_contact_field', () => {
     expect(uiConfig.operand.name).to.equal('Facebook');
     expect(uiConfig.operand.type).to.equal('scheme');
   });
+
+  it('should handle round-trip for custom field without re-selecting', () => {
+    // Reproduces the bug: toUIConfig saves { id, name, type } without 'key',
+    // then toFormData loads it, and fromFormData must still produce a valid operand.
+    const originalNode: Node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      router: {
+        type: 'switch',
+        cases: [
+          {
+            uuid: 'case-1',
+            type: 'has_text',
+            arguments: ['red'],
+            category_uuid: 'cat-1'
+          }
+        ],
+        categories: [
+          { uuid: 'cat-1', name: 'Red', exit_uuid: 'exit-1' },
+          { uuid: 'cat-other', name: 'Other', exit_uuid: 'exit-other' }
+        ],
+        default_category_uuid: 'cat-other',
+        operand: '@fields.favorite_color',
+        result_name: ''
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-other', destination_uuid: null }
+      ]
+    };
+
+    // nodeUI as saved by toUIConfig - note: NO 'key' property, only 'id'
+    const nodeUI = {
+      type: 'split_by_contact_field',
+      position: { left: 0, top: 0 },
+      config: {
+        operand: {
+          id: 'favorite_color',
+          name: 'Favorite Color',
+          type: 'field'
+        }
+      }
+    };
+
+    // Step 1: toFormData (opening the editor)
+    const formData = split_by_contact_field.toFormData!(originalNode, nodeUI);
+
+    // The field should have 'key' normalized from 'id'
+    expect(formData.field[0].key).to.equal('favorite_color');
+
+    // Step 2: fromFormData (saving without re-selecting the field)
+    const updatedNode = split_by_contact_field.fromFormData!(
+      formData,
+      originalNode
+    );
+
+    // The operand must NOT be @fields.undefined
+    expect(updatedNode.router!.operand).to.equal('@fields.favorite_color');
+  });
 });

package/test/nodes/split_by_run_result.test.ts

@@ -1136,6 +1136,106 @@ describe('split_by_run_result node config', () => {
     });
   });
 
+  describe('toFormData normalizes operand from toUIConfig', () => {
+    it('should handle round-trip when operand has only id (no value)', () => {
+      // Reproduces the bug: toUIConfig saves { id, name, type } without 'value',
+      // then toFormData loads it, and fromFormData must still produce a valid operand.
+      const originalNode: Node = {
+        uuid: 'test-node-uuid',
+        actions: [],
+        router: {
+          type: 'switch',
+          operand: '@results.favorite_color',
+          cases: [
+            {
+              uuid: 'case-1',
+              type: 'has_phrase',
+              arguments: ['red'],
+              category_uuid: 'cat-1'
+            }
+          ],
+          categories: [
+            { uuid: 'cat-1', name: 'Red', exit_uuid: 'exit-1' },
+            { uuid: 'cat-other', name: 'Other', exit_uuid: 'exit-other' }
+          ],
+          default_category_uuid: 'cat-other',
+          result_name: ''
+        },
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-other', destination_uuid: null }
+        ]
+      };
+
+      // nodeUI as saved by toUIConfig - note: NO 'value' property, only 'id'
+      const nodeUI = {
+        config: {
+          operand: {
+            id: 'favorite_color',
+            name: 'Favorite Color',
+            type: 'result'
+          }
+        }
+      };
+
+      // Step 1: toFormData (opening the editor)
+      const formData = split_by_run_result.toFormData!(originalNode, nodeUI);
+
+      // The result should have 'value' normalized from 'id'
+      expect(formData.result[0].value).to.equal('favorite_color');
+
+      // Step 2: fromFormData (saving without re-selecting the result)
+      const updatedNode = split_by_run_result.fromFormData!(
+        formData,
+        originalNode
+      );
+
+      // The operand must NOT be @results.undefined
+      expect(updatedNode.router!.operand).to.equal('@results.favorite_color');
+    });
+
+    it('should handle round-trip with delimiter when operand has only id', () => {
+      const originalNode: Node = {
+        uuid: 'test-node-uuid',
+        actions: [],
+        router: {
+          type: 'switch',
+          operand: '@(field(results.favorite_color, 2, "."))',
+          cases: [],
+          categories: [
+            { uuid: 'cat-other', name: 'Other', exit_uuid: 'exit-other' }
+          ],
+          default_category_uuid: 'cat-other',
+          result_name: ''
+        },
+        exits: [{ uuid: 'exit-other', destination_uuid: null }]
+      };
+
+      const nodeUI = {
+        config: {
+          operand: {
+            id: 'favorite_color',
+            name: 'Favorite Color',
+            type: 'result'
+          },
+          index: 2,
+          delimiter: '.'
+        }
+      };
+
+      const formData = split_by_run_result.toFormData!(originalNode, nodeUI);
+      expect(formData.result[0].value).to.equal('favorite_color');
+
+      const updatedNode = split_by_run_result.fromFormData!(
+        formData,
+        originalNode
+      );
+      expect(updatedNode.router!.operand).to.equal(
+        '@(field(results.favorite_color, 2, "."))'
+      );
+    });
+  });
+
   describe('backwards compatibility', () => {
     it('should support split_by_run_result_delimited type from old flows', () => {
       // Verify that split_by_run_result_delimited points to the same config as split_by_run_result

package/test/nodes/split_by_ticket.test.ts

@@ -0,0 +1,157 @@
+import { expect } from '@open-wc/testing';
+import { split_by_ticket } from '../../src/flow/nodes/split_by_ticket';
+import { Node, OpenTicket } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+/**
+ * Test suite for the split_by_ticket node configuration.
+ */
+describe('split_by_ticket node config', () => {
+  const helper = new NodeTest(split_by_ticket, 'split_by_ticket');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct type and name', () => {
+      expect(split_by_ticket.type).to.equal('split_by_ticket');
+      expect(split_by_ticket.name).to.equal('Open Ticket');
+    });
+  });
+
+  describe('round-trip transformation', () => {
+    it('should transform from flow definition to form data', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'open_ticket',
+            uuid: 'action-1',
+            topic: { uuid: 'topic-1', name: 'General' },
+            assignee: { uuid: 'user-1', name: 'Alice' },
+            note: 'Test note'
+          } as OpenTicket
+        ],
+        exits: []
+      };
+
+      const formData = split_by_ticket.toFormData!(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.topic).to.have.lengthOf(1);
+      expect(formData.topic[0]).to.deep.equal({
+        uuid: 'topic-1',
+        name: 'General'
+      });
+      expect(formData.assignee).to.have.lengthOf(1);
+      expect(formData.assignee[0]).to.deep.equal({
+        uuid: 'user-1',
+        name: 'Alice'
+      });
+      expect(formData.note).to.equal('Test note');
+    });
+
+    it('should transform from form data to flow definition', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        topic: [{ uuid: 'topic-1', name: 'General' }],
+        assignee: [{ uuid: 'user-1', name: 'Alice' }],
+        note: 'Test note'
+      };
+
+      const resultNode = split_by_ticket.fromFormData!(formData, originalNode);
+
+      expect(resultNode.uuid).to.equal('test-node');
+      expect(resultNode.actions).to.have.lengthOf(1);
+      expect(resultNode.actions![0].type).to.equal('open_ticket');
+      expect((resultNode.actions![0] as any).topic).to.deep.equal({
+        uuid: 'topic-1',
+        name: 'General'
+      });
+      expect((resultNode.actions![0] as any).assignee).to.deep.equal({
+        uuid: 'user-1',
+        name: 'Alice'
+      });
+    });
+
+    it('should strip superfluous API metadata from topic and assignee', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        topic: [
+          {
+            uuid: 'topic-1',
+            name: 'General',
+            created_on: '2024-01-01T00:00:00.000Z',
+            modified_on: '2024-06-15T12:00:00.000Z'
+          }
+        ],
+        assignee: [
+          {
+            uuid: 'user-1',
+            name: 'Alice Johnson',
+            email: 'alice@example.com',
+            first_name: 'Alice',
+            last_name: 'Johnson',
+            role: 'agent',
+            created_on: '2024-01-01T00:00:00.000Z'
+          }
+        ],
+        note: ''
+      };
+
+      const resultNode = split_by_ticket.fromFormData!(formData, originalNode);
+
+      const action = resultNode.actions![0] as any;
+      expect(action.topic).to.deep.equal({
+        uuid: 'topic-1',
+        name: 'General'
+      });
+      expect(action.assignee).to.deep.equal({
+        uuid: 'user-1',
+        name: 'Alice Johnson'
+      });
+    });
+
+    it('should handle assignee with only first_name/last_name (no name)', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        topic: [{ uuid: 'topic-1', name: 'General' }],
+        assignee: [
+          {
+            uuid: 'user-1',
+            first_name: 'Bob',
+            last_name: 'Smith',
+            email: 'bob@example.com',
+            role: 'agent'
+          }
+        ],
+        note: ''
+      };
+
+      const resultNode = split_by_ticket.fromFormData!(formData, originalNode);
+
+      const action = resultNode.actions![0] as any;
+      expect(action.assignee).to.deep.equal({
+        uuid: 'user-1',
+        name: 'Bob Smith'
+      });
+    });
+  });
+});

package/test/nodes/split_by_webhook.test.ts

@@ -0,0 +1,131 @@
+import { expect } from '@open-wc/testing';
+import { split_by_webhook } from '../../src/flow/nodes/split_by_webhook';
+import { Node, CallWebhook } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+/**
+ * Test suite for the split_by_webhook node configuration.
+ */
+describe('split_by_webhook node config', () => {
+  const helper = new NodeTest(split_by_webhook, 'split_by_webhook');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct type and name', () => {
+      expect(split_by_webhook.type).to.equal('split_by_webhook');
+      expect(split_by_webhook.name).to.equal('Call Webhook');
+    });
+  });
+
+  describe('round-trip transformation', () => {
+    it('should transform from flow definition to form data', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'call_webhook',
+            uuid: 'action-1',
+            method: 'POST',
+            url: 'https://example.com/webhook',
+            headers: { Authorization: 'Bearer token123' },
+            body: '{"key": "value"}'
+          } as CallWebhook
+        ],
+        exits: []
+      };
+
+      const formData = split_by_webhook.toFormData!(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.method).to.equal('POST');
+      expect(formData.url).to.equal('https://example.com/webhook');
+      expect(formData.headers).to.deep.equal({
+        Authorization: 'Bearer token123'
+      });
+      expect(formData.body).to.equal('{"key": "value"}');
+    });
+
+    it('should transform from form data to flow definition (GET)', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        method: [{ value: 'GET', name: 'GET' }],
+        url: 'https://example.com/api',
+        headers: [],
+        body: ''
+      };
+
+      const resultNode = split_by_webhook.fromFormData!(formData, originalNode);
+
+      expect(resultNode.uuid).to.equal('test-node');
+      expect(resultNode.actions).to.have.lengthOf(1);
+      expect(resultNode.actions![0].type).to.equal('call_webhook');
+
+      const action = resultNode.actions![0] as any;
+      expect(action.method).to.equal('GET');
+      expect(action.url).to.equal('https://example.com/api');
+
+      // Should have Success/Failure router
+      expect(resultNode.router).to.exist;
+      expect(resultNode.router!.type).to.equal('switch');
+      expect(resultNode.exits).to.have.lengthOf(2);
+    });
+
+    it('should transform from form data to flow definition (POST)', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        method: [{ value: 'POST', name: 'POST' }],
+        url: 'https://example.com/webhook',
+        headers: [{ name: 'Content-Type', value: 'application/json' }],
+        body: '{"data": "@contact.name"}'
+      };
+
+      const resultNode = split_by_webhook.fromFormData!(formData, originalNode);
+
+      const action = resultNode.actions![0] as any;
+      expect(action.method).to.equal('POST');
+      expect(action.url).to.equal('https://example.com/webhook');
+      expect(action.headers).to.have.lengthOf(1);
+      expect(action.body).to.equal('{"data": "@contact.name"}');
+    });
+
+    it('should preserve action UUID on re-save', () => {
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'call_webhook',
+            uuid: 'existing-action-uuid',
+            method: 'GET',
+            url: 'https://example.com/old'
+          } as CallWebhook
+        ],
+        exits: []
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        method: [{ value: 'GET', name: 'GET' }],
+        url: 'https://example.com/new',
+        headers: [],
+        body: ''
+      };
+
+      const resultNode = split_by_webhook.fromFormData!(formData, originalNode);
+
+      expect(resultNode.actions![0].uuid).to.equal('existing-action-uuid');
+    });
+  });
+});

package/test/temba-contact-chat.test.ts

@@ -116,6 +116,23 @@ describe('temba-contact-chat', () => {
     await assertScreenshot('contacts/chat-for-stopped-contact', getClip(chat));
   });
 
+  it('keeps flow footer from blocking scrollbar drag interactions', async () => {
+    await loadStore();
+    const chat: ContactChat = await getContactChat({
+      contact: 'contact-dave-active'
+    });
+
+    const flowFooter = chat.shadowRoot.querySelector(
+      '.flow-footer'
+    ) as HTMLElement;
+    const inFlow = flowFooter.querySelector('.in-flow') as HTMLElement;
+
+    expect(flowFooter).to.exist;
+    expect(inFlow).to.exist;
+    expect(getComputedStyle(flowFooter).pointerEvents).to.equal('none');
+    expect(getComputedStyle(inFlow).pointerEvents).to.equal('auto');
+  });
+
   it('sends text without attachments', async () => {
     // we are a StoreElement, so load a store first
     await loadStore();