@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/{contacts → live}/ContactChat.ts

@@ -1,11 +1,24 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, CustomEventType, Ticket } from '../interfaces';
-import { fetchResults, oxford, oxfordFn, postJSON } from '../utils';
+import {
+  Contact,
+  CustomEventType,
+  NamedUser,
+  Ticket,
+  User
+} from '../interfaces';
+import {
+  fetchResults,
+  getUrl,
+  oxford,
+  oxfordFn,
+  postJSON,
+  postUrl,
+  WebResponse
+} from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Compose, ComposeValue } from '../compose/Compose';
-import { fetchContactHistory, getDisplayName } from './helpers';
+import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
   CampaignFiredEvent,
@@ -26,12 +39,21 @@ import {
   UpdateResultEvent,
   URNsChangedEvent,
   WebhookEvent
-} from './events';
-import { Chat, ChatEvent, MessageType } from '../chat/Chat';
+} from '../events';
+import { Chat, ChatEvent, MessageType } from '../display/Chat';
 import { getUserDisplay } from '../webchat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
-import { UserSelect } from '../select/UserSelect';
-import { Select } from '../select/Select';
+import { UserSelect } from '../form/select/UserSelect';
+import { Select } from '../form/select/Select';
+import { Store } from '../store/Store';
+
+/*
+export const SCROLL_THRESHOLD = 100;
+export const SIMULATED_WEB_SLOWNESS = 0;
+export const MAX_CHAT_REFRESH = 10000;
+export const MIN_CHAT_REFRESH = 500;
+export const BODY_SNIPPET_LENGTH = 250;
+*/
 
 export enum Events {
   MESSAGE_CREATED = 'msg_created',
@@ -1196,3 +1218,91 @@ export class ContactChat extends ContactStoreElement {
     </div>`;
   }
 }
+export const closeTicket = (uuid: string): Promise<WebResponse> => {
+  const formData = new FormData();
+  formData.append('status', 'C');
+  return postUrl(`/ticket/update/${uuid}/?_format=json`, formData);
+};
+export const fetchContact = (endpoint: string): Promise<Contact> => {
+  return new Promise<Contact>((resolve, reject) => {
+    fetchResults(endpoint).then((contacts: Contact[]) => {
+      if (contacts && contacts.length === 1) {
+        resolve(contacts[0]);
+      } else {
+        reject('No contact found');
+      }
+    });
+  });
+};
+export const fetchContactHistory = (
+  reset: boolean,
+  endpoint: string,
+  ticket: string,
+  before: number = undefined,
+  after: number = undefined
+): Promise<ContactHistoryPage> => {
+  if (reset) {
+    pendingRequests.forEach((controller) => {
+      controller.abort();
+    });
+    pendingRequests = [];
+  }
+
+  return new Promise<ContactHistoryPage>((resolve) => {
+    const controller = new AbortController();
+    pendingRequests.push(controller);
+
+    let url = endpoint;
+    if (before) {
+      url += `&before=${before}`;
+    }
+
+    if (after) {
+      url += `&after=${after}`;
+    }
+
+    if (ticket) {
+      url += `&ticket=${ticket}`;
+    }
+
+    const store = document.querySelector('temba-store') as Store;
+
+    getUrl(url, controller)
+      .then((response: WebResponse) => {
+        // on success, remove our abort controller
+        pendingRequests = pendingRequests.filter(
+          (controller: AbortController) => {
+            return response.controller === controller;
+          }
+        );
+
+        const page = response.json as ContactHistoryPage;
+        store.resolveUsers(page.events, ['created_by']).then(() => {
+          resolve(page);
+        });
+      })
+      .catch(() => {
+        // canceled
+      });
+  });
+};
+export const getDisplayName = (user: User) => {
+  if (!user) {
+    return 'Somebody';
+  }
+
+  if ((user as NamedUser).name) {
+    return (user as NamedUser).name;
+  }
+
+  if (user.first_name && user.last_name) {
+    return `${user.first_name} ${user.last_name}`;
+  }
+
+  if (user.first_name) {
+    return user.first_name;
+  }
+
+  return user.email;
+};
+export let pendingRequests: AbortController[] = [];

package/src/{contacts → live}/ContactDetails.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { capitalize } from '../utils';
 
 const STATUS = {

package/src/{contacts → live}/ContactFieldEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from '../form/FormElement';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
-import { InputType, TextInput } from '../textinput/TextInput';
-import { Icon } from '../vectoricon';
+import { InputType, TextInput } from '../form/TextInput';
+import { Icon } from '../Icons';
 import { getClasses, WebResponse } from '../utils';
-import { Select } from '../select/Select';
+import { Select } from '../form/select/Select';
 
 enum Status {
   Success = 'success',

package/src/{contacts → live}/ContactFields.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
-import { Checkbox } from '../checkbox/Checkbox';
+import { Checkbox } from '../form/Checkbox';
 import { CustomEventType } from '../interfaces';
 
 const MIN_FOR_FILTER = 10;

package/src/{contacts → live}/ContactNotepad.ts

@@ -1,7 +1,7 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
-import { getDisplayName } from './helpers';
+import { getDisplayName } from './ContactChat';
 import { ContactNote, CustomEventType } from '../interfaces';
 
 export class ContactNotepad extends ContactStoreElement {

package/src/{contacts → live}/ContactPending.ts

@@ -6,7 +6,7 @@ import {
   ScheduledEventType
 } from '../interfaces';
 import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 
 const ICONS = {
   [ScheduledEventType.CampaignEvent]: Icon.campaign,

package/src/{chart → live}/TembaChart.ts

@@ -2,7 +2,7 @@ import { RapidElement } from '../RapidElement';
 import { property, state } from 'lit/decorators.js';
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 
-import { Select, SelectOption } from '../select/Select';
+import { Select, SelectOption } from '../form/select/Select';
 import { darkenColor, getClasses } from '../utils';
 import { getStore } from '../store/Store';
 
@@ -334,6 +334,9 @@ export class TembaChart extends RapidElement {
   @property({ type: Boolean })
   showAll: boolean = false;
 
+  @property({ type: Boolean })
+  requireWindow: boolean = false;
+
   @property({ type: Number })
   colorIndex: number = 0;
 
@@ -455,7 +458,7 @@ export class TembaChart extends RapidElement {
     }
 
     if (changes.has('url') || changes.has('start') || changes.has('end')) {
-      if (this.url) {
+      if (this.url && (!this.requireWindow || (this.start && this.end))) {
         const store = getStore();
         let fullUrl = this.url;
 

package/src/locales/es.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 = {
-      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
-'s73b4d70c02f4b4e0': `No options`,
-'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 = {
+  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
+  s73b4d70c02f4b4e0: `No options`,
+  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/locales/fr.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/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/store/AppState.ts

@@ -1,5 +1,5 @@
 import { createStore, StoreApi } from 'zustand/vanilla';
-import { fetchResults } from '../utils';
+import { fetchResults, generateUUID } from '../utils';
 import {
   Action,
   Exit,
@@ -12,6 +12,7 @@ import {
 import { immer } from 'zustand/middleware/immer';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { property } from 'lit/decorators.js';
+import { produce } from 'immer';
 
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
@@ -94,12 +95,16 @@ export interface AppState {
     uuid: string,
     node: { actions: Action[]; uuid: string; exits: Exit[]; router?: Router }
   ): unknown;
+  updateConnection(
+    nodeUuid: string,
+    exitUuid: string,
+    destinationNodeUuid: string
+  ): unknown;
   updateCanvasPositions: (positions: CanvasPositions) => void;
-  updateNodePosition(uuid: string, newPosition: FlowPosition): void;
   removeNodes: (uuids: string[]) => void;
-
-  updateStickyPosition(uuid: string, newPosition: FlowPosition): void;
+  removeStickyNotes: (uuids: string[]) => void;
   updateStickyNote(uuid: string, sticky: StickyNote): void;
+  createStickyNote(position: FlowPosition): string;
 }
 
 export const zustand = createStore<AppState>()(
@@ -226,23 +231,13 @@ export const zustand = createStore<AppState>()(
             if (state.flowDefinition._ui.nodes[uuid]) {
               state.flowDefinition._ui.nodes[uuid].position = positions[uuid];
             }
-          }
-        });
-      },
 
-      updateNodePosition: (uuid: string, newPosition: FlowPosition) => {
-        set((state: AppState) => {
-          if (state.flowDefinition._ui.nodes[uuid]) {
-            state.flowDefinition._ui.nodes[uuid].position = newPosition;
-          } else {
-            // If the node doesn't exist in _ui, we can add it
-            state.flowDefinition._ui.nodes[uuid] = {
-              position: newPosition,
-              type: null,
-              config: {}
-            };
+            // otherwise, it might be a sticky
+            else if (state.flowDefinition._ui.stickies[uuid]) {
+              state.flowDefinition._ui.stickies[uuid].position =
+                positions[uuid];
+            }
           }
-
           state.dirtyDate = new Date();
         });
       },
@@ -253,21 +248,32 @@ export const zustand = createStore<AppState>()(
             delete state.flowDefinition._ui.nodes[uuid];
           }
 
-          state.flowDefinition.nodes = state.flowDefinition.nodes.filter(
-            (node) => !uuids.includes(node.uuid)
-          );
+          state.flowDefinition = produce(state.flowDefinition, (draft) => {
+            draft.nodes = draft.nodes.filter(
+              (node) => !uuids.includes(node.uuid)
+            );
+
+            draft.nodes.forEach((node) => {
+              node.exits.forEach((exit) => {
+                if (uuids.includes(exit.destination_uuid)) {
+                  exit.destination_uuid = null;
+                }
+              });
+            });
+          });
+
+          state.dirtyDate = new Date();
         });
       },
 
-      updateStickyPosition: (uuid: string, newPosition: FlowPosition) => {
+      removeStickyNotes: (uuids: string[]) => {
         set((state: AppState) => {
-          if (!state.flowDefinition._ui.stickies) {
-            state.flowDefinition._ui.stickies = {};
-          }
-          if (state.flowDefinition._ui.stickies[uuid]) {
-            state.flowDefinition._ui.stickies[uuid].position = newPosition;
-            state.dirtyDate = new Date();
+          if (state.flowDefinition._ui?.stickies) {
+            for (const uuid of uuids) {
+              delete state.flowDefinition._ui.stickies[uuid];
+            }
           }
+          state.dirtyDate = new Date();
         });
       },
 
@@ -284,6 +290,26 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateConnection: (
+        nodeUuid: string,
+        exitUuid: string,
+        destinationNodeUuid: string
+      ) => {
+        set((state: AppState) => {
+          // Find the exit with this UUID
+          const node = state.flowDefinition.nodes.find(
+            (node) => node.uuid === nodeUuid
+          );
+
+          const exit = node?.exits.find((e) => e.uuid === exitUuid);
+          if (exit) {
+            // Update the destination
+            exit.destination_uuid = destinationNodeUuid;
+            state.dirtyDate = new Date();
+          }
+        });
+      },
+
       updateStickyNote: (uuid: string, sticky: StickyNote) => {
         set((state: AppState) => {
           if (!state.flowDefinition._ui.stickies) {
@@ -292,6 +318,26 @@ export const zustand = createStore<AppState>()(
           state.flowDefinition._ui.stickies[uuid] = sticky;
           state.dirtyDate = new Date();
         });
+      },
+
+      createStickyNote: (position: FlowPosition): string => {
+        const uuid = generateUUID();
+        set((state: AppState) => {
+          if (!state.flowDefinition._ui.stickies) {
+            state.flowDefinition._ui.stickies = {};
+          }
+
+          const newSticky: StickyNote = {
+            position,
+            title: '',
+            body: '',
+            color: 'yellow'
+          };
+
+          state.flowDefinition._ui.stickies[uuid] = newSticky;
+          state.dirtyDate = new Date();
+        });
+        return uuid;
       }
     }))
   )

package/src/store/Store.ts

@@ -27,7 +27,7 @@ import { css, html } from 'lit';
 import { configureLocalization } from '@lit/localize';
 import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { StoreMonitorElement } from './StoreMonitorElement';
-import { getFullName } from '../user/TembaUser';
+import { getFullName } from '../display/TembaUser';
 import { AppState, zustand } from './AppState';
 import { StoreApi } from 'zustand/vanilla';
 

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

@@ -97,6 +97,131 @@ export interface AddToGroup extends Action {
   groups: Group[];
 }
 
+export interface RemoveFromGroup extends Action {
+  groups: Group[];
+}
+
+export interface SetContactField extends Action {
+  field: NamedObject;
+  value: string;
+}
+
+export interface SetContactLanguage extends Action {
+  language: string;
+}
+
+export interface SetContactStatus extends Action {
+  status: 'active' | 'blocked' | 'stopped' | 'archived';
+}
+
+export interface SetContactChannel extends Action {
+  channel: NamedObject;
+}
+
+export interface AddContactUrn extends Action {
+  scheme: string;
+  path: string;
+}
+
+export interface SendEmail extends Action {
+  subject: string;
+  body: string;
+  addresses: string[];
+}
+
+export interface SendBroadcast extends Action {
+  text: string;
+  groups: Group[];
+  contacts: NamedObject[];
+}
+
+export interface EnterFlow extends Action {
+  flow: NamedObject;
+}
+
+export interface StartSession extends Action {
+  flow: NamedObject;
+  groups: Group[];
+  contacts: NamedObject[];
+  create_contact?: boolean;
+}
+
+export interface TransferAirtime extends Action {
+  amounts: number[];
+  result_name: string;
+}
+
+export interface CallClassifier extends Action {
+  classifier: NamedObject;
+  input: string;
+  result_name: string;
+}
+
+export interface CallResthook extends Action {
+  resthook: string;
+  result_name: string;
+}
+
+export interface CallLLM extends Action {
+  llm: NamedObject;
+  instructions: string;
+  result_name: string;
+}
+
+export interface OpenTicket extends Action {
+  subject: string;
+  body: string;
+  assignee?: NamedObject;
+  topic?: NamedObject;
+}
+
+export interface RequestOptin extends Action {
+  optin: NamedObject;
+}
+
+export interface AddInputLabels extends Action {
+  labels: NamedObject[];
+}
+
+export interface SayMsg extends Action {
+  text: string;
+  audio_url?: string;
+}
+
+export interface PlayAudio extends Action {
+  audio_url: string;
+}
+
+export interface WaitForResponse extends Action {
+  timeout?: number;
+}
+
+export interface WaitForMenu extends Action {
+  menu: NamedObject;
+  timeout?: number;
+}
+
+export interface WaitForDigits extends Action {
+  count: number;
+  timeout?: number;
+}
+
+export interface WaitForAudio extends Action {
+  timeout?: number;
+}
+
+export interface WaitForVideo extends Action {
+  timeout?: number;
+}
+
+export interface WaitForImage extends Action {
+  timeout?: number;
+}
+
+export interface WaitForLocation extends Action {
+  timeout?: number;
+}
+
 export interface Exit {
   uuid: string;
   destination_uuid?: string;