removed random image from CRM widget

Examples/Widgets/CRM/package.json

@@ -27,23 +27,25 @@
   },
   "resolutions": {
     "jest": "^26.4.2",
-    "jest-config": "^26.4.2"
+    "jest-config": "^26.4.2",
+    "lit-element": "^2.3.1",
+    "lit-html": "^1.2.1"
   },
   "peerDependencies": {
-    "@momentum-ui/core": "19.10.3",
-    "@momentum-ui/icons": "8.28.0",
-    "@momentum-ui/utils": "6.2.13",
-    "@momentum-ui/web-components": "^2.1.0",
+    "@momentum-ui/core": "19.16.0",
+    "@momentum-ui/icons": "8.28.5",
+    "@momentum-ui/utils": "6.2.15",
+    "@momentum-ui/web-components": "2.13.12",
     "lit-element": "^2.3.1",
     "lit-html": "^1.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@momentum-ui/core": "19.10.3",
-    "@momentum-ui/icons": "8.28.0",
-    "@momentum-ui/utils": "6.2.13",
-    "@momentum-ui/web-components": "^2.1.0",
+    "@momentum-ui/core": "19.16.0",
+    "@momentum-ui/icons": "8.28.5",
+    "@momentum-ui/utils": "6.2.15",
+    "@momentum-ui/web-components": "2.13.12",
     "@open-wc/testing-helpers": "1.8.9",
     "@types/copy-webpack-plugin": "^5.0.0",
     "@types/html-webpack-plugin": "^3.2.2",
@@ -76,17 +78,17 @@
     "lit-html": "^1.2.1",
     "lit-scss-loader": "1.0.1",
     "mobx": "^6.0.1",
-    "node-sass": "^4.13.1",
+    "sass": "^1.71.1",
+    "sass-loader": "^8.0.2",
     "prettier": "^1.19.1",
     "remove-files-webpack-plugin": "^1.4.0",
-    "sass-loader": "^8.0.2",
     "stylelint": "^12.0.1",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-prettier": "^1.1.2",
     "ts-jest": "26.3.0",
-    "ts-loader": "^6.2.1",
-    "ts-node": "^8.6.2",
-    "typescript": "^3.8.3",
+    "ts-loader": "^8.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.5",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",

Examples/Widgets/CRM/src/components/App.scss

@@ -9,45 +9,44 @@
 @import "./TableStyles";
 
 :host {
-    display: block;
-    background-color: var(--md-primary-bg-color);
-    color: var(--md-primary-text-color);
+  display: block;
+  background-color: var(--md-primary-bg-color);
+  color: var(--md-primary-text-color);
 }
 
 .container {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+
+  > customer-summary {
     height: 100%;
+    margin-right: 1rem;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.16);
+  }
 
+  &.compact {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
     > customer-summary {
-        height: 100%;
-        margin-right: 1rem;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.16);
+      margin: 1rem;
+      border-radius: 8px;
+      height: 20rem;
+      width: 90%;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16),
+        0px 0px 1px rgba(0, 0, 0, 0.18);
     }
-
-    &.compact {
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        > customer-summary {
-            margin: 1rem;
-            border-radius: 8px;
-            height: 20rem;
-            width: 90%;
-            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.18);
-        }
 
-        > customer-visits {
-            width: auto;
-        }
+    > customer-visits {
+      width: auto;
     }
+  }
 }
 
-@include table
-
 .compact {
-    table {
-      flex-grow: 1;
-      overflow: auto;
-    }
-  }
+  table {
+    flex-grow: 1;
+    overflow: auto;
+  }
+}

Examples/Widgets/CRM/src/components/Summary.ts

@@ -11,6 +11,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import styles from "./Summary.scss";
 import { data } from "../customer-data/mock-customer-blob";
 import { classMap } from "lit-html/directives/class-map";
+
 @customElement("customer-summary")
 export default class CustomerSummary extends LitElement {
   @property({ type: Boolean }) compact = false;
@@ -29,7 +30,7 @@ export default class CustomerSummary extends LitElement {
 
   getValue(search: string): string {
     let value: any;
-    const result: any = this.customerData?.filter(x => x.label === search);
+    const result: any = this.customerData?.filter((x) => x.label === search);
     value = result[0].value;
     return value;
   }
@@ -43,9 +44,12 @@ export default class CustomerSummary extends LitElement {
       <div class="summary-container" part="summary">
         <section class="cust-info-header">
           <md-avatar
-            src=${ifDefined(this.getValue("Picture"))}
+            src=${ifDefined(
+              "https://cdn.theorg.com/6e224be2-9824-4bef-8b35-a1ea58abd696_thumb.jpg"
+            )}
             size="56"
           ></md-avatar>
+
           <h1>${ifDefined(this.getValue("Name"))}</h1>
           <div class="age-gender">
             ${ifDefined(this.getValue("Age"))} years old,

Examples/Widgets/CRM/src/index.ts

@@ -43,9 +43,9 @@ export default class MyCustomComponent extends LitElement {
     super.connectedCallback();
     this.customerData = data;
     this.getTaskMap();
-    this.phoneNumber =
+    /*this.phoneNumber =
       this.assignedContacts[0].interaction.callAssociatedData &&
-      this.assignedContacts[0].interaction.callAssociatedData["ani"]["value"];
+      this.assignedContacts[0].interaction.callAssociatedData["ani"]["value"];*/
   }
 
   async getTaskMap() {
@@ -86,7 +86,7 @@ export default class MyCustomComponent extends LitElement {
     } else if (typeof x === "object" && x !== null) {
       const values = Object.values(x);
       const dataString = html`
-        ${values.map(item => {
+        ${values.map((item) => {
           return html`
             <span>${item}</span><br />
           `;