@nyaruka/temba-components 0.45.0 → 0.46.0

package/src/contacts/events.ts

@@ -6,7 +6,6 @@ import {
   oxfordFn,
   oxfordNamed,
   renderAvatar,
-  timeSince,
 } from '../utils';
 import { Icon } from '../vectoricon';
 import { getDisplayName } from './helpers';
@@ -195,7 +194,7 @@ export const getEventStyles = () => {
     .event.msg_created,
     .event.broadcast_created,
     .event.ivr_created,
-    .tickets .event.ticket_note_added {
+    .event.ticket_note_added {
       align-self: flex-end;
     }
 
@@ -255,11 +254,11 @@ export const getEventStyles = () => {
       background: rgba(10, 10, 10, 0.02);
     }
 
-    .tickets .ticket_note_added {
+    .ticket_note_added {
       max-width: 300px;
     }
 
-    .tickets .note-summary {
+    .note-summary {
       display: flex;
       flex-direction: row;
       font-size: 85%;
@@ -268,11 +267,13 @@ export const getEventStyles = () => {
       padding: 8px 3px;
     }
 
-    .tickets .ticket_note_added .description {
+    .ticket_note_added .description {
       border: 2px solid rgba(100, 100, 100, 0.1);
       background: rgb(255, 249, 194);
       padding: var(--event-padding);
-      border-radius: 8px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.6);
+      border-radius: calc(var(--curvature) * 2.5);
     }
 
     .channel_event {
@@ -294,14 +295,6 @@ export const getEventStyles = () => {
       padding: 0em 1em;
     }
 
-    .ticket_opened temba-icon.clickable[name='check'] {
-      --icon-color: rgba(100, 100, 100, 1);
-    }
-
-    .ticket_opened .active {
-      color: var(--color-text);
-    }
-
     .ticket_closed .inactive .subtext {
       display: none;
     }
@@ -476,8 +469,6 @@ export const getEventStyles = () => {
   `;
 };
 
-const FLOW_USER_ID = 'flow';
-
 export interface EventGroup {
   type: string;
   events: ContactEvent[];
@@ -641,9 +632,9 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
   if (!event) {
     return 'messages';
   }
+
   switch (event.type) {
     case Events.TICKET_ASSIGNED:
-    case Events.TICKET_NOTE_ADDED:
     case Events.TICKET_OPENED:
     case Events.TICKET_CLOSED:
     case Events.TICKET_REOPENED:
@@ -663,6 +654,8 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
     case Events.MESSAGE_CREATED:
     case Events.MESSAGE_RECEIVED:
     case Events.IVR_CREATED:
+    case Events.TICKET_NOTE_ADDED:
+    case Events.NOTE_CREATED:
       return 'messages';
   }
   return 'verbose';
@@ -826,11 +819,9 @@ export const renderMsgEvent = (
       </div>
     </div>
 
-    ${!isInbound
+    ${!isInbound && event.msg.created_by
       ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
-          ${event.msg.created_by
-            ? renderUserAvatar(event.msg.created_by)
-            : renderUserAvatar(null)}
+          ${renderUserAvatar(event.msg.created_by)}
         </div>`
       : null}
   </div>`;
@@ -953,7 +944,7 @@ export const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {
 };
 
 export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
-  return html`<div style="display:flex;align-items:flex-start">
+  return html` <div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
       <div class="description">${event.note}</div>
       <div class="note-summary">
@@ -996,7 +987,7 @@ export const renderTicketAction = (
         <span
           onclick="goto(event)"
           class="linked"
-          href="/ticket/all/open/${event.ticket.uuid}"
+          href="/ticket/all/open/${event.ticket.uuid}/"
         >
           ticket
         </span>
@@ -1007,12 +998,14 @@ export const renderTicketAction = (
   return html`
     <div class="assigned active">
       <div style="text-align:center">
-        ${getDisplayName(event.created_by)} ${action} this ticket
+        ${event.created_by
+          ? html` ${getDisplayName(event.created_by)} ${action} this ticket `
+          : html` This ticket was ${action} `}
       </div>
       <div class="subtext" style="justify-content:center">
         <temba-date
           class="time"
-          value="${reopened}"
+          value="${event.created_on}"
           display="duration"
         ></temba-date>
       </div>
@@ -1065,30 +1058,18 @@ export const renderTicketOpened = (
     </div>`;
   } else {
     return html`
-      <temba-icon size="1.5" name="${icon}"></temba-icon>
-
-      <div class="active" style="flex-grow:1;">
-        Opened
-        <div class="attn">
-          ${event.ticket.topic ? event.ticket.topic.name : 'General'}
+      <div>
+        <div style="text-align:center">
+          ${getDisplayName(event.created_by)} opened this ticket
+        </div>
+        <div class="subtext" style="justify-content:center">
+          <temba-date
+            class="time"
+            value="${event.created_on}"
+            display="duration"
+          ></temba-date>
         </div>
-        <div class="subtext">${timeSince(new Date(event.created_on))}</div>
       </div>
-      ${handleClose
-        ? html`
-            <temba-tip text="Resolve" position="left" style="width:1.5em">
-              <temba-icon
-                class="clickable"
-                size="1.5"
-                name="${Icon.check}"
-                @click=${() => {
-                  handleClose(event.ticket.uuid);
-                }}
-                ?clickable=${open}
-              />
-            </temba-tip>
-          `
-        : null}
     `;
   }
 };

package/src/date/TembaDate.ts

@@ -41,9 +41,15 @@ export class TembaDate extends RapidElement {
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.firstUpdated(changedProperties);
+    this.store = document.querySelector('temba-store');
+  }
+
+  protected updated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changedProperties);
     if (changedProperties.has('value')) {
       this.datetime = DateTime.fromISO(this.value);
-      this.store = document.querySelector('temba-store');
     }
   }
 

package/src/interfaces.ts

@@ -53,7 +53,7 @@ export interface Ticket {
   contact: ObjectReference;
   ticketer: ObjectReference;
   topic: ObjectReference;
-  assignee?: User;
+  assignee?: { email: string; name: string };
 }
 
 export interface FlowResult {

package/src/list/TembaList.ts

@@ -341,8 +341,6 @@ export class TembaList extends RapidElement {
       } catch (error) {
         // aborted
         this.reset();
-
-        console.log('error, resetting');
         console.log(error);
         return;
       }

package/src/options/Options.ts

@@ -598,12 +598,18 @@ export class Options extends RapidElement {
     }
 
     const containerStyle = {
-      top: this.top ? `${this.top}px` : '0px',
-      left: this.left ? `${this.left}px` : '0px',
       'margin-left': `${this.marginHorizontal}px`,
       'margin-top': `${vertical}px`,
     };
 
+    if (this.top) {
+      containerStyle['top'] = `${this.top}px`;
+    }
+
+    if (this.left) {
+      containerStyle['left'] = `${this.left}px`;
+    }
+
     const optionsStyle = {};
     if (this.width) {
       optionsStyle['width'] = `${this.width}px`;

package/src/store/StoreElement.ts

@@ -34,8 +34,12 @@ export class StoreElement extends RapidElement {
   private handleStoreUpdated(event: CustomEvent) {
     this.store.initialHttpComplete.then(() => {
       if (event.detail.url === this.url) {
+        const previous = this.data;
         this.data = event.detail.data;
-        this.fireCustomEvent(CustomEventType.Refreshed, { data: this.data });
+        this.fireCustomEvent(CustomEventType.Refreshed, {
+          data: event.detail.data,
+          previous,
+        });
       }
     });
   }
@@ -47,6 +51,8 @@ export class StoreElement extends RapidElement {
     if (properties.has('url')) {
       if (this.url) {
         this.store.makeRequest(this.url, { prepareData: this.prepareData });
+      } else {
+        this.data = null;
       }
     }
   }

package/src/utils/index.ts

@@ -152,10 +152,14 @@ export const getAssetPage = (url: string): Promise<AssetPage> => {
   return new Promise<AssetPage>((resolve, reject) => {
     getUrl(url)
       .then((response: WebResponse) => {
-        resolve({
-          assets: response.json.results,
-          next: response.json.next,
-        });
+        if (response.status >= 200 && response.status < 300) {
+          resolve({
+            assets: response.json.results,
+            next: response.json.next,
+          });
+        } else {
+          reject(response);
+        }
       })
       .catch(error => reject(error));
   });
@@ -170,8 +174,12 @@ export const getAssets = async (url: string): Promise<Asset[]> => {
   let pageUrl = url;
   while (pageUrl) {
     const assetPage = await getAssetPage(pageUrl);
-    assets = assets.concat(assetPage.assets);
-    pageUrl = assetPage.next;
+    if (assetPage.assets) {
+      assets = assets.concat(assetPage.assets);
+      pageUrl = assetPage.next;
+    } else {
+      pageUrl = null;
+    }
   }
   return assets;
 };

package/src/vectoricon/index.ts

@@ -47,7 +47,7 @@ export enum Icon {
   group = 'users-01',
   group_smart = 'atom-01',
   help = 'help-circle',
-  home = 'home-01',
+  home = 'settings-02',
   inbox = 'inbox-01',
   label = 'tag-01',
   language = 'globe-01',

package/test/temba-contact-chat.test.ts

@@ -2,8 +2,6 @@ import { useFakeTimers } from 'sinon';
 import { Button } from '../src/button/Button';
 import { Compose } from '../src/compose/Compose';
 import { ContactChat } from '../src/contacts/ContactChat';
-import { CustomEventType } from '../src/interfaces';
-import { TicketList } from '../src/list/TicketList';
 import {
   assertScreenshot,
   clearMockPosts,
@@ -42,25 +40,6 @@ const getContactChat = async (attrs: any = {}) => {
   return chat;
 };
 
-const list_TAG = 'temba-list';
-const getTicketList = async (attrs: any = {}) => {
-  const list = (await getComponent(list_TAG, attrs)) as TicketList;
-
-  if (!list.endpoint) {
-    return list;
-  }
-
-  return new Promise<TicketList>(resolve => {
-    list.addEventListener(
-      CustomEventType.FetchComplete,
-      async () => {
-        resolve(list);
-      },
-      { once: true }
-    );
-  });
-};
-
 describe('temba-contact-chat - contact tests', () => {
   // map requests for contact history to our static files
   // we'll just us the same historylist for everybody for now
@@ -468,123 +447,3 @@ describe('temba-contact-chat - contact tests - handle send tests - text and atta
     );
   });
 });
-
-describe('temba-contact-chat - ticket tests', () => {
-  // map requests for contact history to our static files
-  // we'll just us the same history for everybody for now
-  beforeEach(() => {
-    mockGET(
-      /\/contact\/history\/contact-.*/,
-      '/test-assets/contacts/history.json'
-    );
-
-    mockGET(/\/api\/v2\/tickets\.json.*/, '/test-assets/tickets/empty.json');
-    clock = useFakeTimers();
-  });
-
-  afterEach(function () {
-    clock.restore();
-  });
-
-  it('show history and show chatbox if contact is active and ticket is open', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      contact: 'contact-carter-active',
-    });
-
-    const tickets: TicketList = await getTicketList({
-      endpoint: '/test-assets/tickets/ticket-carter-open.json',
-    });
-
-    chat.currentTicket = tickets.items[0];
-    chat.refresh();
-    await chat.httpComplete;
-
-    // we want to wait until our scroll is finished before taking our screenshot
-    // once we have two scrollTops that are the same, we'll assume we're ready
-    let lastScroll = 0;
-    await assertScreenshot(
-      'contacts/contact-active-ticket-open-show-chatbox',
-      getClip(chat),
-      {
-        clock: clock,
-        predicate: () => {
-          const currentScroll = chat
-            .getContactHistory()
-            .getEventsPane().scrollTop;
-          if (currentScroll !== 0 && currentScroll === lastScroll) {
-            return true;
-          }
-          lastScroll = currentScroll;
-        },
-      }
-    );
-  });
-
-  it('show history and show reopen button if contact is active and ticket is closed', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-    const chat: ContactChat = await getContactChat({
-      contact: 'contact-carter-active',
-    });
-
-    const tickets: TicketList = await getTicketList({
-      endpoint: '/test-assets/tickets/ticket-carter-closed.json',
-    });
-    chat.currentTicket = tickets.items[0];
-    chat.refresh();
-    await chat.httpComplete;
-
-    let lastScroll = 0;
-    await assertScreenshot(
-      'contacts/contact-active-ticket-closed-show-reopen-button',
-      getClip(chat),
-      {
-        clock: clock,
-        predicate: () => {
-          const currentScroll = chat
-            .getContactHistory()
-            .getEventsPane().scrollTop;
-          if (currentScroll !== 0 && currentScroll === lastScroll) {
-            return true;
-          }
-          lastScroll = currentScroll;
-        },
-      }
-    );
-  });
-
-  it('show history and hide chatbox if contact is archived and ticket is closed', async () => {
-    // we are a StoreElement, so load a store first
-    await loadStore();
-
-    const chat: ContactChat = await getContactChat({
-      contact: 'contact-barack-archived',
-    });
-
-    const tickets: TicketList = await getTicketList({
-      endpoint: '/test-assets/tickets/ticket-barack-closed.json',
-    });
-    chat.currentTicket = tickets.items[0];
-    chat.refresh();
-    await chat.httpComplete;
-    let lastScroll = 0;
-    await assertScreenshot(
-      'contacts/contact-archived-ticket-closed-hide-chatbox',
-      getClip(chat),
-      {
-        clock: clock,
-        predicate: () => {
-          const currentScroll = chat
-            .getContactHistory()
-            .getEventsPane().scrollTop;
-          if (currentScroll !== 0 && currentScroll === lastScroll) {
-            return true;
-          }
-          lastScroll = currentScroll;
-        },
-      }
-    );
-  });
-});