@nyaruka/temba-components 0.164.0 → 0.166.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

@@ -18,6 +18,26 @@ export interface Language {
   name: string;
 }
 
+export interface Notification {
+  created_on: string;
+  type: string;
+  url: string;
+  is_seen: boolean;
+  export?: {
+    type: string;
+    num_records: number;
+  };
+  import?: {
+    type: string;
+    num_records: number;
+  };
+  incident?: {
+    type: string;
+    started_on: string;
+    ended_on?: string;
+  };
+}
+
 export interface Attachment {
   uuid: string;
   content_type: string;
@@ -192,6 +212,58 @@ export interface Trigger {
   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. */
@@ -416,6 +488,7 @@ export enum CustomEventType {
   Error = 'temba-error',
   Interrupt = 'temba-interrupt',
   Opened = 'temba-opened',
+  NotificationReceived = 'temba-notification',
   TicketUpdated = 'temba-ticket-updated',
   Moved = 'temba-moved',
   DateRangeChanged = 'temba-date-range-changed',

package/src/layout/Card.ts

@@ -20,6 +20,12 @@ export class Card extends RapidElement {
         display: block;
       }
 
+      /* an empty panel drops its card entirely — in tab (plain) mode the
+         pane still renders so the tab keeps working */
+      :host([empty]:not([plain])) {
+        display: none;
+      }
+
       /* The chrome lives on an inner frame rather than the host so
          document-level universal rules (e.g. tailwind's preflight
          border-color) can't override it. */
@@ -130,6 +136,16 @@ export class Card extends RapidElement {
         padding: 0 10px 10px;
       }
 
+      /* card chrome bounds the panel tightly — slotted panels scale their
+         empty-state treatment down from the roomy tab-pane default to a
+         single quiet line */
+      :host(:not([plain])) .content ::slotted(*) {
+        --empty-padding: 1em;
+        --empty-extras-display: none;
+        --empty-title-size: 0.9em;
+        --empty-title-color: var(--text-3);
+      }
+
       /* bleed mode: the body content runs edge-to-edge so a panel with its
          own surface (e.g. the notepad) fills the card, clipped to the card
          radius. The footer of such content sits on the card's bottom edge. */
@@ -210,6 +226,12 @@ export class Card extends RapidElement {
   @property({ type: Boolean, reflect: true })
   bleed = false;
 
+  // the slotted panel reported (via temba-details-changed) that it has
+  // nothing to show — the card hides entirely in card mode, though its
+  // tab remains available in narrow mode
+  @property({ type: Boolean, reflect: true })
+  empty = false;
+
   // named surface treatments, e.g. "note" for the sticky-note look
   @property({ type: String, reflect: true })
   variant = '';
@@ -252,6 +274,9 @@ export class Card extends RapidElement {
     if ('count' in event.detail) {
       this.count = event.detail.count;
     }
+    if ('empty' in event.detail) {
+      this.empty = event.detail.empty;
+    }
   }
 
   public render(): TemplateResult {

package/src/layout/CardLayout.ts

@@ -88,13 +88,13 @@ export class CardLayout extends RapidElement {
         /* the column soaks up whatever the main view doesn't take. Its
            scrollport runs the full height (the host supplies no vertical
            padding) so the scrollbar bleeds top to bottom, while the inner
-           padding aligns the first card with the main view and doubles as
-           room for card shadows. */
+           padding aligns the cards with the main view — including below,
+           so the last card scrolls to rest level with the bottom of the
+           main view — and doubles as room for card shadows. */
         flex: 1 0 var(--card-column-width, 360px);
         min-height: 0;
         overflow-y: auto;
         padding: var(--layout-spacing, 8px);
-        padding-bottom: 0;
       }
 
       temba-tabs {

package/src/layout/HeaderBar.ts

@@ -22,7 +22,10 @@ export class HeaderBar extends RapidElement {
         box-sizing: border-box;
         padding: 0 8px;
         background: var(--surface);
-        border-bottom: 1px solid var(--border);
+        /* the rule is a box-shadow, not a border — host pages (tailwind
+           preflight) reset border-width on every element, and outer-scope
+           element styles beat :host */
+        box-shadow: inset 0 -1px 0 0 var(--border);
       }
 
       ::slotted(*) {