@nyaruka/temba-components 0.159.0 → 0.159.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.159.0",
+  "version": "0.159.1",
   "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/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);