@nyaruka/temba-components 0.163.0 → 0.165.0

package/src/form/ContactSearch.ts

@@ -226,12 +226,33 @@ export class ContactSearch extends FieldElement {
         border: 1px solid var(--color-borders);
         border-radius: var(--curvature);
       }
+
+      .interrupt-confirm {
+        display: flex;
+        align-items: center;
+        margin-top: 0.5em;
+        margin-left: 0.6em;
+        cursor: pointer;
+      }
     `;
   }
 
   @property({ type: Boolean })
   in_a_flow: boolean;
 
+  // recipients are locked, e.g. starting a specific contact from their read page -
+  // no recipient editing, filters or query editing
+  @property({ type: Boolean })
+  fixed: boolean;
+
+  // name of the flow the fixed contact is currently in, if any
+  @property({ type: String, attribute: 'current_flow' })
+  currentFlow: string;
+
+  // whether the user has explicitly confirmed interrupting the current flow
+  @property({ type: Boolean })
+  interruptConfirmed = false;
+
   @property({ type: Boolean })
   started_previously: boolean;
 
@@ -310,6 +331,30 @@ export class ContactSearch extends FieldElement {
     }
   }
 
+  protected willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+
+    // reconcile the in_a_flow exclusion; outside of fixed mode it is user-controlled
+    // via the filter checkbox, so we only ever clear it when the option goes away
+    if (
+      changedProperties.has('in_a_flow') ||
+      changedProperties.has('interruptConfirmed') ||
+      changedProperties.has('fixed') ||
+      changedProperties.has('currentFlow')
+    ) {
+      if (!this.in_a_flow) {
+        delete this.exclusions['in_a_flow'];
+      } else if (this.fixed && this.currentFlow) {
+        // a fixed contact already in a flow stays excluded until interruption is confirmed
+        if (this.interruptConfirmed) {
+          delete this.exclusions['in_a_flow'];
+        } else {
+          this.exclusions['in_a_flow'] = true;
+        }
+      }
+    }
+  }
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
@@ -317,12 +362,6 @@ export class ContactSearch extends FieldElement {
       this.handleRecipientsChanged();
     }
 
-    // if we remove the in_a_flow option, make sure it's not part of our exclusions
-    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {
-      delete this.exclusions['in_a_flow'];
-      this.requestUpdate('exclusions');
-    }
-
     if (
       (changedProperties.has('query') && this.advanced) ||
       (changedProperties.has('refreshKey') && this.refreshKey !== '0')
@@ -455,6 +494,32 @@ export class ContactSearch extends FieldElement {
     }
   }
 
+  private async handleInterruptChanged(evt: any) {
+    const checkbox = evt.target as Checkbox;
+    this.interruptConfirmed = checkbox.checked;
+
+    // wait for willUpdate() to reconcile our exclusions
+    await this.updateComplete;
+
+    this.setValue({
+      advanced: this.advanced,
+      query: this.query,
+      exclusions: this.exclusions,
+      recipients: this.recipients
+    });
+
+    // we already know whether our fixed contacts will be included so no need to re-run
+    // the search - just let the modal know, counting contacts only since a group entry
+    // doesn't tell us its membership size
+    const contactCount = this.recipients.filter(
+      (value: OmniOption) => value.type === 'contact'
+    ).length;
+    this.fireCustomEvent(CustomEventType.ContentChanged, {
+      ...(this.summary || {}),
+      total: this.interruptConfirmed ? contactCount : 0
+    });
+  }
+
   private handleExclusionChanged(evt: any) {
     if (evt.target.tagName === 'TEMBA-CHECKBOX') {
       const ex = JSON.stringify(this.exclusions);
@@ -487,7 +552,7 @@ export class ContactSearch extends FieldElement {
 
   public renderWidget(): TemplateResult {
     let summary: TemplateResult;
-    if (this.summary) {
+    if (this.summary && !this.fixed) {
       if (!this.summary.error) {
         const count = this.summary.total || 0;
 
@@ -544,132 +609,170 @@ export class ContactSearch extends FieldElement {
       )}`;
     }
 
+    const interruptConfirm =
+      this.fixed && this.currentFlow && this.in_a_flow && !this.fetching
+        ? html`<div
+            class="interrupt-confirm"
+            @click=${this.handleActivityLabelClicked}
+          >
+            <temba-checkbox
+              name="interrupt"
+              ?checked=${this.interruptConfirmed}
+              @change=${this.handleInterruptChanged}
+            ></temba-checkbox>
+            <div>
+              ${this.flow && this.flow.name === this.currentFlow
+                ? html`${msg("It's okay to restart")}
+                    <b>${this.currentFlow}</b> ${msg('from the beginning')}`
+                : html`${msg("It's okay to interrupt")}
+                    <b>${this.currentFlow}</b> ${msg('and start this one')}`}
+            </div>
+          </div>`
+        : null;
+
     return html`
       ${
-        this.advanced
-          ? html`<div class="query">
-              <temba-textinput
-                .helpText=${this.helpText}
-                .widgetOnly=${this.widgetOnly}
-                .errors=${this.errors}
-                name=${this.name}
-                .inputRoot=${this}
-                @input=${this.handleQueryChange}
-                placeholder=${this.placeholder}
-                .value=${this.query}
-                textarea
-                autogrow
-              >
-              </temba-textinput>
-            </div>`
-          : html`<temba-omnibox
-                placeholder="Search for contacts or groups"
-                widget_only=""
-                groups=""
-                contacts=""
-                label="Recipients"
-                help_text="The contacts to send the message to."
-                .errors=${this.errors}
-                id="recipients"
-                name="recipients"
-                .values=${this.recipients}
-                endpoint="/contact/omnibox/?"
-                @change=${this.handleRecipientsChanged}
-              >
-              </temba-omnibox>
-
-              ${this.not_seen_since_days ||
-              this.in_a_flow ||
-              this.started_previously
-                ? html`
-                    <div class="filters">
-                      <div
-                        style="display:flex;font-size:1em;margin-bottom:0.5em"
-                      >
-                        <temba-icon size="1" name="filter"></temba-icon>
-                        <div style="margin-left:0.5em">
-                          Only include contacts who...
+        this.fixed
+          ? null
+          : this.advanced
+            ? html`<div class="query">
+                <temba-textinput
+                  .helpText=${this.helpText}
+                  .widgetOnly=${this.widgetOnly}
+                  .errors=${this.errors}
+                  name=${this.name}
+                  .inputRoot=${this}
+                  @input=${this.handleQueryChange}
+                  placeholder=${this.placeholder}
+                  .value=${this.query}
+                  textarea
+                  autogrow
+                >
+                </temba-textinput>
+              </div>`
+            : html`<temba-omnibox
+                  placeholder="Search for contacts or groups"
+                  widget_only=""
+                  groups=""
+                  contacts=""
+                  label="Recipients"
+                  help_text="The contacts to send the message to."
+                  .errors=${this.errors}
+                  id="recipients"
+                  name="recipients"
+                  .values=${this.recipients}
+                  endpoint="/contact/omnibox/?"
+                  @change=${this.handleRecipientsChanged}
+                >
+                </temba-omnibox>
+
+                ${this.not_seen_since_days ||
+                this.in_a_flow ||
+                this.started_previously
+                  ? html`
+                      <div class="filters">
+                        <div
+                          style="display:flex;font-size:1em;margin-bottom:0.5em"
+                        >
+                          <temba-icon size="1" name="filter"></temba-icon>
+                          <div style="margin-left:0.5em">
+                            Only include contacts who...
+                          </div>
                         </div>
-                      </div>
-                      ${this.in_a_flow
-                        ? html`<temba-checkbox
-                            name="in_a_flow"
-                            label="${msg('Are not currently in a flow')}"
-                            ?checked=${this.exclusions['in_a_flow']}
-                            @change=${this.handleExclusionChanged}
-                          ></temba-checkbox>`
-                        : null}
-                      ${this.not_seen_since_days
-                        ? html`
-                            <div
-                              class="activity-select"
-                              @click=${this.handleActivityLabelClicked}
-                            >
-                              <temba-checkbox
-                                style="display:inline;"
-                                name="not_seen_since_days"
-                                ?checked=${notSeenSinceDays}
-                                @change=${this.handleExclusionChanged}
+                        ${this.in_a_flow
+                          ? html`<temba-checkbox
+                              name="in_a_flow"
+                              label="${msg('Are not currently in a flow')}"
+                              ?checked=${this.exclusions['in_a_flow']}
+                              @change=${this.handleExclusionChanged}
+                            ></temba-checkbox>`
+                          : null}
+                        ${this.not_seen_since_days
+                          ? html`
+                              <div
+                                class="activity-select"
+                                @click=${this.handleActivityLabelClicked}
                               >
-                              </temba-checkbox>
-
-                              <div>
-                                ${msg('Have sent a message in the last')}
+                                <temba-checkbox
+                                  style="display:inline;"
+                                  name="not_seen_since_days"
+                                  ?checked=${notSeenSinceDays}
+                                  @change=${this.handleExclusionChanged}
+                                >
+                                </temba-checkbox>
+
+                                <div>
+                                  ${msg('Have sent a message in the last')}
+                                </div>
+
+                                <temba-select
+                                  style="margin-left:0.5em"
+                                  class="small-select"
+                                  @change=${this.handleActivityLevelChanged}
+                                  ?disabled=${!notSeenSinceDays}
+                                >
+                                  <temba-option
+                                    name="90 days"
+                                    value="90"
+                                    ?selected=${notSeenSinceDays === 90}
+                                  ></temba-option>
+                                  <temba-option
+                                    name="180 days"
+                                    value="180"
+                                    ?selected=${notSeenSinceDays === 180}
+                                  ></temba-option>
+                                  <temba-option
+                                    name="Year"
+                                    value="365"
+                                    ?selected=${notSeenSinceDays === 365}
+                                  ></temba-option>
+                                </temba-select>
+                                <div></div>
                               </div>
-
-                              <temba-select
-                                style="margin-left:0.5em"
-                                class="small-select"
-                                @change=${this.handleActivityLevelChanged}
-                                ?disabled=${!notSeenSinceDays}
-                              >
-                                <temba-option
-                                  name="90 days"
-                                  value="90"
-                                  ?selected=${notSeenSinceDays === 90}
-                                ></temba-option>
-                                <temba-option
-                                  name="180 days"
-                                  value="180"
-                                  ?selected=${notSeenSinceDays === 180}
-                                ></temba-option>
-                                <temba-option
-                                  name="Year"
-                                  value="365"
-                                  ?selected=${notSeenSinceDays === 365}
-                                ></temba-option>
-                              </temba-select>
-                              <div></div>
-                            </div>
-                          `
-                        : null}
-                      ${this.started_previously
-                        ? html`<temba-checkbox
-                            name="started_previously"
-                            label="${msg(
-                              'Have not started this flow in the last 90 days'
-                            )}"
-                            ?checked=${this.exclusions['started_previously']}
-                            @change=${this.handleExclusionChanged}
-                          ></temba-checkbox>`
-                        : null}
-                    </div>
-                  `
-                : null} `
+                            `
+                          : null}
+                        ${this.started_previously
+                          ? html`<temba-checkbox
+                              name="started_previously"
+                              label="${msg(
+                                'Have not started this flow in the last 90 days'
+                              )}"
+                              ?checked=${this.exclusions['started_previously']}
+                              @change=${this.handleExclusionChanged}
+                            ></temba-checkbox>`
+                          : null}
+                      </div>
+                    `
+                  : null} `
       }
               </div>
-      <div
-        class="results ${getClasses({
-          fetching: this.fetching,
-          initialized: this.initialized || this.fetching,
-          empty:
-            ((this.summary && this.summary.error) || !this.summary) &&
-            !this.fetching
-        })}"
-      >
-        <temba-loading units="6" size="8"></temba-loading>
-        <div class="summary ${this.expanded ? 'expanded' : ''}">${summary}</div>
-      </div>
+      ${interruptConfirm}
+      ${
+        this.fixed
+          ? html`<div
+              class="results ${getClasses({
+                fetching: this.fetching,
+                initialized: this.fetching,
+                empty: !this.fetching
+              })}"
+            >
+              <temba-loading units="6" size="8"></temba-loading>
+            </div>`
+          : html`<div
+              class="results ${getClasses({
+                fetching: this.fetching,
+                initialized: this.initialized || this.fetching,
+                empty:
+                  ((this.summary && this.summary.error) || !this.summary) &&
+                  !this.fetching
+              })}"
+            >
+              <temba-loading units="6" size="8"></temba-loading>
+              <div class="summary ${this.expanded ? 'expanded' : ''}">
+                ${summary}
+              </div>
+            </div>`
+      }
       ${blockers}
       ${
         !blockers && this.summary && this.summary.warnings

package/src/interfaces.ts

@@ -54,6 +54,25 @@ export interface ScheduledEvent {
   message?: string;
 }
 
+// one event definition in a campaign's schedule, offset from a date field
+// on the contact - consumed by the temba-campaign-events component
+export interface CampaignScheduleEvent {
+  uuid: string;
+  type: 'message' | 'flow';
+  status: 'ready' | 'scheduling';
+  offset: number;
+  unit: string;
+  offset_display: string;
+  delivery_hour_display?: string;
+  relative_to: { key: string; name: string; system?: boolean };
+  flow?: ObjectReference;
+  message?: string;
+  count: number;
+  edit_url: string;
+  delete_url: string;
+  fires_url: string;
+}
+
 export interface NamedUser extends User {
   name: string;
 }
@@ -120,6 +139,111 @@ export interface Flow {
   activity: number[];
 }
 
+/** A single row in the campaign CRUDL list
+ * (`campaigns/campaign_list.html`). */
+export interface Campaign {
+  uuid: string;
+  name: string;
+  /** The contact group the campaign schedules against. */
+  group: ObjectReference;
+  /** Number of events (messages / flow starts) in the campaign. */
+  events: number;
+  /** Contacts currently in the campaign's group. */
+  contacts: number;
+  modified_on: string;
+}
+
+/** A single row in the trigger CRUDL list
+ * (`triggers/trigger_list.html`): what starts the flow (type +
+ * per-type details), any channel / group filters, and the flow it
+ * starts. Triggers have no uuid — rows key off the numeric id. */
+export interface Trigger {
+  id: number;
+  /** Trigger type slug — drives the leading row icon and the
+   * details cell (`keyword`, `catch_all`, `schedule`,
+   * `inbound_call`, `missed_call`, `new_conversation`, `referral`,
+   * `closed_ticket`, `opt_in`, `opt_out`). */
+  type: string;
+  /** The flow the trigger starts. */
+  flow: ObjectReference;
+  /** Channel the trigger is limited to, with its type icon. */
+  channel?: (ObjectReference & { icon?: string }) | null;
+  /** Groups the trigger is limited to. */
+  groups?: ObjectReference[];
+  /** Groups the trigger excludes. */
+  exclude_groups?: ObjectReference[];
+  /** Contacts a scheduled trigger starts directly. */
+  contacts?: ObjectReference[];
+  /** Keyword triggers only. */
+  keywords?: string[];
+  /** Keyword match type — `F` (starts with) or `O` (matches). */
+  match_type?: string | null;
+  /** Referral triggers only. */
+  referrer_id?: string | null;
+  /** Scheduled triggers only — `display` is the server-rendered
+   * human schedule ("each week on Monday"); `next_fire` is unset
+   * once the schedule is exhausted or paused. */
+  schedule?: {
+    repeat_period?: string;
+    display?: string;
+    next_fire?: string | null;
+  } | null;
+  priority?: number;
+  created_on?: string;
+}
+
+/** A single row in the broadcast CRUDL lists — both the scheduled
+ * list (`msgs/broadcast_scheduled.html`) and the sent list
+ * (`msgs/broadcast_list.html`). Broadcasts key off the numeric id;
+ * content fields carry the base-language translation. */
+export interface Broadcast {
+  id: number;
+  /** Server status slug — `pending`, `queued`, `started`,
+   * `completed`, `failed` or `interrupted`. Scheduled broadcasts
+   * that haven't fired yet sit at `pending`. */
+  status?: string;
+  /** Send progress for an in-flight broadcast — total recipients
+   * (-1 until the org's contact count resolves) and messages
+   * created so far. */
+  progress?: { total: number; started: number };
+  /** Base-language message text. */
+  text?: string;
+  /** Base-language attachments (`{content_type, url}` objects or
+   * `contentType:url` strings). */
+  attachments?: (string | Attachment)[];
+  /** Base-language quick replies. */
+  quick_replies?: string[];
+  /** The opt-in the broadcast requests, when it is one. */
+  optin?: ObjectReference | null;
+  /** The WhatsApp template the broadcast sends, when it uses one. */
+  template?: ObjectReference | null;
+  /** Recipient groups. */
+  groups?: ObjectReference[];
+  /** Recipient contacts. */
+  contacts?: ObjectReference[];
+  /** Raw recipient URNs (editors/admins only). */
+  urns?: string[];
+  /** Recipient contact query, for query-addressed broadcasts. */
+  query?: string | null;
+  /** Human-readable exclusion descriptions ("Skip inactive
+   * contacts", ...) rendered in the detail view. */
+  exclusions?: string[];
+  /** Scheduled broadcasts only — `display` is the server-rendered
+   * human repeat ("each week on Monday, Wednesday"); `next_fire` is
+   * null once the schedule is exhausted or paused. */
+  schedule?: {
+    repeat_period?: string;
+    display?: string;
+    next_fire?: string | null;
+  } | null;
+  /** Messages created by a sent broadcast. */
+  msg_count?: number;
+  created_on?: string;
+  /** Email of the user who created the broadcast. */
+  created_by?: string | null;
+  modified_on?: string;
+}
+
 export interface Msg {
   /** Numeric id — present on persisted messages (the CRUDL list
    * keys rows off it); absent on outbound drafts. */
@@ -137,7 +261,10 @@ export interface Msg {
   /** Message type as exposed by the messages CRUDL endpoint
    * (`text` / `optin` / …); mirrors `type` for that surface. */
   msg_type?: string;
-  attachments: string[];
+  /** Attachments as exposed by the messages CRUDL endpoint, which
+   * serializes each as a `{content_type, url}` object; some other
+   * message surfaces carry them as `contentType:url` strings. */
+  attachments: (string | Attachment)[];
   /** Labels applied to the message. */
   labels?: ObjectReference[];
   /** The flow the message was sent from, when there is one. */
@@ -192,6 +319,8 @@ export interface ContactGroup {
 export interface URN {
   scheme: string;
   path: string;
+  display?: string | null;
+  channel?: ObjectReference | null;
 }
 
 export interface Group {
@@ -224,7 +353,7 @@ export interface Contact {
   uuid: string;
   stopped: boolean;
   blocked: boolean;
-  urns: string[];
+  urns: URN[];
   language?: string;
   fields: { [key: string]: string };
   groups: Group[];