@nyaruka/temba-components 0.159.0 → 0.159.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.159.0",
+  "version": "0.159.2",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/events/eventRenderers.ts

@@ -1,5 +1,6 @@
 import { html, TemplateResult } from 'lit';
 import {
+  AirtimeCreatedEvent,
   AirtimeTransferredEvent,
   CallEvent,
   ChatStartedEvent,
@@ -17,6 +18,7 @@ import { getLanguageName } from '../languages';
 import { oxfordFn } from '../utils';
 
 export enum Events {
+  AIRTIME_CREATED = 'airtime_created',
   AIRTIME_TRANSFERRED = 'airtime_transferred',
   BROADCAST_CREATED = 'broadcast_created',
   CALL_CREATED = 'call_created',
@@ -370,6 +372,30 @@ export const renderAirtimeTransferredEvent = (
   </div>`;
 };
 
+export const renderAirtimeCreatedEvent = (
+  event: AirtimeCreatedEvent
+): TemplateResult => {
+  const status = event._status?.status ?? 'created';
+  const amount = html`${valueText(event.amount)} ${event.currency}`;
+
+  switch (status) {
+    case 'reversed':
+      return html`<div>Airtime transfer reversed</div>`;
+    case 'rejected':
+    case 'cancelled':
+    case 'declined':
+      return html`<div>Airtime transfer failed</div>`;
+    case 'completed':
+      return html`<div style=${eventLineStyle}>
+        Transferred ${amount} of airtime
+      </div>`;
+    default:
+      return html`<div style=${eventLineStyle}>
+        Sending ${amount} of airtime
+      </div>`;
+  }
+};
+
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
@@ -560,6 +586,9 @@ export const renderEvent = (
     case Events.WARNING:
       content = renderDiagnosticEvent(event, isSimulation);
       break;
+    case Events.AIRTIME_CREATED:
+      content = renderAirtimeCreatedEvent(event as AirtimeCreatedEvent);
+      break;
     case Events.AIRTIME_TRANSFERRED:
       content = renderAirtimeTransferredEvent(event as AirtimeTransferredEvent);
       break;

package/src/events.ts

@@ -90,6 +90,28 @@ export interface AirtimeTransferredEvent extends ContactEvent {
   amount: string;
 }
 
+export type AirtimeStatus =
+  | 'created'
+  | 'confirmed'
+  | 'rejected'
+  | 'cancelled'
+  | 'submitted'
+  | 'completed'
+  | 'reversed'
+  | 'declined';
+
+export interface AirtimeCreatedEvent extends ContactEvent {
+  sender: string;
+  recipient: string;
+  currency: string;
+  amount: string;
+  external_id?: string;
+  _status?: {
+    created_on: string;
+    status: AirtimeStatus;
+  };
+}
+
 export type CallStartedEvent = ContactEvent;
 
 export interface ContactHistoryPage {

package/src/interfaces.ts

@@ -160,6 +160,7 @@ export interface Msg {
 export interface ObjectReference {
   uuid: string;
   name: string;
+  url?: string;
 }
 
 export interface Shortcut {

package/src/list/ContentList.ts

@@ -716,9 +716,20 @@ export class ContentList<T = any> extends RapidElement {
         padding: 0 6px 0 0;
         --icon-color: var(--text-3);
       }
+      /* Reserve the icon's footprint on the wrapper itself so the
+         icon column's intrinsic width is the same whether
+         <temba-icon> has upgraded or not — without this, the column
+         briefly measures as just the cell's right-padding (6px) and
+         the downstream pinned columns end up positioned ~14px to
+         the left, which races with whatever moment we snapshot.
+         <temba-icon size="1"> renders at 1em, so we reserve 1em
+         square and let the icon paint into it. */
       .icon-inner {
         display: flex;
         align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
       }
       tr.row.selected .icon-cell {
         --icon-color: var(--accent-700);

package/src/live/{ContactEvents.ts → ContactTimeline.ts}

@@ -41,7 +41,7 @@ const BROADCAST_COLOR = '#8e5ea7';
 // triggers use the same green as the flow pill
 const TRIGGER_COLOR = '#16a34a';
 
-export class ContactEvents extends EndpointMonitorElement {
+export class ContactTimeline extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
 
@@ -64,7 +64,14 @@ export class ContactEvents extends EndpointMonitorElement {
   lang_campaigns_label = 'Campaigns';
 
   @property({ type: String })
-  lang_empty = 'No events for this contact yet.';
+  lang_empty = 'No upcoming events';
+
+  @property({ type: String })
+  lang_empty_help =
+    'Events appear here when a contact joins a campaign. Scheduled flows and messages will also show up here.';
+
+  @property({ type: String })
+  lang_campaigns_link = 'View campaigns';
 
   @property({ type: String })
   lang_projected_info =
@@ -101,11 +108,44 @@ export class ContactEvents extends EndpointMonitorElement {
         display: block;
       }
 
+      /* empty state follows the list design system: centered icon, a short
+         title, muted explanatory copy, and a single call-to-action link */
       .empty {
-        padding: 4em 1em;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
+        padding: 7em 1em 4em;
         color: var(--text-color);
-        opacity: 0.55;
+      }
+
+      .empty temba-icon {
+        margin-bottom: 0.75em;
+        --icon-color: var(--text-3, #7b8593);
+      }
+
+      .empty-title {
+        font-weight: 600;
+        margin-bottom: 0.4em;
+      }
+
+      .empty-help {
+        font-size: 0.875em;
+        line-height: 1.5;
+        max-width: 22em;
+        margin-bottom: 1em;
+        color: var(--text-3, #7b8593);
+      }
+
+      .empty-link {
+        font-size: 0.875em;
+        font-weight: 500;
+        color: var(--color-link-primary);
+        text-decoration: none;
+      }
+
+      .empty-link:hover {
+        text-decoration: underline;
       }
 
       /* row of campaign pills the contact is currently a member of */
@@ -128,7 +168,8 @@ export class ContactEvents extends EndpointMonitorElement {
       }
 
       /* each pill is colored with its campaign's hue - background, border
-         and text all derived from --pill-hue. read-only badges, not links */
+         and text all derived from --pill-hue. clickable links to the
+         campaign's read page */
       .campaign-pill {
         display: inline-flex;
         align-items: center;
@@ -146,6 +187,21 @@ export class ContactEvents extends EndpointMonitorElement {
         border: 1px solid
           color-mix(in srgb, var(--pill-hue) 25%, var(--color-widget-bg, #fff));
         color: var(--pill-hue);
+        cursor: pointer;
+        transition: background 100ms ease-in-out;
+      }
+
+      .campaign-pill:hover {
+        background: color-mix(
+          in srgb,
+          var(--pill-hue) 22%,
+          var(--color-widget-bg, #fff)
+        );
+      }
+
+      .campaign-pill:focus-visible {
+        outline: 2px solid var(--pill-hue);
+        outline-offset: 1px;
       }
 
       /* status-badge dot leading each campaign pill, in the same hue */
@@ -424,7 +480,7 @@ export class ContactEvents extends EndpointMonitorElement {
     const requestedContact = this.contact;
     try {
       const response = await this.store.getUrl(
-        `/contact/events/${encodeURIComponent(this.contact)}/`,
+        `/contact/timeline/${encodeURIComponent(this.contact)}/`,
         { force: true }
       );
       if (this.contact !== requestedContact) {
@@ -570,7 +626,7 @@ export class ContactEvents extends EndpointMonitorElement {
     // capture the contact at request time so a paged response that returns
     // after the user has switched contacts can't append onto the new timeline
     const requestedContact = this.contact;
-    const url = `/contact/events/${encodeURIComponent(
+    const url = `/contact/timeline/${encodeURIComponent(
       this.contact
     )}/?before=${encodeURIComponent(this.nextBefore)}`;
 
@@ -609,7 +665,7 @@ export class ContactEvents extends EndpointMonitorElement {
 
     this.loadingMoreFuture = true;
     const requestedContact = this.contact;
-    const url = `/contact/events/${encodeURIComponent(
+    const url = `/contact/timeline/${encodeURIComponent(
       this.contact
     )}/?after=${encodeURIComponent(this.nextAfter)}`;
 
@@ -710,6 +766,13 @@ export class ContactEvents extends EndpointMonitorElement {
             html`<div
               class="campaign-pill"
               style="--pill-hue:${this.getCampaignColor(campaign.uuid)}"
+              role="button"
+              tabindex="0"
+              @click=${(e: Event) => this.handlePillClicked(e, campaign)}
+              @keydown=${(e: KeyboardEvent) =>
+                this.handleActivationKey(e, () =>
+                  this.handlePillClicked(e, campaign)
+                )}
             >
               <span class="campaign-dot"></span>${campaign.name}
             </div>`
@@ -742,7 +805,14 @@ export class ContactEvents extends EndpointMonitorElement {
       pastDescending.length === 0
     ) {
       return html`<div class="empty">
-        <slot name="empty">${this.lang_empty}</slot>
+        <slot name="empty">
+          <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          <div class="empty-title">${this.lang_empty}</div>
+          <div class="empty-help">${this.lang_empty_help}</div>
+          <a class="empty-link" href="/campaign/" onclick="goto(event)"
+            >${this.lang_campaigns_link}</a
+          >
+        </slot>
       </div>`;
     }
 

package/temba-modules.ts

@@ -31,7 +31,7 @@ import { ContactFields } from './src/live/ContactFields';
 import { ContactFieldEditor } from './src/live/ContactFieldEditor';
 
 import { ContactBadges } from './src/live/ContactBadges';
-import { ContactEvents } from './src/live/ContactEvents';
+import { ContactTimeline } from './src/live/ContactTimeline';
 import { TembaSlider } from './src/form/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/store/FlowStoreElement';
@@ -149,7 +149,7 @@ addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-badges', ContactBadges);
-addCustomElement('temba-contact-events', ContactEvents);
+addCustomElement('temba-contact-timeline', ContactTimeline);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);