@nyaruka/temba-components 0.91.6 → 0.92.0

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

@@ -1,543 +1,5 @@
-import { css, html } from 'lit';
-import { getClasses, oxford, oxfordFn, oxfordNamed } from '../utils';
+import { html } from 'lit';
 import { Icon } from '../vectoricon';
-import { getDisplayName } from './helpers';
-export const getEventStyles = () => {
-    return css `
-    .grouping {
-      margin-top: 1em;
-    }
-
-    .grouping.verbose {
-      background: #f9f9f9;
-      color: var(--color-dark);
-      --color-link-primary: rgba(38, 166, 230, 1);
-      pointer-events: none;
-      background: #fefefe;
-      box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;
-      margin-right: -16px;
-      padding-right: 16px;
-      margin-bottom: 1.3em;
-      max-width: 100%;
-    }
-
-    .grouping .items {
-      display: block;
-    }
-
-    .grouping.verbose .items {
-      opacity: 0;
-      max-height: 0;
-      display: flex;
-      flex-direction: column;
-      user-select: auto;
-    }
-
-    .grouping.flows .items {
-      padding: 0;
-    }
-
-    .grouping.messages .items {
-      display: flex;
-      flex-direction: column;
-      margin: 0em 0.75em;
-    }
-
-    .grouping.verbose.expanded .items {
-      transition: max-height var(--transition-speed) ease-in-out,
-        opacity var(--transition-speed) ease-in-out;
-      opacity: 1;
-      max-height: 1000px;
-      padding: 1em 1em;
-    }
-
-    .grouping.verbose.expanded {
-      border-top: 1px solid #f3f3f3;
-      border-bottom: 1px solid #f3f3f3;
-    }
-
-    .grouping.verbose.expanded,
-    .grouping.verbose .event-count {
-      pointer-events: auto;
-    }
-
-    .grouping.verbose temba-icon {
-    }
-
-    .grouping.verbose > .event,
-    .grouping.verbose > pre {
-      max-height: 0px;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-      margin-bottom: 0;
-      opacity: 0;
-    }
-
-    .grouping.verbose .attn {
-      color: #666;
-    }
-
-    .event-count {
-      position: relative;
-      font-size: 0.8em;
-      text-align: center;
-      margin: 0 auto;
-      display: table;
-      padding: 3px 10px;
-      font-weight: 400;
-      color: #999;
-      cursor: pointer;
-      width: 100%;
-      opacity: 1;
-    }
-
-    .event-count temba-icon {
-      display: inline-block;
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
-
-    .event-count:hover {
-      color: var(--color-link-primary-hover);
-    }
-
-    .expanded .event-count {
-      padding: 0;
-      pointer-events: none;
-    }
-
-    .grouping.flows {
-      margin-left: 1em;
-      margin-right: 1em;
-      margin-bottom: 1.5em;
-
-      border: 1px solid #f2f2f2;
-      border-radius: var(--curvature);
-      padding: 0.5em 1em;
-    }
-
-    .grouping.flows .event {
-      margin: 0;
-      padding: 0;
-    }
-
-    .grouping.tickets {
-      margin-bottom: 2em;
-    }
-
-    pre {
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-
-    .grouping.verbose.expanded .event,
-    .grouping.verbose.expanded pre {
-      max-height: 500px;
-      opacity: 1;
-    }
-
-    .grouping-close-button {
-      position: relative;
-      display: inline-block;
-      opacity: 0;
-      float: right;
-      --icon-color: #666;
-    }
-
-    .grouping.verbose.expanded:hover .grouping-close-button {
-      opacity: 1;
-    }
-
-    .grouping.messages,
-    .grouping.tickets {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .event {
-      margin: 0.25em 0.5em;
-      border-radius: var(--curvature);
-      flex-grow: 1;
-    }
-
-    .msg {
-      border-radius: calc(var(--curvature) * 2.5);
-      border: 2px solid rgba(100, 100, 100, 0.1);
-      max-width: 300px;
-      word-break: break-word;
-      overflow: hidden;
-    }
-
-    .msg.attachments-1.no-message {
-      border: 2px solid transparent;
-      background-color: transparent !important;
-    }
-
-    .msg .text {
-      padding: var(--event-padding);
-    }
-
-    .event.msg_received .msg {
-      background: rgba(200, 200, 200, 0.1);
-    }
-
-    .event.msg_created,
-    .event.broadcast_created,
-    .event.ivr_created,
-    .event.ticket_note_added {
-      align-self: flex-end;
-    }
-
-    .event.msg_created .msg,
-    .event.broadcast_created .msg,
-    .event.ivr_created .msg {
-      background: var(--color-primary-dark);
-      color: white;
-      font-weight: 400;
-    }
-
-    .msg.automated {
-      background: var(--color-automated) !important;
-    }
-
-    .queued {
-      opacity: 0.3;
-    }
-
-    .optin_requested {
-      --icon-color: var(--color-primary-dark);
-    }
-
-    .webhook_called {
-      --icon-color: #e68628;
-      word-break: break-all;
-    }
-
-    .webhook_called .failed {
-      --icon-color: var(--color-error);
-      color: var(--color-error);
-    }
-
-    .input_labels_added,
-    .contact_name_changed,
-    .contact_field_changed,
-    .contact_urns_changed,
-    .contact_language_changed,
-    .run_result_changed {
-      --icon-color: rgba(1, 193, 175, 1);
-    }
-
-    .email_sent {
-      --icon-color: #8e5ea7;
-    }
-
-    .contact_groups_changed .added {
-      --icon-color: #309c42;
-    }
-    .contact_groups_changed .removed {
-      --icon-color: var(--color-error);
-    }
-
-    .event.error .description,
-    .event.failure .description {
-      color: var(--color-error);
-    }
-
-    .description.error {
-      color: var(--color-error);
-    }
-
-    .info {
-      border: 1px solid rgba(100, 100, 100, 0.2);
-      background: rgba(10, 10, 10, 0.02);
-    }
-
-    .ticket_note_added {
-      max-width: 300px;
-    }
-
-    .note-summary {
-      display: flex;
-      flex-direction: row;
-      font-size: 85%;
-      margin-top: -0.5em;
-      color: rgba(0, 0, 0, 0.6);
-      padding: 8px 3px;
-    }
-
-    .ticket_note_added .description {
-      border: 2px solid rgba(100, 100, 100, 0.1);
-      background: rgb(255, 249, 194);
-      padding: var(--event-padding);
-      font-weight: 400;
-      color: rgba(0, 0, 0, 0.6);
-      border-radius: calc(var(--curvature) * 2.5);
-    }
-
-    .channel_event {
-      --icon-color: rgb(200, 200, 200);
-    }
-
-    .airtime_transferred,
-    .flow_exited,
-    .flow_entered,
-    .ticket_opened,
-    .ticket_reopened,
-    .ticket_closed,
-    .call_started,
-    .campaign_fired {
-      --icon-color: rgba(223, 65, 159, 1);
-    }
-
-    .active-ticket.ticket_opened {
-      padding: 0em 1em;
-    }
-
-    .ticket_closed .inactive .subtext {
-      display: none;
-    }
-
-    .attn {
-      color: var(--color-text);
-    }
-
-    .flow_exited,
-    .flow_entered {
-      align-self: center;
-      max-width: 80%;
-      display: flex;
-      flex-direction: row;
-    }
-
-    .flow_exited temba-icon,
-    .flow_entered temba-icon {
-    }
-
-    .event {
-      display: flex;
-      align-items: center;
-    }
-
-    .event .description {
-      flex-grow: 1;
-    }
-
-    .msg-summary {
-      display: flex;
-      font-size: 85%;
-      color: rgba(0, 0, 0, 0.6);
-      padding: 6px 3px;
-      margin-bottom: 0.5em;
-      margin-top: -0.5em;
-    }
-
-    .msg-summary temba-icon.log {
-      --icon-color: rgba(0, 0, 0, 0.2);
-    }
-
-    .msg-summary temba-icon.log:hover {
-      --icon-color: var(--color-link-primary-hover);
-      cursor: pointer;
-    }
-
-    .msg-summary temba-icon.error {
-      --icon-color: rgba(var(--error-rgb), 0.75);
-    }
-
-    .msg-summary temba-icon.error:hover {
-      --icon-color: var(--color-error);
-      cursor: pointer;
-    }
-
-    .msg-summary temba-icon.broadcast {
-      --icon-color: rgba(90, 90, 90, 0.5);
-    }
-
-    .msg-summary * {
-      display: flex;
-      margin-right: 1px;
-      margin-left: 1px;
-    }
-
-    .unsupported {
-      border: 1px solid #f2f2f2;
-      color: #999;
-      padding: 0.5em 1em;
-      border-radius: var(--curvature);
-    }
-
-    .optin {
-      align-items: center;
-      padding: 0 0.2em;
-    }
-
-    .time {
-      padding: 0.3em 1px;
-    }
-
-    .subtext .time {
-      padding: 0em;
-    }
-
-    .status {
-      padding: 0.3em 3px;
-    }
-
-    .separator {
-      padding: 0.3em 0px;
-    }
-
-    .recipients {
-      padding: 0.3em 3px;
-    }
-
-    .verbose temba-icon,
-    .flows temba-icon,
-    .tickets temba-icon {
-      margin-right: 0.75em;
-    }
-
-    .attn {
-      display: inline-block;
-      font-weight: 500;
-      margin: 0px 2px;
-      word-break: break-all;
-      white-space: break-spaces;
-    }
-
-    .subtext {
-      font-size: 80%;
-    }
-
-    .body-pre {
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      font-size: 90%;
-    }
-
-    a,
-    .linked {
-      color: var(--color-link-primary);
-      cursor: pointer;
-    }
-
-    a:hover,
-    .linked:hover {
-      text-decoration: underline;
-      color: var(--color-link-primary-hover);
-    }
-
-    temba-icon.error {
-      --icon-color: var(--color-error);
-    }
-
-    .delivery-error {
-      --icon-color: var(--color-error);
-      margin-right: 0.25em;
-    }
-
-    .flow {
-      --icon-color: #ddd;
-      background: #fff;
-      width: 18px;
-      height: 18px;
-      padding-top: 4px;
-      padding-left: 9px;
-      border: 0px solid #f3f3f3;
-    }
-
-    .assigned {
-      color: #777;
-      max-width: 300px;
-      margin-left: auto;
-      margin-right: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 10px;
-    }
-
-    .assigned .attn {
-      color: #777;
-    }
-
-    .attachments {
-      display: flex;
-      flex-wrap: wrap;
-      margin: -0.2em;
-    }
-
-    .attachment {
-      flex: 1 0 45%;
-      border-top: 0.05em solid transparent;
-      border-left: 0.05em solid transparent;
-      margin-top: 0.05em;
-      margin-left: 0.05em;
-    }
-  `;
-};
-export var Events;
-(function (Events) {
-    Events["MESSAGE_CREATED"] = "msg_created";
-    Events["MESSAGE_RECEIVED"] = "msg_received";
-    Events["BROADCAST_CREATED"] = "broadcast_created";
-    Events["IVR_CREATED"] = "ivr_created";
-    Events["FLOW_ENTERED"] = "flow_entered";
-    Events["FLOW_EXITED"] = "flow_exited";
-    Events["RUN_RESULT_CHANGED"] = "run_result_changed";
-    Events["CONTACT_FIELD_CHANGED"] = "contact_field_changed";
-    Events["CONTACT_GROUPS_CHANGED"] = "contact_groups_changed";
-    Events["CONTACT_NAME_CHANGED"] = "contact_name_changed";
-    Events["CONTACT_URNS_CHANGED"] = "contact_urns_changed";
-    Events["CAMPAIGN_FIRED"] = "campaign_fired";
-    Events["CHANNEL_EVENT"] = "channel_event";
-    Events["CONTACT_LANGUAGE_CHANGED"] = "contact_language_changed";
-    Events["WEBHOOK_CALLED"] = "webhook_called";
-    Events["AIRTIME_TRANSFERRED"] = "airtime_transferred";
-    Events["CALL_STARTED"] = "call_started";
-    Events["EMAIL_SENT"] = "email_sent";
-    Events["INPUT_LABELS_ADDED"] = "input_labels_added";
-    Events["NOTE_CREATED"] = "note_created";
-    Events["TICKET_ASSIGNED"] = "ticket_assigned";
-    Events["TICKET_NOTE_ADDED"] = "ticket_note_added";
-    Events["TICKET_CLOSED"] = "ticket_closed";
-    Events["TICKET_OPENED"] = "ticket_opened";
-    Events["TICKET_REOPENED"] = "ticket_reopened";
-    Events["OPTIN_REQUESTED"] = "optin_requested";
-    Events["ERROR"] = "error";
-    Events["FAILURE"] = "failure";
-})(Events || (Events = {}));
-export const getEventGroupType = (event, ticket) => {
-    if (!event) {
-        return 'messages';
-    }
-    switch (event.type) {
-        case Events.TICKET_ASSIGNED:
-        case Events.TICKET_OPENED:
-        case Events.TICKET_CLOSED:
-        case Events.TICKET_REOPENED:
-            if (!ticket) {
-                return 'verbose';
-            }
-            if (event.ticket.uuid === ticket) {
-                return 'tickets';
-            }
-            break;
-        case Events.FLOW_ENTERED:
-        case Events.FLOW_EXITED:
-            return 'flows';
-        case Events.BROADCAST_CREATED:
-        case Events.MESSAGE_CREATED:
-        case Events.MESSAGE_RECEIVED:
-        case Events.IVR_CREATED:
-        case Events.TICKET_NOTE_ADDED:
-        case Events.NOTE_CREATED:
-            return 'messages';
-    }
-    return 'verbose';
-};
 export const renderAttachment = (attachment) => {
     const idx = attachment.indexOf(':');
     const attType = attachment.substr(0, idx);
@@ -600,463 +62,4 @@ export const renderAttachment = (attachment) => {
     }
     return html `<div style="">${inner}</div>`;
 };
-export const renderMsgEvent = (event) => {
-    const isInbound = event.type === Events.MESSAGE_RECEIVED;
-    const isError = event.status === 'E';
-    const isFailure = event.status === 'F';
-    // summary items which appear under the message bubble
-    const summary = [];
-    if (event.logs_url) {
-        summary.push(html ` <div class="icon-link">
-      <temba-icon
-        onclick="goto(event)"
-        href="${event.logs_url}"
-        name="${Icon.log}"
-        class="log ${isError || isFailure ? 'error' : ''}"
-      ></temba-icon>
-    </div>`);
-    }
-    else if (isError) {
-        summary.push(html `<temba-icon
-        title="Message delivery error"
-        name="${Icon.error}"
-        class="delivery-error"
-      ></temba-icon>`);
-    }
-    else if (isFailure) {
-        summary.push(html `<temba-icon
-        title="Message delivery failure: ${event.failed_reason_display}"
-        name="${Icon.error}"
-        class="delivery-error"
-      ></temba-icon>`);
-    }
-    if (event.type == 'broadcast_created') {
-        summary.push(html `<temba-icon
-      size="1"
-      class="broadcast"
-      name="${Icon.broadcast}"
-    ></temba-icon>`);
-        if (event.recipient_count > 1) {
-            summary.push(html `<div class="recipients">${event.recipient_count} contacts</div>`);
-        }
-        summary.push(html `<div class="separator">•</div>`);
-    }
-    if (event.optin) {
-        summary.push(html `<div class="optin">${event.optin.name}</div>
-        <div class="separator">•</div>`);
-    }
-    if (event.status === 'Q') {
-        summary.push(html `<div>Queued</div>`);
-    }
-    summary.push(html `<temba-date
-      class="time"
-      value="${event.created_on}"
-      display="duration"
-    ></temba-date>`);
-    return html `<div
-    style="display:flex;align-items:flex-start"
-    class=${getClasses({ queued: event.status === 'Q' })}
-  >
-    <div style="display:flex;flex-direction:column">
-      <div
-        class="${event.msg.text ? '' : 'no-message'} attachments-${(event.msg.attachments || []).length} ${getClasses({
-        msg: true,
-        automated: !isInbound && !event.created_by
-    })}"
-      >
-        ${event.msg.text
-        ? html ` <div class="text">${event.msg.text}</div> `
-        : null}
-        ${event.msg.attachments
-        ? html `<div class="attachments">
-              ${event.msg.attachments.map((attachment) => html ` <div class="attachment">
-                    ${renderAttachment(attachment)}
-                  </div>`)}
-            </div> `
-        : null}
-      </div>
-
-      ${!event.msg.text && !event.msg.attachments && !event.optin
-        ? html `<div class="unsupported">Unsupported Message</div>`
-        : null}
-
-      <div
-        class="msg-summary"
-        style="align-items:center;flex-direction:row${isInbound
-        ? '-reverse'
-        : ''}"
-      >
-        <div style="flex-grow:1"></div>
-        ${summary}
-      </div>
-    </div>
-
-    ${!isInbound && event.created_by
-        ? html `<temba-user
-          style="margin-left:0.5em"
-          email=${event.created_by.email}
-        ></temba-user>`
-        : null}
-  </div>`;
-};
-export const renderFlowEvent = (event) => {
-    let verb = 'Interrupted';
-    let icon = Icon.flow_interrupted;
-    if (event.status !== 'I') {
-        if (event.type === Events.FLOW_ENTERED) {
-            verb = 'Started';
-            icon = Icon.flow;
-        }
-        else {
-            verb = 'Completed';
-            icon = Icon.flow;
-        }
-    }
-    return html `
-    <temba-icon name="${icon}"></temba-icon>
-    <div class="description">
-      ${verb}
-      <span
-        class="linked"
-        href="/flow/editor/${event.flow.uuid}/"
-        onclick="goto(event)"
-      >
-        ${event.flow.name}
-      </span>
-    </div>
-  `;
-};
-export const renderResultEvent = (event) => {
-    if (event.name.startsWith('_')) {
-        return null;
-    }
-    return html `
-    <temba-icon name="${Icon.updated}"></temba-icon>
-    <div class="description">
-      Updated
-      <div class="attn">${event.name}</div>
-      to
-      <div class="attn">${event.value}</div>
-      ${event.category
-        ? html `with category
-            <div class="attn">${event.category}</div>`
-        : null}
-    </div>
-  `;
-};
-export const renderUpdateEvent = (event) => {
-    return html `
-    <temba-icon name="${Icon.contact_updated}"></temba-icon>
-    <div class="description">
-      ${event.value
-        ? html `Updated
-            <div class="attn">${event.field.name}</div>
-            to
-            <div class="attn">${event.value.text}</div>`
-        : html `Cleared
-            <div class="attn">${event.field.name}</div>`}
-    </div>
-  `;
-};
-export const renderNameChanged = (event) => {
-    return html `
-    <temba-icon name="${Icon.contact_updated}"></temba-icon>
-    <div class="description">
-      Updated
-      <div class="attn">Name</div>
-      to
-      <div class="attn">${event.name}</div>
-    </div>
-  `;
-};
-export const renderContactURNsChanged = (event) => {
-    return html `
-    <temba-icon name="${Icon.contact_updated}"></temba-icon>
-    <div class="description">
-      Updated
-      <div class="attn">URNs</div>
-      to
-        ${oxfordFn(event.urns, (urn) => html `<div class="attn">${urn.split(':')[1].split('?')[0]}</div>`)}
-      </div>
-    </div>
-  `;
-};
-export const renderEmailSent = (event) => {
-    return html `
-    <temba-icon name="${Icon.email}"></temba-icon>
-    <div class="description">
-      Email sent to
-      <div class="attn">${oxford(event.to, 'and')}</div>
-      with subject
-      <div class="attn">${event.subject}</div>
-    </div>
-  `;
-};
-export const renderLabelsAdded = (event) => {
-    return html `
-    <temba-icon name="${Icon.label}"></temba-icon>
-    <div class="description">
-      Message labeled with
-      <div class="attn">${oxfordNamed(event.labels, 'and')}</div>
-    </div>
-  `;
-};
-export const renderNoteCreated = (event) => {
-    return html ` <div style="display:flex;align-items:flex-start">
-    <div style="display:flex;flex-direction:column">
-      <div class="description">${event.note}</div>
-      <div class="note-summary">
-        <div style="flex-grow:1"></div>
-        <temba-date
-          class="time"
-          value="${event.created_on}"
-          display="duration"
-        ></temba-date>
-      </div>
-    </div>
-    <temba-user email=${event.created_by.email}></temba-user>
-  </div>`;
-};
-export const renderTicketAction = (event, action, grouped) => {
-    if (grouped) {
-        return html `<div class="" style="display: flex">
-      <temba-icon name="${Icon.inbox}"></temba-icon>
-      <div class="description">
-        ${getDisplayName(event.created_by)} ${action} a
-        <span
-          onclick="goto(event)"
-          class="linked"
-          href="/ticket/all/open/${event.ticket.uuid}/"
-        >
-          ticket
-        </span>
-      </div>
-    </div>`;
-    }
-    return html `
-    <div class="assigned active">
-      <div style="text-align:center">
-        ${event.created_by
-        ? html ` ${getDisplayName(event.created_by)} ${action} this ticket `
-        : html ` This ticket was ${action} `}
-      </div>
-      <div class="subtext" style="justify-content:center">
-        <temba-date
-          class="time"
-          value="${event.created_on}"
-          display="duration"
-        ></temba-date>
-      </div>
-    </div>
-  `;
-};
-export const renderTicketAssigned = (event) => {
-    return html `
-    <div class="assigned active">
-      <div style="text-align:center">
-        ${event.assignee
-        ? event.assignee.id === event.created_by.id
-            ? html `${getDisplayName(event.created_by)} took this ticket`
-            : html `${getDisplayName(event.created_by)} assigned this ticket to
-                <div class="attn">${getDisplayName(event.assignee)}</div>`
-        : html `${getDisplayName(event.created_by)} unassigned this ticket`}
-      </div>
-      <div class="subtext" style="justify-content:center">
-        <temba-date
-          class="time"
-          value="${event.created_on}"
-          display="duration"
-        ></temba-date>
-      </div>
-    </div>
-  `;
-};
-export const renderTicketOpened = (event, handleClose, grouped) => {
-    if (grouped) {
-        return html `<div class="" style="display: flex">
-      <temba-icon name="${Icon.inbox}"></temba-icon>
-      <div class="description">
-        ${event.ticket.topic.name}
-        <span
-          class="linked"
-          onclick="goto(event)"
-          href="/ticket/all/open/${event.ticket.uuid}"
-          >ticket</span
-        >
-        was opened
-      </div>
-    </div>`;
-    }
-    else {
-        return html `
-      <div>
-        <div style="text-align:center">
-          ${getDisplayName(event.created_by)} opened this ticket
-        </div>
-        <div class="subtext" style="justify-content:center">
-          <temba-date
-            class="time"
-            value="${event.created_on}"
-            display="duration"
-          ></temba-date>
-        </div>
-      </div>
-    `;
-    }
-};
-export const renderErrorMessage = (event) => {
-    return html `
-    <temba-icon
-      name="${Icon.error}"
-      style="--icon-color:var(--color-error)"
-    ></temba-icon>
-    <div class="description">
-      ${event.text}
-      ${event.type === Events.FAILURE
-        ? html `<div>Run ended prematurely, check the flow design.</div>`
-        : null}
-    </div>
-  `;
-};
-export const renderWebhookEvent = (event) => {
-    return html `
-    <div
-      class="${event.status === 'success' ? '' : 'failed'}"
-      style="display: flex"
-    >
-      <temba-icon name="${Icon.webhook}"></temba-icon>
-      <div class="description">
-        ${event.status === 'success'
-        ? html `Successfully called ${event.url}`
-        : html `Failed to call ${event.url}`}
-      </div>
-    </div>
-  `;
-};
-export const renderAirtimeTransferredEvent = (event) => {
-    if (parseFloat(event.actual_amount) === 0) {
-        return html `<temba-icon
-        name="${Icon.error}"
-        style="--icon-color: var(--color-error)"
-      ></temba-icon>
-      <div class="description error">Airtime transfer failed</div>`;
-    }
-    return html `<temba-icon name="${Icon.airtime}"></temba-icon>
-    <div class="description">
-      Transferred
-      <div class="attn">${event.actual_amount} ${event.currency}</div>
-      of airtime
-    </div>`;
-};
-export const renderCallStartedEvent = () => {
-    return html `<temba-icon name="${Icon.call}"></temba-icon>
-    <div class="description">Call Started</div>`;
-};
-export const renderContactLanguageChangedEvent = (event) => {
-    return html `<temba-icon name="${Icon.contact_updated}"></temba-icon>
-    <div class="description">
-      Language updated to <span class="attn">${event.language}</span>
-    </div>`;
-};
-export const renderOptinRequested = (event) => {
-    return html `<temba-icon name="${Icon.optin_requested}"></temba-icon>
-    <div class="description">
-      Requested opt-in for <span class="attn">${event.optin.name}</span>
-    </div>`;
-};
-export const renderChannelEvent = (event) => {
-    var _a, _b;
-    let eventMessage = '';
-    let icon = Icon.call;
-    if (event.event.type === 'mt_miss') {
-        eventMessage = 'Missed outgoing call';
-        icon = Icon.call_missed;
-    }
-    else if (event.event.type === 'mo_miss') {
-        eventMessage = 'Missed incoming call';
-        icon = Icon.call_missed;
-    }
-    else if (event.event.type === 'new_conversation') {
-        eventMessage = 'Started Conversation';
-        icon = Icon.event;
-    }
-    else if (event.channel_event_type === 'welcome_message') {
-        eventMessage = 'Welcome Message Sent';
-        icon = Icon.event;
-    }
-    else if (event.event.type === 'referral') {
-        eventMessage = 'Referred';
-        icon = Icon.event;
-    }
-    else if (event.event.type === 'follow') {
-        eventMessage = 'Followed';
-        icon = Icon.event;
-    }
-    else if (event.event.type === 'stop_contact') {
-        eventMessage = 'Stopped';
-        icon = Icon.contact_stopped;
-    }
-    else if (event.event.type === 'mt_call') {
-        eventMessage = 'Outgoing Phone Call';
-    }
-    else if (event.event.type == 'mo_call') {
-        eventMessage = 'Incoming Phone call';
-    }
-    else if (event.event.type == 'optin') {
-        eventMessage = html `Opted in to
-      <span class="attn">${(_a = event.event.optin) === null || _a === void 0 ? void 0 : _a.name}</span>`;
-        icon = Icon.optin;
-    }
-    else if (event.event.type == 'optout') {
-        eventMessage = html `Opted out of
-      <span class="attn">${(_b = event.event.optin) === null || _b === void 0 ? void 0 : _b.name}</span>`;
-        icon = Icon.optout;
-    }
-    return html `<temba-icon name="${icon}"></temba-icon>
-    <div class="description">${eventMessage}</div>`;
-};
-export const renderCampaignFiredEvent = (event) => {
-    return html `<temba-icon name="${Icon.campaign}"></temba-icon>
-    <div class="description">
-      Campaign
-      <span
-        class="linked"
-        onclick="goto(event, this)"
-        href="/campaign/read/${event.campaign.uuid}/"
-        >${event.campaign.name}</span
-      >
-      ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
-      <span
-        class="linked"
-        onclick="goto(event, this)"
-        href="/campaignevent/read/${event.campaign.uuid}/${event.campaign_event
-        .id}/"
-      >
-        ${event.campaign_event.offset_display}
-        ${event.campaign_event.relative_to.name}</span
-      >
-    </div>`;
-};
-export const renderContactGroupsEvent = (event) => {
-    const groups = event.groups_added || event.groups_removed;
-    const added = !!event.groups_added;
-    return html `
-    <temba-icon
-      name="${Icon.users}"
-      class="${getClasses({ added: added, removed: !added })}"
-    ></temba-icon>
-    <div class="description">
-      ${added ? 'Added to' : 'Removed from'}
-      ${oxfordFn(groups, (group) => html `<span
-            class="linked"
-            onclick="goto(event)"
-            href="/contact/filter/${group.uuid}"
-            >${group.name}</span
-          >`)}
-      ${event.type === Events.FAILURE
-        ? html `<div>Run ended prematurely, check the flow design.</div>`
-        : null}
-    </div>
-  `;
-};
 //# sourceMappingURL=events.js.map