@nyaruka/temba-components 0.54.2 → 0.55.0

package/src/contacts/ContactFieldEditor.ts

@@ -34,17 +34,41 @@ export class ContactFieldEditor extends RapidElement {
 
   static get styles() {
     return css`
+      :host {
+        --transition-speed: 0ms;
+      }
+
       .wrapper {
         --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;
         --disabled-opacity: 1;
         position: relative;
+        --color-widget-bg: transparent;
+        --color-widget-bg-focused: #fff;
+        --widget-box-shadow: none;
+        padding-bottom: 0.6em;
+        border-bottom: 1px solid #ececec;
+      }
+
+      .wrapper.disabled {
+        --color-widget-border: transparent;
+      }
+
+      .wrapper.mutable:hover {
+        --color-widget-border: rgb(225, 225, 225);
+      }
+
+      .wrapper.mutable {
+        --color-widget-border: transparent;
+        --color-widget-bg: transparent;
+        --input-cursor: pointer;
+        --color-widget-text-focused: #666;
+        --color-widget-text: var(--color-link-primary) !important;
       }
 
       .prefix {
         border-top-left-radius: var(--curvature-widget);
         border-bottom-left-radius: var(--curvature-widget);
-        color: #888;
-        cursor: pointer;
+        cursor: pointer !important;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -52,6 +76,7 @@ export class ContactFieldEditor extends RapidElement {
         padding: 0em 0.5em;
         position: absolute;
         margin-top: 0.2em;
+        pointer-events: none;
       }
 
       .wrapper {
@@ -60,7 +85,7 @@ export class ContactFieldEditor extends RapidElement {
 
       .prefix .name {
         padding: 0em 0.4em;
-        color: #999;
+        color: rgba(100, 100, 100, 0.7);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -74,13 +99,12 @@ export class ContactFieldEditor extends RapidElement {
 
       .popper {
         padding: 0.5em 0.75em;
-        background: rgba(240, 240, 240, 1);
+        background: rgba(0, 0, 0, 0.03);
         border-top-right-radius: var(--curvature-widget);
         border-bottom-right-radius: var(--curvature-widget);
         --icon-color: #888;
         opacity: 0;
         cursor: default;
-        transform: scale(0.5);
         transition: all var(--transition-speed) ease-in-out;
         display: flex;
         align-items: stretch;
@@ -100,27 +124,15 @@ export class ContactFieldEditor extends RapidElement {
         --icon-color: rgba(0, 0, 0, 0.3);
       }
 
+      temba-textinput:focus .popper,
       temba-textinput:hover .popper {
         opacity: 1;
-        transform: scale(1);
-      }
-
-      temba-textinput:focus .popper {
-        opacity: 1;
-        transform: scale(1);
       }
 
       .disabled temba-textinput .postfix {
         display: none;
       }
 
-      .disabled {
-        --widget-box-shadow: none;
-        --color-widget-border: transparent;
-        padding-bottom: 0.4em;
-        border-bottom: 1px solid #e6e6e6;
-      }
-
       .unset temba-textinput:focus .popper,
       .unset temba-textinput:hover .popper {
         opacity: 0;
@@ -208,6 +220,7 @@ export class ContactFieldEditor extends RapidElement {
           set: !!this.value,
           unset: !this.value,
           disabled: this.disabled,
+          mutable: !this.disabled,
         })}
       >
         ${this.type === 'datetime'

package/src/contacts/ContactFields.ts

@@ -10,12 +10,6 @@ const MIN_FOR_FILTER = 10;
 export class ContactFields extends ContactStoreElement {
   static get styles() {
     return css`
-      :host {
-      }
-
-      .fields {
-      }
-
       .field {
         display: flex;
         margin: 0.3em 0.3em;
@@ -25,8 +19,9 @@ export class ContactFields extends ContactStoreElement {
         overflow: hidden;
       }
 
-      .show-all .unset {
-        display: block;
+      .show-all .unset,
+      .featured {
+        display: block !important;
       }
 
       .unset {
@@ -61,9 +56,6 @@ export class ContactFields extends ContactStoreElement {
         font-size: 0.9em;
       }
 
-      temba-contact-field {
-      }
-
       .toggle {
         display: flex;
         background: #fff;
@@ -77,9 +69,6 @@ export class ContactFields extends ContactStoreElement {
     `;
   }
 
-  @property({ type: Boolean })
-  featured: boolean;
-
   @property({ type: Boolean })
   system: boolean;
 
@@ -92,6 +81,9 @@ export class ContactFields extends ContactStoreElement {
   @property({ type: String })
   timezone: string;
 
+  @property({ type: String })
+  role: string;
+
   @property({ type: Boolean })
   disabled = false;
 
@@ -100,6 +92,10 @@ export class ContactFields extends ContactStoreElement {
     this.handleFieldChanged = this.handleFieldChanged.bind(this);
   }
 
+  private isAgent(): boolean {
+    return this.role === 'T';
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -129,25 +125,29 @@ export class ContactFields extends ContactStoreElement {
 
   public render(): TemplateResult {
     if (this.data) {
-      const fieldsToShow = Object.entries(this.data.fields)
-        .filter((entry: [string, string]) => {
-          return (
-            (this.featured && this.store.getContactField(entry[0]).featured) ||
-            (!this.featured && !this.store.getContactField(entry[0]).featured)
-          );
-        })
-        .sort((a: [string, string], b: [string, string]) => {
+      const fieldsToShow = Object.entries(this.data.fields).sort(
+        (a: [string, string], b: [string, string]) => {
           const [ak] = a;
           const [bk] = b;
-          const priority =
-            this.store.getContactField(bk).priority -
-            this.store.getContactField(ak).priority;
+          const fieldA = this.store.getContactField(ak);
+          const fieldB = this.store.getContactField(bk);
+
+          if (fieldA.featured && !fieldB.featured) {
+            return -1;
+          }
+
+          if (fieldB.featured && !fieldA.featured) {
+            return 1;
+          }
+
+          const priority = fieldB.priority - fieldA.priority;
           if (priority !== 0) {
             return priority;
           }
 
           return ak.localeCompare(bk);
-        });
+        }
+      );
 
       if (fieldsToShow.length == 0) {
         return html`<slot name="empty"></slot>`;
@@ -157,21 +157,24 @@ export class ContactFields extends ContactStoreElement {
         const [k, v] = entry;
         const field = this.store.getContactField(k);
         return html`<temba-contact-field
-          class=${v ? 'set' : 'unset'}
+          class=${getClasses({ set: !!v, unset: !v, featured: field.featured })}
           key=${field.key}
           name=${field.label}
           value=${v}
           type=${field.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
-          ?disabled=${this.disabled}
+          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||
+          this.disabled
+            ? true
+            : false}
         ></temba-contact-field>`;
       });
 
       return html`
         <div class=${getClasses({ disabled: this.disabled })}>
-          ${!this.featured &&
-          Object.keys(this.data.fields).length >= MIN_FOR_FILTER
+          <div class="fields ${this.showAll ? 'show-all' : ''}">${fields}</div>
+          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER
             ? html`<div class="toggle">
                 <div style="flex-grow: 1"></div>
                 <div>
@@ -179,16 +182,10 @@ export class ContactFields extends ContactStoreElement {
                     ?checked=${this.showAll}
                     @change=${this.handleToggle}
                     label="Show All"
-                  />
+                  ></temba-checkbox>
                 </div>
               </div>`
             : null}
-
-          <div
-            class="fields ${this.showAll || this.featured ? 'show-all' : ''}"
-          >
-            ${fields}
-          </div>
         </div>
       `;
     }

package/src/interfaces.ts

@@ -99,6 +99,7 @@ export interface ContactField {
   value_type: string;
   featured: boolean;
   priority: number;
+  agent_access: string;
   usages: { campaign_events: number; flows: number; groups: number };
 }
 

package/src/textinput/TextInput.ts

@@ -12,7 +12,7 @@ export class TextInput extends FormElement {
     return css`
       .input-container {
         border-radius: var(--curvature-widget);
-        cursor: text;
+        cursor: var(--input-cursor);
         background: var(--color-widget-bg);
         border: 1px solid var(--color-widget-border);
         transition: all ease-in-out var(--transition-speed);
@@ -48,7 +48,6 @@ export class TextInput extends FormElement {
       }
 
       .input-container:hover {
-        background: var(--color-widget-bg-focused);
       }
 
       textarea {
@@ -61,11 +60,12 @@ export class TextInput extends FormElement {
         flex: 1;
         margin: 0;
         background: none;
+        background-color: transparent;
         color: var(--color-widget-text);
         font-family: var(--font-family);
         font-size: var(--temba-textinput-font-size);
         line-height: normal;
-        cursor: text;
+        cursor: var(--input-cursor);
         resize: none;
         font-weight: 300;
         width: 100%;
@@ -75,6 +75,7 @@ export class TextInput extends FormElement {
         outline: none;
         box-shadow: none;
         cursor: text;
+        color: var(--color-widget-text-focused, var(--color-widget-text));
       }
 
       .textinput::placeholder {

package/src/utils/index.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, TemplateResult } from 'lit-html';
 import { Button } from '../button/Button';
-import { upload_endpoint } from '../compose/Compose';
 import { Dialog } from '../dialog/Dialog';
 import { ContactField, Ticket, User } from '../interfaces';
 import ColorHash from 'color-hash';
 
+export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
+
 const colorHash = new ColorHash();
 
 export type Asset = KeyedAsset & Ticket & ContactField;
@@ -252,7 +253,7 @@ export const postFormData = (
         if (response.status >= 200 && response.status < 400) {
           resolve(response);
         } else {
-          if (url === upload_endpoint) {
+          if (url === DEFAULT_MEDIA_ENDPOINT) {
             reject(response);
           } else {
             reject('Server failure');

package/test/temba-compose.test.ts

@@ -1,8 +1,9 @@
-import { assert, expect, fixture } from '@open-wc/testing';
-import { Attachment, Compose, upload_endpoint } from '../src/compose/Compose';
+import { assert, expect } from '@open-wc/testing';
+import { Attachment, Compose } from '../src/compose/Compose';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 import { Button } from '../src/button/Button';
 import { Completion } from '../src/completion/Completion';
+import { DEFAULT_MEDIA_ENDPOINT } from '../src/utils';
 
 const TAG = 'temba-compose';
 const getCompose = async (attrs: any = {}, width = 500, height = 500) => {
@@ -113,7 +114,7 @@ describe('temba-compose chatbox', () => {
   it('can be created', async () => {
     const compose: Compose = await getCompose();
     assert.instanceOf(compose, Compose);
-    expect(compose.endpoint).equals(upload_endpoint);
+    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);
   });
 
   it('cannot be created with a different endpoint', async () => {
@@ -121,7 +122,7 @@ describe('temba-compose chatbox', () => {
       endpoint: '/schmsgmedia/schmupload/',
     });
     assert.instanceOf(compose, Compose);
-    expect(compose.endpoint).equals(upload_endpoint);
+    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);
   });
 
   it('chatbox no counter no send button', async () => {