@nyaruka/temba-components 0.163.0 → 0.164.0

package/src/live/ContactDetails.ts

@@ -90,14 +90,13 @@ export class ContactDetails extends ContactStoreElement {
             </div>`
           : null}
         ${this.data.urns.map((urn) => {
-          const parts = urn.split(':');
-          let scheme = SCHEMES[parts[0]];
+          let scheme = SCHEMES[urn.scheme];
           if (!scheme) {
-            scheme = capitalize(parts[0] as any);
+            scheme = capitalize(urn.scheme as any);
           }
           return html`<temba-contact-field
             name=${scheme}
-            value=${parts[1]}
+            value=${urn.display || urn.path}
             disabled
           ></temba-contact-field>`;
         })}

package/src/live/ContactFields.ts

@@ -151,7 +151,7 @@ export class ContactFields extends ContactStoreElement {
     const value = field.value;
 
     // TODO: Use contact.postChanges instead of postJSON
-    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
+    postJSON(this.endpoint + this.data.uuid, {
       fields: { [field.key]: value }
     })
       .then((response: any) => {

package/src/live/ContactNameFetch.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ContactStoreElement } from './ContactStoreElement';
+import { ContactStoreElement, getDestinationURN } from './ContactStoreElement';
 
 export class ContactNameFetch extends ContactStoreElement {
   @property({ type: Number, attribute: 'icon-size' })
@@ -21,9 +21,12 @@ export class ContactNameFetch extends ContactStoreElement {
 
   public render(): TemplateResult {
     if (this.data) {
+      // show the URN that will be used when messaging the contact, falling
+      // back to their highest priority URN if none are sendable
+      const urn = getDestinationURN(this.data) || this.data.urns[0] || null;
       return html` <temba-contact-name
           name=${this.data.name || this.data.ref}
-          urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
+          urn=${urn ? `${urn.scheme}:${urn.display || urn.path}` : null}
         ></temba-contact-name>
         <slot></slot>`;
     }

package/src/live/ContactNotepad.ts

@@ -13,6 +13,11 @@ export class ContactNotepad extends ContactStoreElement {
   dirtyMessage =
     'You have unsaved changes to the contact notepad. Are you sure you want to contiunue?';
 
+  // grow with the note instead of filling the parent and scrolling —
+  // used when embedded in a card that must never scroll internally
+  @property({ type: Boolean, reflect: true })
+  autogrow = false;
+
   static get styles() {
     return css`
       ${designTokens}
@@ -52,6 +57,41 @@ export class ContactNotepad extends ContactStoreElement {
         outline: none;
       }
 
+      /* flex-grow only matters in a height-bounded flex parent (the tab
+         pane): the textarea stretches to fill the note surface, pinning
+         the attribution toolbar to the bottom. In the card column the
+         parent is a plain block, so the notepad still hugs its text. */
+      :host([autogrow]) {
+        height: auto;
+        margin-top: 0;
+        flex-grow: 1;
+        /* in a height-bounded flex parent (tab pane) the autosize can
+           measure while flex-stretched and overshoot — allow flex to
+           shrink us back so the toolbar never overflows the pane */
+        min-height: 0;
+      }
+
+      /* hug the text — the JS autosize sets the exact height, so the only
+         floor is a single line for an empty note. border-box so setting
+         height = scrollHeight doesn't re-add the padding. Snug under the
+         card title, aligned to the 12px inset, with breathing room under
+         the last line of text. */
+      :host([autogrow]) .notepad {
+        box-sizing: border-box;
+        overflow-y: hidden;
+        min-height: 2em;
+        height: 2em;
+        padding: 0.25em 10px 1em 10px;
+      }
+
+      /* embedded in a card that supplies the chrome — drop our own so the
+         note surface bleeds to the card's edges */
+      :host([autogrow]) .wrapper {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
       .toolbar {
         background: rgba(0, 0, 0, 0.03);
         padding: 0.25em 0.5em;
@@ -73,8 +113,49 @@ export class ContactNotepad extends ContactStoreElement {
     `;
   }
 
+  private resizer: ResizeObserver;
+  private lastWidth = 0;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    // text rewraps when our width changes (browser resize, layout mode
+    // switches), changing the height the note needs — only react to width
+    // so our own height writes don't loop the observer
+    this.resizer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        const width = this.offsetWidth;
+        if (width > 0 && width !== this.lastWidth) {
+          this.lastWidth = width;
+          this.autosize();
+        }
+      });
+    });
+    this.resizer.observe(this);
+  }
+
+  public disconnectedCallback(): void {
+    this.resizer?.disconnect();
+    super.disconnectedCallback();
+  }
+
   private handleChange() {
     this.markDirty();
+    // surface the unsaved state so a wrapping card can show its dirty mark
+    this.fireCustomEvent(CustomEventType.DetailsChanged, { dirty: true });
+    this.autosize();
+  }
+
+  private autosize() {
+    if (!this.autogrow) {
+      return;
+    }
+    const notepad = this.shadowRoot.querySelector(
+      '.notepad'
+    ) as HTMLTextAreaElement;
+    if (notepad) {
+      notepad.style.height = 'auto';
+      notepad.style.height = notepad.scrollHeight + 'px';
+    }
   }
 
   private submitChanges() {
@@ -94,14 +175,19 @@ export class ContactNotepad extends ContactStoreElement {
 
     if (changes.has('data')) {
       this.note =
-        this.data?.notes.length > 0
+        this.data?.notes?.length > 0
           ? { ...this.data.notes[this.data.notes.length - 1] }
           : null;
       this.fireCustomEvent(CustomEventType.DetailsChanged, {
-        count: this.note && this.note.text.length > 0 ? 1 : 0
+        count: this.note && this.note.text.length > 0 ? 1 : 0,
+        dirty: false
       });
       this.markClean();
     }
+
+    if (changes.has('note') || changes.has('data')) {
+      this.autosize();
+    }
   }
 
   public render(): TemplateResult {

package/src/live/ContactStoreElement.ts

@@ -1,8 +1,16 @@
 import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, Group } from '../interfaces';
+import { Contact, Group, URN } from '../interfaces';
 import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 
+/**
+ * Returns the URN that will be used to message the given contact — URNs are
+ * ordered by priority and only ones with a channel are sendable.
+ */
+export const getDestinationURN = (contact: Contact | null): URN | null => {
+  return (contact?.urns || []).find((urn) => !!urn.channel) || null;
+};
+
 export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
@@ -10,8 +18,10 @@ export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: Object, attribute: false })
   data: Contact;
 
+  // expand_urns resolves each URN against a channel so we know which one
+  // will be used when messaging the contact
   @property({ type: String })
-  endpoint = '/api/v2/contacts.json?uuid=';
+  endpoint = '/api/v2/contacts.json?expand_urns=true&uuid=';
 
   prepareData(data: any) {
     if (data && data.length > 0) {

package/src/utils.ts

@@ -17,6 +17,25 @@ export { isSystemCategory } from './flow/categoryUtils';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
+/**
+ * Normalize a message attachment into the `contentType:url` string that
+ * `temba-thumbnail` expects. The messages CRUDL endpoint serializes
+ * attachments as `{content_type, url}` objects, while other message
+ * surfaces (e.g. realtime contact events) carry them already as strings —
+ * accept either shape.
+ */
+export const attachmentAsString = (attachment: string | Attachment): string => {
+  if (typeof attachment === 'string') {
+    return attachment;
+  }
+  // guard against malformed objects — an empty result is a no-op for
+  // temba-thumbnail, which beats rendering "undefined:…"
+  if (!attachment?.content_type || !attachment?.url) {
+    return '';
+  }
+  return `${attachment.content_type}:${attachment.url}`;
+};
+
 export const colorHash = new ColorHash();
 
 export type Asset = KeyedAsset & Ticket & ContactField & Shortcut;

package/temba-modules.ts

@@ -32,6 +32,7 @@ import { ContactFieldEditor } from './src/live/ContactFieldEditor';
 
 import { ContactBadges } from './src/live/ContactBadges';
 import { ContactTimeline } from './src/live/ContactTimeline';
+import { CampaignEvents } from './src/live/CampaignEvents';
 import { TembaSlider } from './src/form/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/store/FlowStoreElement';
@@ -49,9 +50,12 @@ import { Thumbnail } from './src/display/Thumbnail';
 import { NotificationList } from './src/list/NotificationList';
 import { ContentList } from './src/list/ContentList';
 import { PageHeader } from './src/layout/PageHeader';
+import { HeaderBar } from './src/layout/HeaderBar';
 import { MsgList } from './src/list/MsgList';
 import { ContactList } from './src/list/ContactList';
 import { FlowList } from './src/list/FlowList';
+import { CampaignList } from './src/list/CampaignList';
+import { TriggerList } from './src/list/TriggerList';
 import { WebChat } from './src/webchat/WebChat';
 import { ImagePicker } from './src/form/ImagePicker';
 import { Mask } from './src/layout/Mask';
@@ -86,6 +90,9 @@ import { FloatingTab } from './src/display/FloatingTab';
 import { FloatingWindow } from './src/layout/FloatingWindow';
 import { Accordion } from './src/layout/Accordion';
 import { AccordionSection } from './src/layout/AccordionSection';
+import { Card } from './src/layout/Card';
+import { CardStack } from './src/layout/CardStack';
+import { CardLayout } from './src/layout/CardLayout';
 import { Simulator } from './src/simulator/Simulator';
 import { FlowSearch } from './src/flow/FlowSearch';
 import { IssuesWindow } from './src/flow/IssuesWindow';
@@ -134,9 +141,12 @@ addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-notification-list', NotificationList);
 addCustomElement('temba-content-list', ContentList);
 addCustomElement('temba-page-header', PageHeader);
+addCustomElement('temba-header-bar', HeaderBar);
 addCustomElement('temba-msg-list', MsgList);
 addCustomElement('temba-contact-list', ContactList);
 addCustomElement('temba-flow-list', FlowList);
+addCustomElement('temba-campaign-list', CampaignList);
+addCustomElement('temba-trigger-list', TriggerList);
 addCustomElement('temba-list', TembaList);
 addCustomElement('temba-sortable-list', SortableList);
 addCustomElement('temba-run-list', RunList);
@@ -150,6 +160,7 @@ addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-badges', ContactBadges);
 addCustomElement('temba-contact-timeline', ContactTimeline);
+addCustomElement('temba-campaign-events', CampaignEvents);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);
@@ -186,6 +197,9 @@ addCustomElement('temba-message-editor', MessageEditor);
 addCustomElement('temba-rich-edit', RichEditor);
 addCustomElement('temba-accordion', Accordion);
 addCustomElement('temba-accordion-section', AccordionSection);
+addCustomElement('temba-card', Card);
+addCustomElement('temba-card-stack', CardStack);
+addCustomElement('temba-card-layout', CardLayout);
 addCustomElement('temba-expression-highlight', ExpressionHighlight);
 addCustomElement('temba-floating-tab', FloatingTab);
 addCustomElement('temba-floating-window', FloatingWindow);

package/web-dev-server.config.mjs

@@ -450,6 +450,60 @@ export default {
           return;
         }
 
+        // Handle contact timeline (upcoming / past scheduled events).
+        // Dates are generated relative to now so the demo never goes stale.
+        if (context.request.method === 'GET' && context.path.match(/^\/contact\/timeline\/[^/]+\/$/)) {
+          const now = new Date();
+          const days = n => new Date(now.getTime() + n * 86400000).toISOString();
+          const campaign = { uuid: 'campaign-1', name: 'Customer Onboarding' };
+          context.contentType = 'application/json';
+          context.body = JSON.stringify({
+            now: now.toISOString(),
+            campaigns: [campaign],
+            future_count: 3,
+            future: [
+              {
+                type: 'campaign_event',
+                scheduled: days(2),
+                repeat_period: 'O',
+                campaign,
+                flow: { uuid: 'flow-1', name: 'Welcome Check-in' }
+              },
+              {
+                type: 'scheduled_broadcast',
+                scheduled: days(5),
+                repeat_period: 'W',
+                message: 'Weekly tips: how to get the most out of your account'
+              },
+              {
+                type: 'campaign_event',
+                scheduled: days(9),
+                repeat_period: 'O',
+                campaign,
+                flow: { uuid: 'flow-2', name: 'Satisfaction Survey' }
+              }
+            ],
+            past: [
+              {
+                type: 'campaign_event',
+                scheduled: days(-3),
+                repeat_period: 'O',
+                campaign,
+                flow: { uuid: 'flow-3', name: 'Getting Started' }
+              },
+              {
+                type: 'sent_broadcast',
+                scheduled: days(-7),
+                repeat_period: 'O',
+                message: 'Welcome aboard!'
+              }
+            ],
+            next_before: null,
+            next_after: null
+          });
+          return;
+        }
+
         // Serve the content-list demo messages from in-memory state
         // so a labeling POST is reflected on the next refresh. Honors
         // an optional `?label=<uuid>` filter for testing the filtered-