@nyaruka/temba-components 0.67.3 → 0.68.0

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const c=e=>o(e,i),l={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>l[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"314b925e.js",revision:"926c4b38712c5d2f2afa466b19ef5d34"},{url:"templates/components-body.html",revision:"778cc0ad86ad463b495454762585bd0c"},{url:"templates/components-head.html",revision:"76b90117f7ca9e2cece3b936858449d8"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const d=e=>o(e,i),l={module:{uri:i},exports:r,require:d};t[i]=Promise.all(n.map((e=>l[e]||d(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"dd629ee4.js",revision:"1dd4d02eac90e5e53470db61f5183366"},{url:"templates/components-body.html",revision:"2ec165e7b667c426d2558f08a3ed4c07"},{url:"templates/components-head.html",revision:"da8d486792fa71cf6572a4a0eb06e79c"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../tmp/b93d4b12edae4ea9596d2ef05ae1b9d6/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"314b925e.js\",\n    \"revision\": \"926c4b38712c5d2f2afa466b19ef5d34\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"778cc0ad86ad463b495454762585bd0c\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"76b90117f7ca9e2cece3b936858449d8\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../tmp/860406e69004523f3f91550eb665cca0/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"dd629ee4.js\",\n    \"revision\": \"1dd4d02eac90e5e53470db61f5183366\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"2ec165e7b667c426d2558f08a3ed4c07\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"da8d486792fa71cf6572a4a0eb06e79c\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/314b925e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.67.3"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/dd629ee4.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.68.0"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/314b925e.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/dd629ee4.js" crossorigin="anonymous">

package/out-tsc/src/contacts/ContactTickets.js

@@ -134,7 +134,6 @@ export class ContactTickets extends StoreElement {
 
       .user {
         display: flex;
-        padding: 0.4em 0.7em;
         align-items: center;
         border-radius: var(--curvature);
         cursor: pointer;
@@ -145,8 +144,6 @@ export class ContactTickets extends StoreElement {
       }
 
       .user .avatar {
-        font-size: 0.5em;
-        margin-right: 1em;
       }
 
       .user .name {
@@ -215,7 +212,7 @@ export class ContactTickets extends StoreElement {
             return null;
         }
         return html `<div class="user">
-      <div class="avatar">${renderAvatar({ user: user })}</div>
+      <div class="avatar">${renderAvatar({ user: user, scale: 0.6 })}</div>
       <div class="name">${getFullName(user)}</div>
     </div>`;
     }
@@ -315,10 +312,11 @@ export class ContactTickets extends StoreElement {
                       <div slot="toggle" class="toggle">
                         ${ticket.assignee
                 ? html `
-                              <div style="font-size:0.5em">
+                              <div>
                                 ${renderAvatar({
                     name: ticket.assignee.name,
-                    position: 'left',
+                    user: ticket.assignee,
+                    scale: 0.7,
                 })}
                               </div>
                             `

package/out-tsc/src/contacts/ContactTickets.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n  getClasses,\n  getFullName,\n  postJSON,\n  renderAvatar,\n  stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  agent: string;\n\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: String })\n  ticket: string;\n\n  @property({ type: Boolean })\n  clickable = false;\n\n  @property({ type: Boolean })\n  expandable = false;\n\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      :hover {\n      }\n\n      .ticket.expandable:hover,\n      .ticket.clickable:hover {\n        cursor: pointer;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 2px var(--color-link-primary);\n      }\n\n      .header {\n        display: flex;\n        flex-direction: row;\n        flex-grow: 1;\n      }\n\n      .tickets {\n        display: flex;\n        flex-direction: column;\n        padding: 0.3em 0.8em;\n      }\n\n      .count {\n        margin-left: 0.5em;\n      }\n\n      .ticket {\n        background: #fff;\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n        transition: all 200ms ease-in-out;\n      }\n\n      .ticket .topic {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0.5em 0.75em 0.5em 0.75em;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n        flex-grow: 2;\n      }\n\n      .ticket .body {\n        max-height: 0px;\n        overflow-y: auto;\n        -webkit-line-clamp: none;\n        white-space: normal;\n        width: initial;\n        padding: 0.5em 0.75em 0em 0.75em;\n        max-height: 40vh;\n        display: none;\n        margin-bottom: 0.5em;\n        border-top: 1px solid #e6e6e6;\n      }\n\n      .ticket.expanded .body {\n        display: block;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n\n      .resolve {\n        color: var(--color-primary-dark);\n      }\n\n      .dropdown {\n        color: rgb(45, 45, 45);\n        z-index: 50;\n        width: 18em;\n      }\n\n      .option-group {\n        padding: 0.4em;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .assigned .user {\n        flex-grow: 1;\n      }\n\n      .assigned {\n        display: flex;\n        align-items: center;\n      }\n\n      .assigned temba-button {\n        margin-right: 0.75em;\n      }\n\n      .assigned .user:hover {\n        cursor: default;\n        background: none;\n      }\n\n      .options {\n        max-height: 40vh;\n        overflow-y: auto;\n        border-bottom: none;\n      }\n\n      .user {\n        display: flex;\n        padding: 0.4em 0.7em;\n        align-items: center;\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .user:hover {\n        background: var(--color-selection);\n      }\n\n      .user .avatar {\n        font-size: 0.5em;\n        margin-right: 1em;\n      }\n\n      .user .name {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        flex-grow: 1;\n      }\n\n      .user temba-button {\n        margin-left: 0.5em;\n      }\n\n      .current-user {\n        font-weight: 400;\n      }\n\n      .details {\n        display: flex;\n        align-items: center;\n        flex-shrink: 1;\n        margin-right: 0.5em;\n      }\n\n      .details .date {\n        padding: 0em 0.5em;\n      }\n\n      .details .toggle {\n        padding-right: 0.5em;\n      }\n    `;\n  }\n\n  prepareData(data: any): any {\n    if (data && data.length) {\n      data.sort((a: Ticket, b: Ticket) => {\n        if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n          return -1;\n        }\n\n        if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n          return 1;\n        }\n\n        if (\n          a.status == TicketStatus.Closed &&\n          b.status == TicketStatus.Closed\n        ) {\n          return (\n            new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n          );\n        }\n\n        return (\n          new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n        );\n      });\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact') || changes.has('ticket')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}${\n          this.ticket ? '&ticket=' + this.ticket : ''\n        }`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  private renderUser(user: User) {\n    if (!user) {\n      return null;\n    }\n    return html`<div class=\"user\">\n      <div class=\"avatar\">${renderAvatar({ user: user })}</div>\n      <div class=\"name\">${getFullName(user)}</div>\n    </div>`;\n  }\n\n  private handleClose(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'close',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleReopen(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  public handleTicketAssignment(uuid: string, email: string) {\n    // if its already assigned to use, it's a noop\n    const ticket = this.data.find(ticket => ticket.uuid === uuid);\n    if (ticket.assignee && ticket.assignee.email === email) {\n      return;\n    }\n\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'assign',\n      assignee: email,\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n    return true;\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date = ticket.opened_on;\n    const users = this.store.getAssignableUsers();\n    const agent = users.find(user => user.email === this.agent);\n    return html`\n      <div\n        @click=${() => {\n          if (this.clickable) {\n            this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n          } else if (this.expandable) {\n            this.expanded = !this.expanded;\n          }\n        }}\n        class=\"ticket ${ticket.status} ${getClasses({\n          clickable: this.clickable,\n          expandable: this.expandable,\n          expanded: this.expanded,\n        })}\"\n      >\n        <div class=\"header\">\n          <div class=\"topic\">${ticket.topic.name}</div>\n\n          <div class=\"details\">\n            <div class=\"date\">\n              <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n            </div>\n\n            ${ticket.status === TicketStatus.Closed\n              ? html`<div class=\"reopen\">\n                  <temba-button\n                    primary\n                    small\n                    name=\"Reopen\"\n                    @click=${(event: MouseEvent) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                      this.handleReopen(ticket.uuid);\n                    }}\n                  ></temba-button>\n                </div>`\n              : html`\n                  <div>\n                    <temba-dropdown\n                      right\n                      arrowsize=\"8\"\n                      arrowoffset=\"-44\"\n                      offsety=\"8\"\n                      offsetx=${ticket.assignee ? -42 : -28}\n                    >\n                      <div slot=\"toggle\" class=\"toggle\">\n                        ${ticket.assignee\n                          ? html`\n                              <div style=\"font-size:0.5em\">\n                                ${renderAvatar({\n                                  name: ticket.assignee.name,\n                                  position: 'left',\n                                })}\n                              </div>\n                            `\n                          : html`\n                              <temba-button\n                                name=\"Assign\"\n                                primary\n                                small\n                              ></temba-button>\n                            `}\n                      </div>\n\n                      <div\n                        slot=\"dropdown\"\n                        class=\"dropdown\"\n                        @click=${(event: MouseEvent) => {\n                          stopEvent(event);\n                        }}\n                      >\n                        ${ticket.assignee\n                          ? html`\n                              <div\n                                class=\"assigned option-group ${agent &&\n                                ticket.assignee.email == agent.email\n                                  ? 'current-user'\n                                  : ''}\"\n                              >\n                                ${this.renderUser(\n                                  users.find(\n                                    user => user.email === ticket.assignee.email\n                                  )\n                                )}\n                                <temba-button\n                                  name=\"Unassign\"\n                                  primary\n                                  small\n                                  @click=${(event: MouseEvent) => {\n                                    stopEvent(event);\n                                    this.handleTicketAssignment(\n                                      ticket.uuid,\n                                      null\n                                    );\n                                  }}\n                                ></temba-button>\n                              </div>\n                            `\n                          : null}\n                        ${agent &&\n                        (!ticket.assignee ||\n                          agent.email !== ticket.assignee.email)\n                          ? html`\n                              <div\n                                class=\"current-user option-group\"\n                                @click=${(event: MouseEvent) => {\n                                  stopEvent(event);\n                                  this.handleTicketAssignment(\n                                    ticket.uuid,\n                                    agent.email\n                                  );\n                                }}\n                              >\n                                ${this.renderUser(agent)}\n                              </div>\n                            `\n                          : null}\n\n                        <div class=\"options option-group\">\n                          ${this.store.getAssignableUsers().map(user => {\n                            if (\n                              ticket.assignee &&\n                              user.email === ticket.assignee.email\n                            ) {\n                              return null;\n                            }\n\n                            if (user.email === this.agent) {\n                              return null;\n                            }\n                            return html`<div\n                              @click=${(event: MouseEvent) => {\n                                stopEvent(event);\n                                this.handleTicketAssignment(\n                                  ticket.uuid,\n                                  user.email\n                                );\n                              }}\n                            >\n                              ${this.renderUser(user)}\n                            </div>`;\n                          })}\n                        </div>\n                      </div>\n                    </temba-dropdown>\n                  </div>\n                  <temba-tip\n                    text=\"Resolve\"\n                    position=\"left\"\n                    style=\"width:1.5em\"\n                    class=\"resolve\"\n                  >\n                    <temba-icon\n                      size=\"1.25\"\n                      name=\"${Icon.check}\"\n                      @click=${(event: MouseEvent) => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        this.handleClose(ticket.uuid);\n                      }}\n                      ?clickable=${open}\n                    />\n                  </temba-tip>\n                `}\n          </div>\n        </div>\n        <div class=\"body\">${ticket.body}</div>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data && this.data.length > 0) {\n      const tickets = this.data.map(ticket => {\n        return this.renderTicket(ticket);\n      });\n      return html`${tickets}`;\n    }\n\n    return html`<slot name=\"empty\"></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n  getClasses,\n  getFullName,\n  postJSON,\n  renderAvatar,\n  stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n  @property({ type: String })\n  agent: string;\n\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: String })\n  ticket: string;\n\n  @property({ type: Boolean })\n  clickable = false;\n\n  @property({ type: Boolean })\n  expandable = false;\n\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: Object, attribute: false })\n  data: Ticket[];\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      :hover {\n      }\n\n      .ticket.expandable:hover,\n      .ticket.clickable:hover {\n        cursor: pointer;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 2px var(--color-link-primary);\n      }\n\n      .header {\n        display: flex;\n        flex-direction: row;\n        flex-grow: 1;\n      }\n\n      .tickets {\n        display: flex;\n        flex-direction: column;\n        padding: 0.3em 0.8em;\n      }\n\n      .count {\n        margin-left: 0.5em;\n      }\n\n      .ticket {\n        background: #fff;\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0.5em;\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n        transition: all 200ms ease-in-out;\n      }\n\n      .ticket .topic {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin: 0.5em 0.75em 0.5em 0.75em;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n        flex-grow: 2;\n      }\n\n      .ticket .body {\n        max-height: 0px;\n        overflow-y: auto;\n        -webkit-line-clamp: none;\n        white-space: normal;\n        width: initial;\n        padding: 0.5em 0.75em 0em 0.75em;\n        max-height: 40vh;\n        display: none;\n        margin-bottom: 0.5em;\n        border-top: 1px solid #e6e6e6;\n      }\n\n      .ticket.expanded .body {\n        display: block;\n      }\n\n      .status {\n        --icon-color: #999;\n      }\n\n      .ticket.closed {\n        background: #f9f9f9;\n        color: #888;\n      }\n\n      .resolve {\n        color: var(--color-primary-dark);\n      }\n\n      .dropdown {\n        color: rgb(45, 45, 45);\n        z-index: 50;\n        width: 18em;\n      }\n\n      .option-group {\n        padding: 0.4em;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .assigned .user {\n        flex-grow: 1;\n      }\n\n      .assigned {\n        display: flex;\n        align-items: center;\n      }\n\n      .assigned temba-button {\n        margin-right: 0.75em;\n      }\n\n      .assigned .user:hover {\n        cursor: default;\n        background: none;\n      }\n\n      .options {\n        max-height: 40vh;\n        overflow-y: auto;\n        border-bottom: none;\n      }\n\n      .user {\n        display: flex;\n        align-items: center;\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .user:hover {\n        background: var(--color-selection);\n      }\n\n      .user .avatar {\n      }\n\n      .user .name {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        flex-grow: 1;\n      }\n\n      .user temba-button {\n        margin-left: 0.5em;\n      }\n\n      .current-user {\n        font-weight: 400;\n      }\n\n      .details {\n        display: flex;\n        align-items: center;\n        flex-shrink: 1;\n        margin-right: 0.5em;\n      }\n\n      .details .date {\n        padding: 0em 0.5em;\n      }\n\n      .details .toggle {\n        padding-right: 0.5em;\n      }\n    `;\n  }\n\n  prepareData(data: any): any {\n    if (data && data.length) {\n      data.sort((a: Ticket, b: Ticket) => {\n        if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n          return -1;\n        }\n\n        if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n          return 1;\n        }\n\n        if (\n          a.status == TicketStatus.Closed &&\n          b.status == TicketStatus.Closed\n        ) {\n          return (\n            new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n          );\n        }\n\n        return (\n          new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n        );\n      });\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact') || changes.has('ticket')) {\n      if (this.contact) {\n        this.url = `/api/v2/tickets.json?contact=${this.contact}${\n          this.ticket ? '&ticket=' + this.ticket : ''\n        }`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  private renderUser(user: User) {\n    if (!user) {\n      return null;\n    }\n    return html`<div class=\"user\">\n      <div class=\"avatar\">${renderAvatar({ user: user, scale: 0.6 })}</div>\n      <div class=\"name\">${getFullName(user)}</div>\n    </div>`;\n  }\n\n  private handleClose(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'close',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleReopen(uuid: string) {\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  public handleTicketAssignment(uuid: string, email: string) {\n    // if its already assigned to use, it's a noop\n    const ticket = this.data.find(ticket => ticket.uuid === uuid);\n    if (ticket.assignee && ticket.assignee.email === email) {\n      return;\n    }\n\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'assign',\n      assignee: email,\n    })\n      .then(() => {\n        this.refresh();\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n    return true;\n  }\n\n  public renderTicket(ticket: Ticket) {\n    const date = ticket.opened_on;\n    const users = this.store.getAssignableUsers();\n    const agent = users.find(user => user.email === this.agent);\n    return html`\n      <div\n        @click=${() => {\n          if (this.clickable) {\n            this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n          } else if (this.expandable) {\n            this.expanded = !this.expanded;\n          }\n        }}\n        class=\"ticket ${ticket.status} ${getClasses({\n          clickable: this.clickable,\n          expandable: this.expandable,\n          expanded: this.expanded,\n        })}\"\n      >\n        <div class=\"header\">\n          <div class=\"topic\">${ticket.topic.name}</div>\n\n          <div class=\"details\">\n            <div class=\"date\">\n              <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n            </div>\n\n            ${ticket.status === TicketStatus.Closed\n              ? html`<div class=\"reopen\">\n                  <temba-button\n                    primary\n                    small\n                    name=\"Reopen\"\n                    @click=${(event: MouseEvent) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                      this.handleReopen(ticket.uuid);\n                    }}\n                  ></temba-button>\n                </div>`\n              : html`\n                  <div>\n                    <temba-dropdown\n                      right\n                      arrowsize=\"8\"\n                      arrowoffset=\"-44\"\n                      offsety=\"8\"\n                      offsetx=${ticket.assignee ? -42 : -28}\n                    >\n                      <div slot=\"toggle\" class=\"toggle\">\n                        ${ticket.assignee\n                          ? html`\n                              <div>\n                                ${renderAvatar({\n                                  name: ticket.assignee.name,\n                                  user: ticket.assignee,\n                                  scale: 0.7,\n                                })}\n                              </div>\n                            `\n                          : html`\n                              <temba-button\n                                name=\"Assign\"\n                                primary\n                                small\n                              ></temba-button>\n                            `}\n                      </div>\n\n                      <div\n                        slot=\"dropdown\"\n                        class=\"dropdown\"\n                        @click=${(event: MouseEvent) => {\n                          stopEvent(event);\n                        }}\n                      >\n                        ${ticket.assignee\n                          ? html`\n                              <div\n                                class=\"assigned option-group ${agent &&\n                                ticket.assignee.email == agent.email\n                                  ? 'current-user'\n                                  : ''}\"\n                              >\n                                ${this.renderUser(\n                                  users.find(\n                                    user => user.email === ticket.assignee.email\n                                  )\n                                )}\n                                <temba-button\n                                  name=\"Unassign\"\n                                  primary\n                                  small\n                                  @click=${(event: MouseEvent) => {\n                                    stopEvent(event);\n                                    this.handleTicketAssignment(\n                                      ticket.uuid,\n                                      null\n                                    );\n                                  }}\n                                ></temba-button>\n                              </div>\n                            `\n                          : null}\n                        ${agent &&\n                        (!ticket.assignee ||\n                          agent.email !== ticket.assignee.email)\n                          ? html`\n                              <div\n                                class=\"current-user option-group\"\n                                @click=${(event: MouseEvent) => {\n                                  stopEvent(event);\n                                  this.handleTicketAssignment(\n                                    ticket.uuid,\n                                    agent.email\n                                  );\n                                }}\n                              >\n                                ${this.renderUser(agent)}\n                              </div>\n                            `\n                          : null}\n\n                        <div class=\"options option-group\">\n                          ${this.store.getAssignableUsers().map(user => {\n                            if (\n                              ticket.assignee &&\n                              user.email === ticket.assignee.email\n                            ) {\n                              return null;\n                            }\n\n                            if (user.email === this.agent) {\n                              return null;\n                            }\n                            return html`<div\n                              @click=${(event: MouseEvent) => {\n                                stopEvent(event);\n                                this.handleTicketAssignment(\n                                  ticket.uuid,\n                                  user.email\n                                );\n                              }}\n                            >\n                              ${this.renderUser(user)}\n                            </div>`;\n                          })}\n                        </div>\n                      </div>\n                    </temba-dropdown>\n                  </div>\n                  <temba-tip\n                    text=\"Resolve\"\n                    position=\"left\"\n                    style=\"width:1.5em\"\n                    class=\"resolve\"\n                  >\n                    <temba-icon\n                      size=\"1.25\"\n                      name=\"${Icon.check}\"\n                      @click=${(event: MouseEvent) => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        this.handleClose(ticket.uuid);\n                      }}\n                      ?clickable=${open}\n                    />\n                  </temba-tip>\n                `}\n          </div>\n        </div>\n        <div class=\"body\">${ticket.body}</div>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data && this.data.length > 0) {\n      const tickets = this.data.map(ticket => {\n        return this.renderTicket(ticket);\n      });\n      return html`${tickets}`;\n    }\n\n    return html`<slot name=\"empty\"></slot>`;\n  }\n}\n"]}

package/out-tsc/src/contacts/events.js

@@ -538,11 +538,6 @@ export const getEventGroupType = (event, ticket) => {
     }
     return 'verbose';
 };
-export const renderUserAvatar = (user) => {
-    return html `<div style="width:3.5em;font-size:0.8em">
-    ${renderAvatar({ user, position: 'left' })}
-  </div>`;
-};
 export const renderAttachment = (attachment) => {
     const idx = attachment.indexOf(':');
     const attType = attachment.substr(0, idx);
@@ -698,7 +693,7 @@ export const renderMsgEvent = (event, agent) => {
 
     ${!isInbound && event.created_by
         ? html `<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
-          ${renderUserAvatar(event.created_by)}
+          ${renderAvatar({ user: event.created_by })}
         </div>`
         : null}
   </div>`;
@@ -818,8 +813,8 @@ export const renderNoteCreated = (event) => {
         ></temba-date>
       </div>
     </div>
-    <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
-      ${renderUserAvatar(event.created_by)}
+    <div style="margin-left:0.8em;margin-top:0.3em;">
+      ${renderAvatar({ user: event.created_by })}
     </div>
   </div>`;
 };

package/out-tsc/src/contacts/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, EventPart, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport {\n  getClasses,\n  NamedObject,\n  oxford,\n  oxfordFn,\n  oxfordNamed,\n  renderAvatar,\n} from '../utils';\nimport { Icon } from '../vectoricon';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n  return css`\n    .grouping {\n      margin-top: 1em;\n    }\n\n    .grouping.verbose {\n      background: #f9f9f9;\n      color: var(--color-dark);\n      --color-link-primary: rgba(38, 166, 230, 1);\n      pointer-events: none;\n      background: #fefefe;\n      box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;\n      margin-right: -16px;\n      padding-right: 16px;\n      margin-bottom: 1.3em;\n      max-width: 100%;\n    }\n\n    .grouping .items {\n      display: block;\n    }\n\n    .grouping.verbose .items {\n      opacity: 0;\n      max-height: 0;\n      display: flex;\n      flex-direction: column;\n      user-select: none;\n    }\n\n    .grouping.flows .items {\n      padding: 0;\n    }\n\n    .grouping.messages .items {\n      display: flex;\n      flex-direction: column;\n      margin: 0em 0.75em;\n    }\n\n    .grouping.verbose.expanded .items {\n      transition: max-height var(--transition-speed) ease-in-out,\n        opacity var(--transition-speed) ease-in-out;\n      opacity: 1;\n      max-height: 1000px;\n      padding: 1em 1em;\n    }\n\n    .grouping.verbose.expanded {\n      border-top: 1px solid #f3f3f3;\n      border-bottom: 1px solid #f3f3f3;\n    }\n\n    .grouping.verbose.expanded,\n    .grouping.verbose .event-count {\n      pointer-events: auto;\n    }\n\n    .grouping.verbose temba-icon {\n    }\n\n    .grouping.verbose > .event,\n    .grouping.verbose > pre {\n      max-height: 0px;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-top: 0;\n      margin-bottom: 0;\n      opacity: 0;\n    }\n\n    .grouping.verbose .attn {\n      color: #666;\n    }\n\n    .event-count {\n      position: relative;\n      font-size: 0.8em;\n      text-align: center;\n      margin: 0 auto;\n      display: table;\n      padding: 3px 10px;\n      font-weight: 400;\n      color: #999;\n      cursor: pointer;\n      width: 100%;\n      opacity: 1;\n    }\n\n    .event-count temba-icon {\n      display: inline-block;\n      position: absolute;\n      right: 5px;\n      top: 5px;\n    }\n\n    .event-count:hover {\n      color: var(--color-link-primary-hover);\n    }\n\n    .expanded .event-count {\n      padding: 0;\n      pointer-events: none;\n    }\n\n    .grouping.flows {\n      margin-left: 1em;\n      margin-right: 1em;\n      margin-bottom: 1.5em;\n\n      border: 1px solid #f2f2f2;\n      border-radius: var(--curvature);\n      padding: 0.5em 1em;\n    }\n\n    .grouping.flows .event {\n      margin: 0;\n      padding: 0;\n    }\n\n    .grouping.tickets {\n      margin-bottom: 2em;\n    }\n\n    pre {\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    .grouping.verbose.expanded .event,\n    .grouping.verbose.expanded pre {\n      max-height: 500px;\n      opacity: 1;\n    }\n\n    .grouping-close-button {\n      position: relative;\n      display: inline-block;\n      opacity: 0;\n      float: right;\n      --icon-color: #666;\n    }\n\n    .grouping.verbose.expanded:hover .grouping-close-button {\n      opacity: 1;\n    }\n\n    .grouping.messages,\n    .grouping.tickets {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .event {\n      margin: 0.25em 0.5em;\n      border-radius: var(--curvature);\n      flex-grow: 1;\n    }\n\n    .msg {\n      border-radius: calc(var(--curvature) * 2.5);\n      border: 2px solid rgba(100, 100, 100, 0.1);\n      max-width: 300px;\n      word-break: break-word;\n      overflow: hidden;\n    }\n\n    .msg.attachments-1.no-message {\n      border: 2px solid transparent;\n      background-color: transparent !important;\n    }\n\n    .msg .text {\n      padding: var(--event-padding);\n    }\n\n    .event.msg_received .msg {\n      background: rgba(200, 200, 200, 0.1);\n    }\n\n    .event.msg_created,\n    .event.broadcast_created,\n    .event.ivr_created,\n    .event.ticket_note_added {\n      align-self: flex-end;\n    }\n\n    .event.msg_created .msg,\n    .event.broadcast_created .msg,\n    .event.ivr_created .msg {\n      background: var(--color-primary-dark);\n      color: white;\n      font-weight: 400;\n    }\n\n    .msg.automated {\n      background: var(--color-automated) !important;\n    }\n\n    .queued {\n      opacity: 0.3;\n    }\n\n    .optin_requested {\n      --icon-color: var(--color-primary-dark);\n    }\n\n    .webhook_called {\n      --icon-color: #e68628;\n      word-break: break-all;\n    }\n\n    .webhook_called .failed {\n      --icon-color: var(--color-error);\n      color: var(--color-error);\n    }\n\n    .input_labels_added,\n    .contact_name_changed,\n    .contact_field_changed,\n    .contact_urns_changed,\n    .contact_language_changed,\n    .run_result_changed {\n      --icon-color: rgba(1, 193, 175, 1);\n    }\n\n    .email_sent {\n      --icon-color: #8e5ea7;\n    }\n\n    .contact_groups_changed .added {\n      --icon-color: #309c42;\n    }\n    .contact_groups_changed .removed {\n      --icon-color: var(--color-error);\n    }\n\n    .event.error .description,\n    .event.failure .description {\n      color: var(--color-error);\n    }\n\n    .description.error {\n      color: var(--color-error);\n    }\n\n    .info {\n      border: 1px solid rgba(100, 100, 100, 0.2);\n      background: rgba(10, 10, 10, 0.02);\n    }\n\n    .ticket_note_added {\n      max-width: 300px;\n    }\n\n    .note-summary {\n      display: flex;\n      flex-direction: row;\n      font-size: 85%;\n      margin-top: -0.5em;\n      color: rgba(0, 0, 0, 0.6);\n      padding: 8px 3px;\n    }\n\n    .ticket_note_added .description {\n      border: 2px solid rgba(100, 100, 100, 0.1);\n      background: rgb(255, 249, 194);\n      padding: var(--event-padding);\n      font-weight: 400;\n      color: rgba(0, 0, 0, 0.6);\n      border-radius: calc(var(--curvature) * 2.5);\n    }\n\n    .channel_event {\n      --icon-color: rgb(200, 200, 200);\n    }\n\n    .airtime_transferred,\n    .flow_exited,\n    .flow_entered,\n    .ticket_opened,\n    .ticket_reopened,\n    .ticket_closed,\n    .call_started,\n    .campaign_fired {\n      --icon-color: rgba(223, 65, 159, 1);\n    }\n\n    .active-ticket.ticket_opened {\n      padding: 0em 1em;\n    }\n\n    .ticket_closed .inactive .subtext {\n      display: none;\n    }\n\n    .attn {\n      color: var(--color-text);\n    }\n\n    .flow_exited,\n    .flow_entered {\n      align-self: center;\n      max-width: 80%;\n      display: flex;\n      flex-direction: row;\n    }\n\n    .flow_exited temba-icon,\n    .flow_entered temba-icon {\n    }\n\n    .event {\n      display: flex;\n      align-items: center;\n    }\n\n    .event .description {\n      flex-grow: 1;\n    }\n\n    .msg-summary {\n      display: flex;\n      font-size: 85%;\n      color: rgba(0, 0, 0, 0.6);\n      padding: 6px 3px;\n      margin-bottom: 0.5em;\n      margin-top: -0.5em;\n    }\n\n    .msg-summary temba-icon.log {\n      --icon-color: rgba(0, 0, 0, 0.2);\n    }\n\n    .msg-summary temba-icon.log:hover {\n      --icon-color: var(--color-link-primary-hover);\n      cursor: pointer;\n    }\n\n    .msg-summary temba-icon.error {\n      --icon-color: rgba(var(--error-rgb), 0.75);\n    }\n\n    .msg-summary temba-icon.error:hover {\n      --icon-color: var(--color-error);\n      cursor: pointer;\n    }\n\n    .msg-summary temba-icon.broadcast {\n      --icon-color: rgba(90, 90, 90, 0.5);\n    }\n\n    .msg-summary * {\n      display: flex;\n      margin-right: 1px;\n      margin-left: 1px;\n    }\n\n    .unsupported {\n      border: 1px solid #f2f2f2;\n      color: #999;\n      padding: 0.5em 1em;\n      border-radius: var(--curvature);\n    }\n\n    .optin {\n      align-items: center;\n      padding: 0 0.2em;\n    }\n\n    .time {\n      padding: 0.3em 1px;\n    }\n\n    .subtext .time {\n      padding: 0em;\n    }\n\n    .status {\n      padding: 0.3em 3px;\n    }\n\n    .separator {\n      padding: 0.3em 0px;\n    }\n\n    .recipients {\n      padding: 0.3em 3px;\n    }\n\n    .verbose temba-icon,\n    .flows temba-icon,\n    .tickets temba-icon {\n      margin-right: 0.75em;\n    }\n\n    .attn {\n      display: inline-block;\n      font-weight: 500;\n      margin: 0px 2px;\n      word-break: break-all;\n      white-space: break-spaces;\n    }\n\n    .subtext {\n      font-size: 80%;\n    }\n\n    .body-pre {\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      font-size: 90%;\n    }\n\n    a,\n    .linked {\n      color: var(--color-link-primary);\n      cursor: pointer;\n    }\n\n    a:hover,\n    .linked:hover {\n      text-decoration: underline;\n      color: var(--color-link-primary-hover);\n    }\n\n    temba-icon.error {\n      --icon-color: var(--color-error);\n    }\n\n    .delivery-error {\n      --icon-color: var(--color-error);\n      margin-right: 0.25em;\n    }\n\n    .flow {\n      --icon-color: #ddd;\n      background: #fff;\n      width: 18px;\n      height: 18px;\n      padding-top: 4px;\n      padding-left: 9px;\n      border: 0px solid #f3f3f3;\n    }\n\n    .assigned {\n      color: #777;\n      max-width: 300px;\n      margin-left: auto;\n      margin-right: auto;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n\n    .assigned .attn {\n      color: #777;\n    }\n\n    .attachments {\n      display: flex;\n      flex-wrap: wrap;\n      margin: -0.2em;\n    }\n\n    .attachment {\n      flex: 1 0 45%;\n      border-top: 0.05em solid transparent;\n      border-left: 0.05em solid transparent;\n      margin-top: 0.05em;\n      margin-left: 0.05em;\n    }\n  `;\n};\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport enum Events {\n  MESSAGE_CREATED = 'msg_created',\n  MESSAGE_RECEIVED = 'msg_received',\n  BROADCAST_CREATED = 'broadcast_created',\n  IVR_CREATED = 'ivr_created',\n  FLOW_ENTERED = 'flow_entered',\n  FLOW_EXITED = 'flow_exited',\n  RUN_RESULT_CHANGED = 'run_result_changed',\n  CONTACT_FIELD_CHANGED = 'contact_field_changed',\n  CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n  CONTACT_NAME_CHANGED = 'contact_name_changed',\n  CONTACT_URNS_CHANGED = 'contact_urns_changed',\n  CAMPAIGN_FIRED = 'campaign_fired',\n  CHANNEL_EVENT = 'channel_event',\n  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n  WEBHOOK_CALLED = 'webhook_called',\n  AIRTIME_TRANSFERRED = 'airtime_transferred',\n  CALL_STARTED = 'call_started',\n  EMAIL_SENT = 'email_sent',\n  INPUT_LABELS_ADDED = 'input_labels_added',\n  NOTE_CREATED = 'note_created',\n  TICKET_ASSIGNED = 'ticket_assigned',\n  TICKET_NOTE_ADDED = 'ticket_note_added',\n  TICKET_CLOSED = 'ticket_closed',\n  TICKET_OPENED = 'ticket_opened',\n  TICKET_REOPENED = 'ticket_reopened',\n  OPTIN_REQUESTED = 'optin_requested',\n  ERROR = 'error',\n  FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n  type: string;\n  created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  msg_type: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n  to: string[];\n  subject: string;\n  body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    body: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n  labels: ObjectReference[];\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ErrorMessageEvent extends ContactEvent {\n  text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n  name: string;\n  value: string;\n  category: string;\n  input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n  status: string;\n  status_code: number;\n  elapsed_ms: number;\n  logs_url: string;\n  url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  desired_amount: string;\n  actual_amount: string;\n  logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n  campaign: { uuid: string; id: number; name: string };\n  campaign_event: {\n    id: number;\n    offset_display: string;\n    relative_to: { key: string; name: string };\n  };\n  fired_result: string;\n}\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n  if (!event) {\n    return 'messages';\n  }\n\n  switch (event.type) {\n    case Events.TICKET_ASSIGNED:\n    case Events.TICKET_OPENED:\n    case Events.TICKET_CLOSED:\n    case Events.TICKET_REOPENED:\n      if (!ticket) {\n        return 'verbose';\n      }\n\n      if ((event as TicketEvent).ticket.uuid === ticket) {\n        return 'tickets';\n      }\n\n      break;\n    case Events.FLOW_ENTERED:\n    case Events.FLOW_EXITED:\n      return 'flows';\n    case Events.BROADCAST_CREATED:\n    case Events.MESSAGE_CREATED:\n    case Events.MESSAGE_RECEIVED:\n    case Events.IVR_CREATED:\n    case Events.TICKET_NOTE_ADDED:\n    case Events.NOTE_CREATED:\n      return 'messages';\n  }\n  return 'verbose';\n};\n\nexport const renderUserAvatar = (user: User) => {\n  return html`<div style=\"width:3.5em;font-size:0.8em\">\n    ${renderAvatar({ user, position: 'left' })}\n  </div>`;\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n  const idx = attachment.indexOf(':');\n  const attType = attachment.substr(0, idx);\n  const url = attachment.substr(idx + 1);\n  const [mediaType, ext] = attType.split('/', 2);\n\n  let inner = null;\n  if (mediaType === 'image') {\n    inner = html`\n      <img src=\"${url}\" style=\"height:auto;width:100%;display:block;\" />\n    `;\n  } else if (ext === 'pdf') {\n    return html`<div\n      style=\"width:100%;height:300px;border-radius:calc(var(--curvature) * 2.5);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden\"\n    ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n  } else if (mediaType === 'video') {\n    return html`<video\n      style=\"border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);max-width:400px\"\n      height=\"auto\"\n      controls\n    >\n      <source src=\"${url}\" type=\"video/mp4\" />\n    </video> `;\n  } else if (mediaType === 'audio') {\n    return html`<audio\n      style=\"border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n      src=\"${url}\"\n      type=\"${attType}\"\n      controls\n    >\n      <a target=\"_\" href=\"${url}\">${url}</a>\n    </audio>`;\n  } else if (attType === 'geo') {\n    const [lat, long] = url.split(',');\n    const latFloat = parseFloat(lat);\n    const longFloat = parseFloat(long);\n    const geo = `${lat}000000%2C${long}000000`;\n\n    return html` <iframe\n      style=\"border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n      width=\"300\"\n      height=\"300\"\n      frameborder=\"0\"\n      scrolling=\"no\"\n      marginheight=\"0\"\n      marginwidth=\"0\"\n      src=\"https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -\n      0.005}000000%2C${latFloat - 0.005}%2C${longFloat +\n      0.005}000000%2C${latFloat +\n      0.005}000000&amp;layer=mapnik&amp;marker=${geo}\"\n    ></iframe>`;\n  } else {\n    return html`<div style=\"display:flex\">\n      <temba-icon name=\"${Icon.download}\"></temba-icon>\n      <div>Attachment ${ext}</div>\n    </div>`;\n  }\n\n  return html`<div style=\"\">${inner}</div>`;\n};\n\nexport const renderMsgEvent = (\n  event: MsgEvent,\n  agent: string\n): TemplateResult => {\n  const isInbound = event.type === Events.MESSAGE_RECEIVED;\n  const isError = event.status === 'E';\n  const isFailure = event.status === 'F';\n\n  // summary items which appear under the message bubble\n  const summary: TemplateResult[] = [];\n\n  if (event.logs_url) {\n    summary.push(html` <div class=\"icon-link\">\n      <temba-icon\n        onclick=\"goto(event)\"\n        href=\"${event.logs_url}\"\n        name=\"${Icon.log}\"\n        class=\"log ${isError || isFailure ? 'error' : ''}\"\n      ></temba-icon>\n    </div>`);\n  } else if (isError) {\n    summary.push(\n      html`<temba-icon\n        title=\"Message delivery error\"\n        name=\"${Icon.error}\"\n        class=\"delivery-error\"\n      ></temba-icon>`\n    );\n  } else if (isFailure) {\n    summary.push(\n      html`<temba-icon\n        title=\"Message delivery failure: ${event.failed_reason_display}\"\n        name=\"${Icon.error}\"\n        class=\"delivery-error\"\n      ></temba-icon>`\n    );\n  }\n\n  if (event.type == 'broadcast_created') {\n    summary.push(html`<temba-icon\n      size=\"1\"\n      class=\"broadcast\"\n      name=\"${Icon.broadcast}\"\n    ></temba-icon>`);\n\n    if (event.recipient_count > 1) {\n      summary.push(\n        html`<div class=\"recipients\">${event.recipient_count} contacts</div>`\n      );\n    }\n    summary.push(html`<div class=\"separator\">•</div>`);\n  }\n\n  if (event.optin) {\n    summary.push(\n      html`<div class=\"optin\">${event.optin.name}</div>\n        <div class=\"separator\">•</div>`\n    );\n  }\n\n  if (event.status === 'Q') {\n    summary.push(html`<div>Queued</div>`);\n  }\n\n  summary.push(\n    html`<temba-date\n      class=\"time\"\n      value=\"${event.created_on}\"\n      display=\"duration\"\n    ></temba-date>`\n  );\n\n  return html`<div\n    style=\"display:flex;align-items:flex-start\"\n    class=${getClasses({ queued: event.status === 'Q' })}\n  >\n    <div style=\"display:flex;flex-direction:column\">\n      <div\n        class=\"${event.msg.text ? '' : 'no-message'} attachments-${(\n          event.msg.attachments || []\n        ).length} ${getClasses({\n          msg: true,\n          automated: !isInbound && !event.created_by,\n        })}\"\n      >\n        ${event.msg.text\n          ? html` <div class=\"text\">${event.msg.text}</div> `\n          : null}\n        ${event.msg.attachments\n          ? html`<div class=\"attachments\">\n              ${event.msg.attachments.map(\n                attachment =>\n                  html` <div class=\"attachment\">\n                    ${renderAttachment(attachment)}\n                  </div>`\n              )}\n            </div> `\n          : null}\n      </div>\n\n      ${!event.msg.text && !event.msg.attachments && !event.optin\n        ? html`<div class=\"unsupported\">Unsupported Message</div>`\n        : null}\n\n      <div\n        class=\"msg-summary\"\n        style=\"align-items:center;flex-direction:row${isInbound\n          ? '-reverse'\n          : ''}\"\n      >\n        <div style=\"flex-grow:1\"></div>\n        ${summary}\n      </div>\n    </div>\n\n    ${!isInbound && event.created_by\n      ? html`<div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.9em\">\n          ${renderUserAvatar(event.created_by)}\n        </div>`\n      : null}\n  </div>`;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n  let verb = 'Interrupted';\n  let icon = Icon.flow_interrupted;\n\n  if (event.status !== 'I') {\n    if (event.type === Events.FLOW_ENTERED) {\n      verb = 'Started';\n      icon = Icon.flow;\n    } else {\n      verb = 'Completed';\n      icon = Icon.flow;\n    }\n  }\n\n  return html`\n    <temba-icon name=\"${icon}\"></temba-icon>\n    <div class=\"description\">\n      ${verb}\n      <span\n        class=\"linked\"\n        href=\"/flow/editor/${event.flow.uuid}/\"\n        onclick=\"goto(event)\"\n      >\n        ${event.flow.name}\n      </span>\n    </div>\n  `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n  if (event.name.startsWith('_')) {\n    return null;\n  }\n  return html`\n    <temba-icon name=\"${Icon.updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">${event.name}</div>\n      to\n      <div class=\"attn\">${event.value}</div>\n      ${event.category\n        ? html`with category\n            <div class=\"attn\">${event.category}</div>`\n        : null}\n    </div>\n  `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      ${event.value\n        ? html`Updated\n            <div class=\"attn\">${event.field.name}</div>\n            to\n            <div class=\"attn\">${event.value.text}</div>`\n        : html`Cleared\n            <div class=\"attn\">${event.field.name}</div>`}\n    </div>\n  `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">Name</div>\n      to\n      <div class=\"attn\">${event.name}</div>\n    </div>\n  `;\n};\n\nexport const renderContactURNsChanged = (\n  event: URNsChangedEvent\n): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">URNs</div>\n      to\n        ${oxfordFn(\n          event.urns,\n          (urn: string) =>\n            html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n        )}\n      </div>\n    </div>\n  `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.email}\"></temba-icon>\n    <div class=\"description\">\n      Email sent to\n      <div class=\"attn\">${oxford(event.to, 'and')}</div>\n      with subject\n      <div class=\"attn\">${event.subject}</div>\n    </div>\n  `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.label}\"></temba-icon>\n    <div class=\"description\">\n      Message labeled with\n      <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n    </div>\n  `;\n};\n\nexport const renderNoteCreated = (event: TicketEvent): TemplateResult => {\n  return html` <div style=\"display:flex;align-items:flex-start\">\n    <div style=\"display:flex;flex-direction:column\">\n      <div class=\"description\">${event.note}</div>\n      <div class=\"note-summary\">\n        <div style=\"flex-grow:1\"></div>\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n    <div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.8em\">\n      ${renderUserAvatar(event.created_by)}\n    </div>\n  </div>`;\n};\n\nexport const renderTicketAction = (\n  event: TicketEvent,\n  action: string,\n  grouped: boolean\n): TemplateResult => {\n  if (grouped) {\n    return html`<div class=\"\" style=\"display: flex\">\n      <temba-icon name=\"${Icon.inbox}\"></temba-icon>\n      <div class=\"description\">\n        ${getDisplayName(event.created_by)} ${action} a\n        <span\n          onclick=\"goto(event)\"\n          class=\"linked\"\n          href=\"/ticket/all/open/${event.ticket.uuid}/\"\n        >\n          ticket\n        </span>\n      </div>\n    </div>`;\n  }\n\n  return html`\n    <div class=\"assigned active\">\n      <div style=\"text-align:center\">\n        ${event.created_by\n          ? html` ${getDisplayName(event.created_by)} ${action} this ticket `\n          : html` This ticket was ${action} `}\n      </div>\n      <div class=\"subtext\" style=\"justify-content:center\">\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n  `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n  return html`\n    <div class=\"assigned active\">\n      <div style=\"text-align:center\">\n        ${event.assignee\n          ? event.assignee.id === event.created_by.id\n            ? html`${getDisplayName(event.created_by)} took this ticket`\n            : html`${getDisplayName(event.created_by)} assigned this ticket to\n                <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n          : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n      </div>\n      <div class=\"subtext\" style=\"justify-content:center\">\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n  `;\n};\n\nexport const renderTicketOpened = (\n  event: TicketEvent,\n  handleClose: (uuid: string) => void,\n  grouped: boolean\n): TemplateResult => {\n  if (grouped) {\n    return html`<div class=\"\" style=\"display: flex\">\n      <temba-icon name=\"${Icon.inbox}\"></temba-icon>\n      <div class=\"description\">\n        ${event.ticket.topic.name}\n        <span\n          class=\"linked\"\n          onclick=\"goto(event)\"\n          href=\"/ticket/all/open/${event.ticket.uuid}\"\n          >ticket</span\n        >\n        was opened\n      </div>\n    </div>`;\n  } else {\n    return html`\n      <div>\n        <div style=\"text-align:center\">\n          ${getDisplayName(event.created_by)} opened this ticket\n        </div>\n        <div class=\"subtext\" style=\"justify-content:center\">\n          <temba-date\n            class=\"time\"\n            value=\"${event.created_on}\"\n            display=\"duration\"\n          ></temba-date>\n        </div>\n      </div>\n    `;\n  }\n};\n\nexport const renderErrorMessage = (\n  event: ErrorMessageEvent\n): TemplateResult => {\n  return html`\n    <temba-icon\n      name=\"${Icon.error}\"\n      style=\"--icon-color:var(--color-error)\"\n    ></temba-icon>\n    <div class=\"description\">\n      ${event.text}\n      ${event.type === Events.FAILURE\n        ? html`<div>Run ended prematurely, check the flow design.</div>`\n        : null}\n    </div>\n  `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n  return html`\n    <div\n      class=\"${event.status === 'success' ? '' : 'failed'}\"\n      style=\"display: flex\"\n    >\n      <temba-icon name=\"${Icon.webhook}\"></temba-icon>\n      <div class=\"description\">\n        ${event.status === 'success'\n          ? html`Successfully called ${event.url}`\n          : html`Failed to call ${event.url}`}\n      </div>\n    </div>\n  `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n  event: AirtimeTransferredEvent\n): TemplateResult => {\n  if (parseFloat(event.actual_amount) === 0) {\n    return html`<temba-icon\n        name=\"${Icon.error}\"\n        style=\"--icon-color: var(--color-error)\"\n      ></temba-icon>\n      <div class=\"description error\">Airtime transfer failed</div>`;\n  }\n\n  return html`<temba-icon name=\"${Icon.airtime}\"></temba-icon>\n    <div class=\"description\">\n      Transferred\n      <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n      of airtime\n    </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.call}\"></temba-icon>\n    <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n  event: ContactLanguageChangedEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Language updated to <span class=\"attn\">${event.language}</span>\n    </div>`;\n};\n\nexport const renderOptinRequested = (\n  event: OptinRequestedEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.optin_requested}\"></temba-icon>\n    <div class=\"description\">\n      Requested opt-in for <span class=\"attn\">${event.optin.name}</span>\n    </div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n  let eventMessage: string | TemplateResult = '';\n  let icon = Icon.call;\n\n  if (event.event.type === 'mt_miss') {\n    eventMessage = 'Missed outgoing call';\n    icon = Icon.call_missed;\n  } else if (event.event.type === 'mo_miss') {\n    eventMessage = 'Missed incoming call';\n    icon = Icon.call_missed;\n  } else if (event.event.type === 'new_conversation') {\n    eventMessage = 'Started Conversation';\n    icon = Icon.event;\n  } else if (event.channel_event_type === 'welcome_message') {\n    eventMessage = 'Welcome Message Sent';\n    icon = Icon.event;\n  } else if (event.event.type === 'referral') {\n    eventMessage = 'Referred';\n    icon = Icon.event;\n  } else if (event.event.type === 'follow') {\n    eventMessage = 'Followed';\n    icon = Icon.event;\n  } else if (event.event.type === 'stop_contact') {\n    eventMessage = 'Stopped';\n    icon = Icon.contact_stopped;\n  } else if (event.event.type === 'mt_call') {\n    eventMessage = 'Outgoing Phone Call';\n  } else if (event.event.type == 'mo_call') {\n    eventMessage = 'Incoming Phone call';\n  } else if (event.event.type == 'optin') {\n    eventMessage = html`Opted in to\n      <span class=\"attn\">${event.event.optin?.name}</span>`;\n    icon = Icon.optin;\n  } else if (event.event.type == 'optout') {\n    eventMessage = html`Opted out of\n      <span class=\"attn\">${event.event.optin?.name}</span>`;\n    icon = Icon.optout;\n  }\n\n  return html`<temba-icon name=\"${icon}\"></temba-icon>\n    <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n  event: CampaignFiredEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.campaign}\"></temba-icon>\n    <div class=\"description\">\n      Campaign\n      <span\n        class=\"linked\"\n        onclick=\"goto(event, this)\"\n        href=\"/campaign/read/${event.campaign.uuid}/\"\n        >${event.campaign.name}</span\n      >\n      ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n      <span\n        class=\"linked\"\n        onclick=\"goto(event, this)\"\n        href=\"/campaignevent/read/${event.campaign.uuid}/${event.campaign_event\n          .id}/\"\n      >\n        ${event.campaign_event.offset_display}\n        ${event.campaign_event.relative_to.name}</span\n      >\n    </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n  event: ContactGroupsEvent\n): TemplateResult => {\n  const groups = event.groups_added || event.groups_removed;\n  const added = !!event.groups_added;\n  return html`\n    <temba-icon\n      name=\"${Icon.users}\"\n      class=\"${getClasses({ added: added, removed: !added })}\"\n    ></temba-icon>\n    <div class=\"description\">\n      ${added ? 'Added to' : 'Removed from'}\n      ${oxfordFn(\n        groups,\n        (group: ObjectReference) =>\n          html`<span\n            class=\"linked\"\n            onclick=\"goto(event)\"\n            href=\"/contact/filter/${group.uuid}\"\n            >${group.name}</span\n          >`\n      )}\n      ${event.type === Events.FAILURE\n        ? html`<div>Run ended prematurely, check the flow design.</div>`\n        : null}\n    </div>\n  `;\n};\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, EventPart, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport {\n  getClasses,\n  NamedObject,\n  oxford,\n  oxfordFn,\n  oxfordNamed,\n  renderAvatar,\n} from '../utils';\nimport { Icon } from '../vectoricon';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n  return css`\n    .grouping {\n      margin-top: 1em;\n    }\n\n    .grouping.verbose {\n      background: #f9f9f9;\n      color: var(--color-dark);\n      --color-link-primary: rgba(38, 166, 230, 1);\n      pointer-events: none;\n      background: #fefefe;\n      box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;\n      margin-right: -16px;\n      padding-right: 16px;\n      margin-bottom: 1.3em;\n      max-width: 100%;\n    }\n\n    .grouping .items {\n      display: block;\n    }\n\n    .grouping.verbose .items {\n      opacity: 0;\n      max-height: 0;\n      display: flex;\n      flex-direction: column;\n      user-select: none;\n    }\n\n    .grouping.flows .items {\n      padding: 0;\n    }\n\n    .grouping.messages .items {\n      display: flex;\n      flex-direction: column;\n      margin: 0em 0.75em;\n    }\n\n    .grouping.verbose.expanded .items {\n      transition: max-height var(--transition-speed) ease-in-out,\n        opacity var(--transition-speed) ease-in-out;\n      opacity: 1;\n      max-height: 1000px;\n      padding: 1em 1em;\n    }\n\n    .grouping.verbose.expanded {\n      border-top: 1px solid #f3f3f3;\n      border-bottom: 1px solid #f3f3f3;\n    }\n\n    .grouping.verbose.expanded,\n    .grouping.verbose .event-count {\n      pointer-events: auto;\n    }\n\n    .grouping.verbose temba-icon {\n    }\n\n    .grouping.verbose > .event,\n    .grouping.verbose > pre {\n      max-height: 0px;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-top: 0;\n      margin-bottom: 0;\n      opacity: 0;\n    }\n\n    .grouping.verbose .attn {\n      color: #666;\n    }\n\n    .event-count {\n      position: relative;\n      font-size: 0.8em;\n      text-align: center;\n      margin: 0 auto;\n      display: table;\n      padding: 3px 10px;\n      font-weight: 400;\n      color: #999;\n      cursor: pointer;\n      width: 100%;\n      opacity: 1;\n    }\n\n    .event-count temba-icon {\n      display: inline-block;\n      position: absolute;\n      right: 5px;\n      top: 5px;\n    }\n\n    .event-count:hover {\n      color: var(--color-link-primary-hover);\n    }\n\n    .expanded .event-count {\n      padding: 0;\n      pointer-events: none;\n    }\n\n    .grouping.flows {\n      margin-left: 1em;\n      margin-right: 1em;\n      margin-bottom: 1.5em;\n\n      border: 1px solid #f2f2f2;\n      border-radius: var(--curvature);\n      padding: 0.5em 1em;\n    }\n\n    .grouping.flows .event {\n      margin: 0;\n      padding: 0;\n    }\n\n    .grouping.tickets {\n      margin-bottom: 2em;\n    }\n\n    pre {\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    .grouping.verbose.expanded .event,\n    .grouping.verbose.expanded pre {\n      max-height: 500px;\n      opacity: 1;\n    }\n\n    .grouping-close-button {\n      position: relative;\n      display: inline-block;\n      opacity: 0;\n      float: right;\n      --icon-color: #666;\n    }\n\n    .grouping.verbose.expanded:hover .grouping-close-button {\n      opacity: 1;\n    }\n\n    .grouping.messages,\n    .grouping.tickets {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .event {\n      margin: 0.25em 0.5em;\n      border-radius: var(--curvature);\n      flex-grow: 1;\n    }\n\n    .msg {\n      border-radius: calc(var(--curvature) * 2.5);\n      border: 2px solid rgba(100, 100, 100, 0.1);\n      max-width: 300px;\n      word-break: break-word;\n      overflow: hidden;\n    }\n\n    .msg.attachments-1.no-message {\n      border: 2px solid transparent;\n      background-color: transparent !important;\n    }\n\n    .msg .text {\n      padding: var(--event-padding);\n    }\n\n    .event.msg_received .msg {\n      background: rgba(200, 200, 200, 0.1);\n    }\n\n    .event.msg_created,\n    .event.broadcast_created,\n    .event.ivr_created,\n    .event.ticket_note_added {\n      align-self: flex-end;\n    }\n\n    .event.msg_created .msg,\n    .event.broadcast_created .msg,\n    .event.ivr_created .msg {\n      background: var(--color-primary-dark);\n      color: white;\n      font-weight: 400;\n    }\n\n    .msg.automated {\n      background: var(--color-automated) !important;\n    }\n\n    .queued {\n      opacity: 0.3;\n    }\n\n    .optin_requested {\n      --icon-color: var(--color-primary-dark);\n    }\n\n    .webhook_called {\n      --icon-color: #e68628;\n      word-break: break-all;\n    }\n\n    .webhook_called .failed {\n      --icon-color: var(--color-error);\n      color: var(--color-error);\n    }\n\n    .input_labels_added,\n    .contact_name_changed,\n    .contact_field_changed,\n    .contact_urns_changed,\n    .contact_language_changed,\n    .run_result_changed {\n      --icon-color: rgba(1, 193, 175, 1);\n    }\n\n    .email_sent {\n      --icon-color: #8e5ea7;\n    }\n\n    .contact_groups_changed .added {\n      --icon-color: #309c42;\n    }\n    .contact_groups_changed .removed {\n      --icon-color: var(--color-error);\n    }\n\n    .event.error .description,\n    .event.failure .description {\n      color: var(--color-error);\n    }\n\n    .description.error {\n      color: var(--color-error);\n    }\n\n    .info {\n      border: 1px solid rgba(100, 100, 100, 0.2);\n      background: rgba(10, 10, 10, 0.02);\n    }\n\n    .ticket_note_added {\n      max-width: 300px;\n    }\n\n    .note-summary {\n      display: flex;\n      flex-direction: row;\n      font-size: 85%;\n      margin-top: -0.5em;\n      color: rgba(0, 0, 0, 0.6);\n      padding: 8px 3px;\n    }\n\n    .ticket_note_added .description {\n      border: 2px solid rgba(100, 100, 100, 0.1);\n      background: rgb(255, 249, 194);\n      padding: var(--event-padding);\n      font-weight: 400;\n      color: rgba(0, 0, 0, 0.6);\n      border-radius: calc(var(--curvature) * 2.5);\n    }\n\n    .channel_event {\n      --icon-color: rgb(200, 200, 200);\n    }\n\n    .airtime_transferred,\n    .flow_exited,\n    .flow_entered,\n    .ticket_opened,\n    .ticket_reopened,\n    .ticket_closed,\n    .call_started,\n    .campaign_fired {\n      --icon-color: rgba(223, 65, 159, 1);\n    }\n\n    .active-ticket.ticket_opened {\n      padding: 0em 1em;\n    }\n\n    .ticket_closed .inactive .subtext {\n      display: none;\n    }\n\n    .attn {\n      color: var(--color-text);\n    }\n\n    .flow_exited,\n    .flow_entered {\n      align-self: center;\n      max-width: 80%;\n      display: flex;\n      flex-direction: row;\n    }\n\n    .flow_exited temba-icon,\n    .flow_entered temba-icon {\n    }\n\n    .event {\n      display: flex;\n      align-items: center;\n    }\n\n    .event .description {\n      flex-grow: 1;\n    }\n\n    .msg-summary {\n      display: flex;\n      font-size: 85%;\n      color: rgba(0, 0, 0, 0.6);\n      padding: 6px 3px;\n      margin-bottom: 0.5em;\n      margin-top: -0.5em;\n    }\n\n    .msg-summary temba-icon.log {\n      --icon-color: rgba(0, 0, 0, 0.2);\n    }\n\n    .msg-summary temba-icon.log:hover {\n      --icon-color: var(--color-link-primary-hover);\n      cursor: pointer;\n    }\n\n    .msg-summary temba-icon.error {\n      --icon-color: rgba(var(--error-rgb), 0.75);\n    }\n\n    .msg-summary temba-icon.error:hover {\n      --icon-color: var(--color-error);\n      cursor: pointer;\n    }\n\n    .msg-summary temba-icon.broadcast {\n      --icon-color: rgba(90, 90, 90, 0.5);\n    }\n\n    .msg-summary * {\n      display: flex;\n      margin-right: 1px;\n      margin-left: 1px;\n    }\n\n    .unsupported {\n      border: 1px solid #f2f2f2;\n      color: #999;\n      padding: 0.5em 1em;\n      border-radius: var(--curvature);\n    }\n\n    .optin {\n      align-items: center;\n      padding: 0 0.2em;\n    }\n\n    .time {\n      padding: 0.3em 1px;\n    }\n\n    .subtext .time {\n      padding: 0em;\n    }\n\n    .status {\n      padding: 0.3em 3px;\n    }\n\n    .separator {\n      padding: 0.3em 0px;\n    }\n\n    .recipients {\n      padding: 0.3em 3px;\n    }\n\n    .verbose temba-icon,\n    .flows temba-icon,\n    .tickets temba-icon {\n      margin-right: 0.75em;\n    }\n\n    .attn {\n      display: inline-block;\n      font-weight: 500;\n      margin: 0px 2px;\n      word-break: break-all;\n      white-space: break-spaces;\n    }\n\n    .subtext {\n      font-size: 80%;\n    }\n\n    .body-pre {\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      font-size: 90%;\n    }\n\n    a,\n    .linked {\n      color: var(--color-link-primary);\n      cursor: pointer;\n    }\n\n    a:hover,\n    .linked:hover {\n      text-decoration: underline;\n      color: var(--color-link-primary-hover);\n    }\n\n    temba-icon.error {\n      --icon-color: var(--color-error);\n    }\n\n    .delivery-error {\n      --icon-color: var(--color-error);\n      margin-right: 0.25em;\n    }\n\n    .flow {\n      --icon-color: #ddd;\n      background: #fff;\n      width: 18px;\n      height: 18px;\n      padding-top: 4px;\n      padding-left: 9px;\n      border: 0px solid #f3f3f3;\n    }\n\n    .assigned {\n      color: #777;\n      max-width: 300px;\n      margin-left: auto;\n      margin-right: auto;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n\n    .assigned .attn {\n      color: #777;\n    }\n\n    .attachments {\n      display: flex;\n      flex-wrap: wrap;\n      margin: -0.2em;\n    }\n\n    .attachment {\n      flex: 1 0 45%;\n      border-top: 0.05em solid transparent;\n      border-left: 0.05em solid transparent;\n      margin-top: 0.05em;\n      margin-left: 0.05em;\n    }\n  `;\n};\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport enum Events {\n  MESSAGE_CREATED = 'msg_created',\n  MESSAGE_RECEIVED = 'msg_received',\n  BROADCAST_CREATED = 'broadcast_created',\n  IVR_CREATED = 'ivr_created',\n  FLOW_ENTERED = 'flow_entered',\n  FLOW_EXITED = 'flow_exited',\n  RUN_RESULT_CHANGED = 'run_result_changed',\n  CONTACT_FIELD_CHANGED = 'contact_field_changed',\n  CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n  CONTACT_NAME_CHANGED = 'contact_name_changed',\n  CONTACT_URNS_CHANGED = 'contact_urns_changed',\n  CAMPAIGN_FIRED = 'campaign_fired',\n  CHANNEL_EVENT = 'channel_event',\n  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n  WEBHOOK_CALLED = 'webhook_called',\n  AIRTIME_TRANSFERRED = 'airtime_transferred',\n  CALL_STARTED = 'call_started',\n  EMAIL_SENT = 'email_sent',\n  INPUT_LABELS_ADDED = 'input_labels_added',\n  NOTE_CREATED = 'note_created',\n  TICKET_ASSIGNED = 'ticket_assigned',\n  TICKET_NOTE_ADDED = 'ticket_note_added',\n  TICKET_CLOSED = 'ticket_closed',\n  TICKET_OPENED = 'ticket_opened',\n  TICKET_REOPENED = 'ticket_reopened',\n  OPTIN_REQUESTED = 'optin_requested',\n  ERROR = 'error',\n  FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n  type: string;\n  created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  msg_type: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n  to: string[];\n  subject: string;\n  body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    body: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n  labels: ObjectReference[];\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ErrorMessageEvent extends ContactEvent {\n  text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n  name: string;\n  value: string;\n  category: string;\n  input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n  status: string;\n  status_code: number;\n  elapsed_ms: number;\n  logs_url: string;\n  url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  desired_amount: string;\n  actual_amount: string;\n  logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n  campaign: { uuid: string; id: number; name: string };\n  campaign_event: {\n    id: number;\n    offset_display: string;\n    relative_to: { key: string; name: string };\n  };\n  fired_result: string;\n}\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n  if (!event) {\n    return 'messages';\n  }\n\n  switch (event.type) {\n    case Events.TICKET_ASSIGNED:\n    case Events.TICKET_OPENED:\n    case Events.TICKET_CLOSED:\n    case Events.TICKET_REOPENED:\n      if (!ticket) {\n        return 'verbose';\n      }\n\n      if ((event as TicketEvent).ticket.uuid === ticket) {\n        return 'tickets';\n      }\n\n      break;\n    case Events.FLOW_ENTERED:\n    case Events.FLOW_EXITED:\n      return 'flows';\n    case Events.BROADCAST_CREATED:\n    case Events.MESSAGE_CREATED:\n    case Events.MESSAGE_RECEIVED:\n    case Events.IVR_CREATED:\n    case Events.TICKET_NOTE_ADDED:\n    case Events.NOTE_CREATED:\n      return 'messages';\n  }\n  return 'verbose';\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n  const idx = attachment.indexOf(':');\n  const attType = attachment.substr(0, idx);\n  const url = attachment.substr(idx + 1);\n  const [mediaType, ext] = attType.split('/', 2);\n\n  let inner = null;\n  if (mediaType === 'image') {\n    inner = html`\n      <img src=\"${url}\" style=\"height:auto;width:100%;display:block;\" />\n    `;\n  } else if (ext === 'pdf') {\n    return html`<div\n      style=\"width:100%;height:300px;border-radius:calc(var(--curvature) * 2.5);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden\"\n    ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n  } else if (mediaType === 'video') {\n    return html`<video\n      style=\"border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);max-width:400px\"\n      height=\"auto\"\n      controls\n    >\n      <source src=\"${url}\" type=\"video/mp4\" />\n    </video> `;\n  } else if (mediaType === 'audio') {\n    return html`<audio\n      style=\"border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n      src=\"${url}\"\n      type=\"${attType}\"\n      controls\n    >\n      <a target=\"_\" href=\"${url}\">${url}</a>\n    </audio>`;\n  } else if (attType === 'geo') {\n    const [lat, long] = url.split(',');\n    const latFloat = parseFloat(lat);\n    const longFloat = parseFloat(long);\n    const geo = `${lat}000000%2C${long}000000`;\n\n    return html` <iframe\n      style=\"border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);\"\n      width=\"300\"\n      height=\"300\"\n      frameborder=\"0\"\n      scrolling=\"no\"\n      marginheight=\"0\"\n      marginwidth=\"0\"\n      src=\"https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -\n      0.005}000000%2C${latFloat - 0.005}%2C${longFloat +\n      0.005}000000%2C${latFloat +\n      0.005}000000&amp;layer=mapnik&amp;marker=${geo}\"\n    ></iframe>`;\n  } else {\n    return html`<div style=\"display:flex\">\n      <temba-icon name=\"${Icon.download}\"></temba-icon>\n      <div>Attachment ${ext}</div>\n    </div>`;\n  }\n\n  return html`<div style=\"\">${inner}</div>`;\n};\n\nexport const renderMsgEvent = (\n  event: MsgEvent,\n  agent: string\n): TemplateResult => {\n  const isInbound = event.type === Events.MESSAGE_RECEIVED;\n  const isError = event.status === 'E';\n  const isFailure = event.status === 'F';\n\n  // summary items which appear under the message bubble\n  const summary: TemplateResult[] = [];\n\n  if (event.logs_url) {\n    summary.push(html` <div class=\"icon-link\">\n      <temba-icon\n        onclick=\"goto(event)\"\n        href=\"${event.logs_url}\"\n        name=\"${Icon.log}\"\n        class=\"log ${isError || isFailure ? 'error' : ''}\"\n      ></temba-icon>\n    </div>`);\n  } else if (isError) {\n    summary.push(\n      html`<temba-icon\n        title=\"Message delivery error\"\n        name=\"${Icon.error}\"\n        class=\"delivery-error\"\n      ></temba-icon>`\n    );\n  } else if (isFailure) {\n    summary.push(\n      html`<temba-icon\n        title=\"Message delivery failure: ${event.failed_reason_display}\"\n        name=\"${Icon.error}\"\n        class=\"delivery-error\"\n      ></temba-icon>`\n    );\n  }\n\n  if (event.type == 'broadcast_created') {\n    summary.push(html`<temba-icon\n      size=\"1\"\n      class=\"broadcast\"\n      name=\"${Icon.broadcast}\"\n    ></temba-icon>`);\n\n    if (event.recipient_count > 1) {\n      summary.push(\n        html`<div class=\"recipients\">${event.recipient_count} contacts</div>`\n      );\n    }\n    summary.push(html`<div class=\"separator\">•</div>`);\n  }\n\n  if (event.optin) {\n    summary.push(\n      html`<div class=\"optin\">${event.optin.name}</div>\n        <div class=\"separator\">•</div>`\n    );\n  }\n\n  if (event.status === 'Q') {\n    summary.push(html`<div>Queued</div>`);\n  }\n\n  summary.push(\n    html`<temba-date\n      class=\"time\"\n      value=\"${event.created_on}\"\n      display=\"duration\"\n    ></temba-date>`\n  );\n\n  return html`<div\n    style=\"display:flex;align-items:flex-start\"\n    class=${getClasses({ queued: event.status === 'Q' })}\n  >\n    <div style=\"display:flex;flex-direction:column\">\n      <div\n        class=\"${event.msg.text ? '' : 'no-message'} attachments-${(\n          event.msg.attachments || []\n        ).length} ${getClasses({\n          msg: true,\n          automated: !isInbound && !event.created_by,\n        })}\"\n      >\n        ${event.msg.text\n          ? html` <div class=\"text\">${event.msg.text}</div> `\n          : null}\n        ${event.msg.attachments\n          ? html`<div class=\"attachments\">\n              ${event.msg.attachments.map(\n                attachment =>\n                  html` <div class=\"attachment\">\n                    ${renderAttachment(attachment)}\n                  </div>`\n              )}\n            </div> `\n          : null}\n      </div>\n\n      ${!event.msg.text && !event.msg.attachments && !event.optin\n        ? html`<div class=\"unsupported\">Unsupported Message</div>`\n        : null}\n\n      <div\n        class=\"msg-summary\"\n        style=\"align-items:center;flex-direction:row${isInbound\n          ? '-reverse'\n          : ''}\"\n      >\n        <div style=\"flex-grow:1\"></div>\n        ${summary}\n      </div>\n    </div>\n\n    ${!isInbound && event.created_by\n      ? html`<div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.9em\">\n          ${renderAvatar({ user: event.created_by })}\n        </div>`\n      : null}\n  </div>`;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n  let verb = 'Interrupted';\n  let icon = Icon.flow_interrupted;\n\n  if (event.status !== 'I') {\n    if (event.type === Events.FLOW_ENTERED) {\n      verb = 'Started';\n      icon = Icon.flow;\n    } else {\n      verb = 'Completed';\n      icon = Icon.flow;\n    }\n  }\n\n  return html`\n    <temba-icon name=\"${icon}\"></temba-icon>\n    <div class=\"description\">\n      ${verb}\n      <span\n        class=\"linked\"\n        href=\"/flow/editor/${event.flow.uuid}/\"\n        onclick=\"goto(event)\"\n      >\n        ${event.flow.name}\n      </span>\n    </div>\n  `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n  if (event.name.startsWith('_')) {\n    return null;\n  }\n  return html`\n    <temba-icon name=\"${Icon.updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">${event.name}</div>\n      to\n      <div class=\"attn\">${event.value}</div>\n      ${event.category\n        ? html`with category\n            <div class=\"attn\">${event.category}</div>`\n        : null}\n    </div>\n  `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      ${event.value\n        ? html`Updated\n            <div class=\"attn\">${event.field.name}</div>\n            to\n            <div class=\"attn\">${event.value.text}</div>`\n        : html`Cleared\n            <div class=\"attn\">${event.field.name}</div>`}\n    </div>\n  `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">Name</div>\n      to\n      <div class=\"attn\">${event.name}</div>\n    </div>\n  `;\n};\n\nexport const renderContactURNsChanged = (\n  event: URNsChangedEvent\n): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Updated\n      <div class=\"attn\">URNs</div>\n      to\n        ${oxfordFn(\n          event.urns,\n          (urn: string) =>\n            html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n        )}\n      </div>\n    </div>\n  `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.email}\"></temba-icon>\n    <div class=\"description\">\n      Email sent to\n      <div class=\"attn\">${oxford(event.to, 'and')}</div>\n      with subject\n      <div class=\"attn\">${event.subject}</div>\n    </div>\n  `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n  return html`\n    <temba-icon name=\"${Icon.label}\"></temba-icon>\n    <div class=\"description\">\n      Message labeled with\n      <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n    </div>\n  `;\n};\n\nexport const renderNoteCreated = (event: TicketEvent): TemplateResult => {\n  return html` <div style=\"display:flex;align-items:flex-start\">\n    <div style=\"display:flex;flex-direction:column\">\n      <div class=\"description\">${event.note}</div>\n      <div class=\"note-summary\">\n        <div style=\"flex-grow:1\"></div>\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n    <div style=\"margin-left:0.8em;margin-top:0.3em;\">\n      ${renderAvatar({ user: event.created_by })}\n    </div>\n  </div>`;\n};\n\nexport const renderTicketAction = (\n  event: TicketEvent,\n  action: string,\n  grouped: boolean\n): TemplateResult => {\n  if (grouped) {\n    return html`<div class=\"\" style=\"display: flex\">\n      <temba-icon name=\"${Icon.inbox}\"></temba-icon>\n      <div class=\"description\">\n        ${getDisplayName(event.created_by)} ${action} a\n        <span\n          onclick=\"goto(event)\"\n          class=\"linked\"\n          href=\"/ticket/all/open/${event.ticket.uuid}/\"\n        >\n          ticket\n        </span>\n      </div>\n    </div>`;\n  }\n\n  return html`\n    <div class=\"assigned active\">\n      <div style=\"text-align:center\">\n        ${event.created_by\n          ? html` ${getDisplayName(event.created_by)} ${action} this ticket `\n          : html` This ticket was ${action} `}\n      </div>\n      <div class=\"subtext\" style=\"justify-content:center\">\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n  `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n  return html`\n    <div class=\"assigned active\">\n      <div style=\"text-align:center\">\n        ${event.assignee\n          ? event.assignee.id === event.created_by.id\n            ? html`${getDisplayName(event.created_by)} took this ticket`\n            : html`${getDisplayName(event.created_by)} assigned this ticket to\n                <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n          : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n      </div>\n      <div class=\"subtext\" style=\"justify-content:center\">\n        <temba-date\n          class=\"time\"\n          value=\"${event.created_on}\"\n          display=\"duration\"\n        ></temba-date>\n      </div>\n    </div>\n  `;\n};\n\nexport const renderTicketOpened = (\n  event: TicketEvent,\n  handleClose: (uuid: string) => void,\n  grouped: boolean\n): TemplateResult => {\n  if (grouped) {\n    return html`<div class=\"\" style=\"display: flex\">\n      <temba-icon name=\"${Icon.inbox}\"></temba-icon>\n      <div class=\"description\">\n        ${event.ticket.topic.name}\n        <span\n          class=\"linked\"\n          onclick=\"goto(event)\"\n          href=\"/ticket/all/open/${event.ticket.uuid}\"\n          >ticket</span\n        >\n        was opened\n      </div>\n    </div>`;\n  } else {\n    return html`\n      <div>\n        <div style=\"text-align:center\">\n          ${getDisplayName(event.created_by)} opened this ticket\n        </div>\n        <div class=\"subtext\" style=\"justify-content:center\">\n          <temba-date\n            class=\"time\"\n            value=\"${event.created_on}\"\n            display=\"duration\"\n          ></temba-date>\n        </div>\n      </div>\n    `;\n  }\n};\n\nexport const renderErrorMessage = (\n  event: ErrorMessageEvent\n): TemplateResult => {\n  return html`\n    <temba-icon\n      name=\"${Icon.error}\"\n      style=\"--icon-color:var(--color-error)\"\n    ></temba-icon>\n    <div class=\"description\">\n      ${event.text}\n      ${event.type === Events.FAILURE\n        ? html`<div>Run ended prematurely, check the flow design.</div>`\n        : null}\n    </div>\n  `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n  return html`\n    <div\n      class=\"${event.status === 'success' ? '' : 'failed'}\"\n      style=\"display: flex\"\n    >\n      <temba-icon name=\"${Icon.webhook}\"></temba-icon>\n      <div class=\"description\">\n        ${event.status === 'success'\n          ? html`Successfully called ${event.url}`\n          : html`Failed to call ${event.url}`}\n      </div>\n    </div>\n  `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n  event: AirtimeTransferredEvent\n): TemplateResult => {\n  if (parseFloat(event.actual_amount) === 0) {\n    return html`<temba-icon\n        name=\"${Icon.error}\"\n        style=\"--icon-color: var(--color-error)\"\n      ></temba-icon>\n      <div class=\"description error\">Airtime transfer failed</div>`;\n  }\n\n  return html`<temba-icon name=\"${Icon.airtime}\"></temba-icon>\n    <div class=\"description\">\n      Transferred\n      <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n      of airtime\n    </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.call}\"></temba-icon>\n    <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n  event: ContactLanguageChangedEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.contact_updated}\"></temba-icon>\n    <div class=\"description\">\n      Language updated to <span class=\"attn\">${event.language}</span>\n    </div>`;\n};\n\nexport const renderOptinRequested = (\n  event: OptinRequestedEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.optin_requested}\"></temba-icon>\n    <div class=\"description\">\n      Requested opt-in for <span class=\"attn\">${event.optin.name}</span>\n    </div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n  let eventMessage: string | TemplateResult = '';\n  let icon = Icon.call;\n\n  if (event.event.type === 'mt_miss') {\n    eventMessage = 'Missed outgoing call';\n    icon = Icon.call_missed;\n  } else if (event.event.type === 'mo_miss') {\n    eventMessage = 'Missed incoming call';\n    icon = Icon.call_missed;\n  } else if (event.event.type === 'new_conversation') {\n    eventMessage = 'Started Conversation';\n    icon = Icon.event;\n  } else if (event.channel_event_type === 'welcome_message') {\n    eventMessage = 'Welcome Message Sent';\n    icon = Icon.event;\n  } else if (event.event.type === 'referral') {\n    eventMessage = 'Referred';\n    icon = Icon.event;\n  } else if (event.event.type === 'follow') {\n    eventMessage = 'Followed';\n    icon = Icon.event;\n  } else if (event.event.type === 'stop_contact') {\n    eventMessage = 'Stopped';\n    icon = Icon.contact_stopped;\n  } else if (event.event.type === 'mt_call') {\n    eventMessage = 'Outgoing Phone Call';\n  } else if (event.event.type == 'mo_call') {\n    eventMessage = 'Incoming Phone call';\n  } else if (event.event.type == 'optin') {\n    eventMessage = html`Opted in to\n      <span class=\"attn\">${event.event.optin?.name}</span>`;\n    icon = Icon.optin;\n  } else if (event.event.type == 'optout') {\n    eventMessage = html`Opted out of\n      <span class=\"attn\">${event.event.optin?.name}</span>`;\n    icon = Icon.optout;\n  }\n\n  return html`<temba-icon name=\"${icon}\"></temba-icon>\n    <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n  event: CampaignFiredEvent\n): TemplateResult => {\n  return html`<temba-icon name=\"${Icon.campaign}\"></temba-icon>\n    <div class=\"description\">\n      Campaign\n      <span\n        class=\"linked\"\n        onclick=\"goto(event, this)\"\n        href=\"/campaign/read/${event.campaign.uuid}/\"\n        >${event.campaign.name}</span\n      >\n      ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n      <span\n        class=\"linked\"\n        onclick=\"goto(event, this)\"\n        href=\"/campaignevent/read/${event.campaign.uuid}/${event.campaign_event\n          .id}/\"\n      >\n        ${event.campaign_event.offset_display}\n        ${event.campaign_event.relative_to.name}</span\n      >\n    </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n  event: ContactGroupsEvent\n): TemplateResult => {\n  const groups = event.groups_added || event.groups_removed;\n  const added = !!event.groups_added;\n  return html`\n    <temba-icon\n      name=\"${Icon.users}\"\n      class=\"${getClasses({ added: added, removed: !added })}\"\n    ></temba-icon>\n    <div class=\"description\">\n      ${added ? 'Added to' : 'Removed from'}\n      ${oxfordFn(\n        groups,\n        (group: ObjectReference) =>\n          html`<span\n            class=\"linked\"\n            onclick=\"goto(event)\"\n            href=\"/contact/filter/${group.uuid}\"\n            >${group.name}</span\n          >`\n      )}\n      ${event.type === Events.FAILURE\n        ? html`<div>Run ended prematurely, check the flow design.</div>`\n        : null}\n    </div>\n  `;\n};\n"]}