@nyaruka/temba-components 0.156.1 → 0.156.3

package/src/flow/actions/send_broadcast.ts

@@ -76,6 +76,7 @@ export const send_broadcast: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Type your message here...',
+      maxLength: 640,
       maxAttachments: 10,
       accept: '',
       endpoint: '/api/v2/media.json',
@@ -180,5 +181,52 @@ export const send_broadcast: ActionConfig = {
     if (formData.text && typeof formData.text === 'string') {
       formData.text = formData.text.trim();
     }
+  },
+  localizable: ['text', 'attachments'],
+  toLocalizationFormData: (
+    action: SendBroadcast,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.text && Array.isArray(localization.text)) {
+      formData.text = localization.text[0] || '';
+    } else {
+      formData.text = '';
+    }
+
+    if (localization.attachments && Array.isArray(localization.attachments)) {
+      formData.attachments = localization.attachments;
+    } else {
+      formData.attachments = [];
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendBroadcast) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.text && formData.text.trim() !== '') {
+      if (formData.text !== action.text) {
+        localization.text = [formData.text];
+      }
+    }
+
+    const attachments = (formData.attachments || []).filter(
+      (att: string) => att && att.trim() !== ''
+    );
+
+    if (attachments.length > 0) {
+      if (
+        JSON.stringify(attachments) !==
+        JSON.stringify(action.attachments || [])
+      ) {
+        localization.attachments = attachments;
+      }
+    }
+
+    return localization;
   }
 };

package/src/flow/actions/send_email.ts

@@ -45,12 +45,13 @@ export const send_email: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Enter email subject',
-      maxLength: 255
+      maxLength: 1000
     },
     body: {
       type: 'textarea',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       minHeight: 175
     }
   },
@@ -65,6 +66,46 @@ export const send_email: ActionConfig = {
       body: formData.body
     };
   },
+  localizable: ['subject', 'body'],
+  toLocalizationFormData: (
+    action: SendEmail,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.subject && Array.isArray(localization.subject)) {
+      formData.subject = localization.subject[0] || '';
+    } else {
+      formData.subject = '';
+    }
+
+    if (localization.body && Array.isArray(localization.body)) {
+      formData.body = localization.body[0] || '';
+    } else {
+      formData.body = '';
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendEmail) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.subject && formData.subject.trim() !== '') {
+      if (formData.subject !== action.subject) {
+        localization.subject = [formData.subject];
+      }
+    }
+
+    if (formData.body && formData.body.trim() !== '') {
+      if (formData.body !== action.body) {
+        localization.body = [formData.body];
+      }
+    }
+
+    return localization;
+  },
   validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 

package/src/flow/actions/send_msg.ts

@@ -65,6 +65,7 @@ export const send_msg: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Type your message here...',
+      maxLength: 10000,
       maxAttachments: 10,
       accept: '',
       endpoint: '/api/v2/media.json',

package/src/flow/actions/set_run_result.ts

@@ -57,6 +57,7 @@ export const set_run_result: ActionConfig = {
       label: 'Category',
       helpText: 'Optional category for this result',
       required: false,
+      maxLength: 36,
       placeholder: 'Enter category...'
     }
   },

package/src/flow/nodes/shared-rules.ts

@@ -189,6 +189,7 @@ export const createRulesItemConfig = () => ({
     type: 'text' as const,
     placeholder: 'Category',
     required: true,
+    maxLength: 36,
     maxWidth: '120px',
     flavor: 'xsmall' as const
   }

package/src/flow/nodes/shared.ts

@@ -18,6 +18,7 @@ import { getOperatorConfig } from '../operators';
 export const resultNameField: TextFieldConfig = {
   type: 'text',
   required: false,
+  maxLength: 64,
   placeholder: '(optional)',
   helpText: 'The name to use to reference this result in the flow'
 };

package/src/flow/nodes/wait_for_audio.ts

@@ -16,6 +16,7 @@ export const wait_for_audio: NodeConfig = {
       type: 'text',
       label: 'Result Name',
       required: false,
+      maxLength: 64,
       placeholder: '(optional)',
       helpText: 'The name to use to reference this result in the flow'
     }

package/src/simulator/Simulator.ts

@@ -34,6 +34,9 @@ const TEST_LOCATIONS = [
   'geo:-1.9536,30.0606' // Kigali
 ];
 
+const truncateUrl = (url: string, maxLen = 50): string =>
+  url && url.length > maxLen ? url.slice(0, maxLen) + '…' : url;
+
 interface Contact {
   uuid: string;
   name?: string;
@@ -1472,18 +1475,20 @@ export class Simulator extends RapidElement {
       const renderedEvent =
         event.type === Events.WEBHOOK_CALLED && this.hasWebhookDetails(event)
           ? html`<div class="webhook-event">
-              <div class="webhook-event-text">${rendered}</div>
-              <button
-                type="button"
-                data-webhook-details="true"
-                class="webhook-event-log-link"
-                title="View webhook call details"
-                aria-label="View webhook call details"
-                @click=${(clickEvent: MouseEvent) =>
-                  this.handleWebhookDetailsClick(event, clickEvent)}
-              >
-                <temba-icon name="log" size="0.8"></temba-icon>
-              </button>
+              <div class="webhook-event-text">
+                Called
+                <a
+                  href="#"
+                  class="webhook-event-url"
+                  data-webhook-details="true"
+                  title="View webhook call details"
+                  @click=${(clickEvent: MouseEvent) => {
+                    clickEvent.preventDefault();
+                    this.handleWebhookDetailsClick(event, clickEvent);
+                  }}
+                  >${truncateUrl((event as any).url)}</a
+                >
+              </div>
             </div>`
           : rendered;
 

package/web-test-runner.config.mjs

@@ -282,6 +282,8 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
 
   await page.exposeFunction('click', async (element) => {
     if (page.isClosed()) return;
+    // reset mouse state to avoid "already pressed" errors
+    await page.mouse.up().catch(() => {});
     const frame = await page.frames().find((f) => {
       return true;
     });