favesalon-embed 1.0.2 → 1.0.4

package/dist/collection/components/chat-button/index.css

@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+
+chat-button {
+  position: relative;
+}
+
+.chat-button--indicator {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.chat-button--counter {
+  background-color: rgb(240, 90, 97);
+  border: 1px solid rgb(255, 255, 255);
+  position: absolute;
+  right: 6px;
+  top: 0px;
+  height: 8px;
+  width: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}
+
+
+.chat-box {
+  font-family: 'Roboto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset: 0px;
+  z-index: 20000;
+  font-size: 16px;
+  text-align: left;
+  color: #141414;
+}
+
+.chat-box--header {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  position: relative;
+}
+
+.chat-box--title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+}
+
+.chat-box--close {
+  cursor: pointer;
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 50%;
+  right: 0;
+  width: 30px;
+  height: 30px;
+  transform: translate(0, -50%);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
+}
+
+
+@media (min-width: 768px) {
+  .chat-box {
+    border: 1px solid #fff;
+    left: unset;
+    top: unset;
+    right: 1px;
+    bottom: 0px;
+    height: 420px;
+    max-height: 90vh;
+    width: 600px;
+    -moz-border-radius: 8px 8px 0px 0px;
+    -webkit-border-radius: 8px 8px 0px 0px;
+    border-radius: 8px 8px 0px 0px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
+  }
+
+  .chat-box--header {
+    -moz-border-radius: 8px 8px 0px 0px;
+    -webkit-border-radius: 8px 8px 0px 0px;
+    border-radius: 8px 8px 0px 0px;
+  }
+}

package/dist/collection/components/chat-button/index.js

@@ -0,0 +1,155 @@
+import { h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+import HttpService from '../../services/services';
+export class ChatButton {
+  constructor() {
+    this.primaryColor = undefined;
+    this.accessToken = undefined;
+    this.senderId = undefined;
+    this.receiverId = undefined;
+    this.senderInfo = {};
+    this.receiverInfo = {};
+    this.chatRoom = {};
+    this.chatMessages = undefined;
+    this.isChatExpanded = undefined;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    try {
+      this.chatRoom = await HttpService().createChatRoom(this.receiverId, this.accessToken);
+      if (this.chatRoom) {
+        HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
+        this.senderInfo = this.chatRoom.members.find(user => user.id === Number(this.senderId));
+        this.receiverInfo = this.chatRoom.members.find(user => user.id === Number(this.receiverId));
+      }
+    }
+    catch (e) { }
+  }
+  render() {
+    const unreadMessages = (this.chatMessages || []).filter(message => {
+      return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
+    });
+    return (h("div", null, h("div", { class: "chat-button--indicator", onClick: () => this.isChatExpanded = true }, unreadMessages.length > 0 && h("span", { class: "chat-button--counter" })), h("div", { class: "chat-box", style: this.isChatExpanded ? {} : { display: 'none' } }, h("div", { class: "chat-box--header", style: {
+        backgroundColor: this.primaryColor || '#f05a61',
+      } }, h("h3", { class: "chat-box--title" }, "Chat"), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-box--close", onClick: () => this.isChatExpanded = false }))), h("div", { style: {
+        flexShrink: '1',
+        flexGrow: '1',
+        overflowY: 'auto',
+        padding: '16px',
+      } }, h("chat-messages", { sender: this.senderInfo, receiver: this.receiverInfo, messages: this.chatMessages || [], "chat-room-id": this.chatRoom.uid })), h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": this.senderInfo.id ? Number(this.senderInfo.id) : null, "chat-room-id": this.chatRoom.uid })))));
+  }
+  static get is() { return "chat-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "primaryColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "primary-color",
+        "reflect": false
+      },
+      "accessToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "access-token",
+        "reflect": false
+      },
+      "senderId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sender-id",
+        "reflect": false
+      },
+      "receiverId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "receiver-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "senderInfo": {},
+      "receiverInfo": {},
+      "chatRoom": {},
+      "chatMessages": {},
+      "isChatExpanded": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fetchData": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/chat-form/index.css

@@ -0,0 +1,40 @@
+.chat-form {
+  display: flex;
+  height: 56px;
+  width: 100%;
+}
+
+.chat-form #chat-form--input {
+  border: none;
+  outline: none;
+  flex-shrink: 1;
+  flex-grow: 1;
+  height: 100%;
+  font-size: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.chat-form > button {
+  background-color: #001529;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  min-width: 80px;
+  height: 42px;
+  margin: 7px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.chat-form > button:hover,
+.chat-form > button:focus,
+.chat-form > button:active {
+  background-color: #001529;
+}

package/dist/collection/components/chat-form/index.js

@@ -0,0 +1,79 @@
+import { h } from '@stencil/core';
+import HttpService from '../../services/services';
+export class ChatForm {
+  constructor() {
+    this.onSubmitMessage = async () => {
+      try {
+        const elNewMessage = document.getElementById('chat-form--input');
+        if (!!elNewMessage.value) {
+          await HttpService().sendChatMessage({
+            message: elNewMessage.value,
+            senderId: this.senderId,
+            chatRoomId: this.chatRoomId,
+          });
+          elNewMessage.value = '';
+        }
+      }
+      catch (error) { }
+    };
+    this.senderId = undefined;
+    this.chatRoomId = undefined;
+  }
+  render() {
+    return (h("div", { class: "chat-form" }, h("input", { id: "chat-form--input", type: "text", placeholder: "Enter a message...", onKeyPress: (evt) => {
+        if (evt.key === 'Enter') {
+          evt.preventDefault();
+          this.onSubmitMessage();
+        }
+      } }), h("button", { type: "button", onClick: () => this.onSubmitMessage() }, "Send")));
+  }
+  static get is() { return "chat-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "senderId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sender-id",
+        "reflect": false
+      },
+      "chatRoomId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chat-room-id",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/chat-messages/index.css

@@ -0,0 +1,48 @@
+.chat-message {
+  overflow: hidden;
+  clear: both;
+  min-width: 240px;
+}
+
+.chat-message + .chat-message {
+  margin-top: 6px;
+}
+
+.chat-message--meta {
+  display: flex;
+}
+
+.chat-message--title {
+  background-color: #F1F1F1;
+  padding: 8px 12px;
+  position: relative;
+  float: left;
+  margin-top: 6px;
+  -moz-border-radius: 0 10px 10px 10px;
+  -webkit-border-radius: 0 10px 10px 10px;
+  border-radius: 0 10px 10px 10px;
+}
+
+.chat-message--time {
+  clear: both;
+  color: #999;
+  font-size: 75%;
+  padding-top: 2px;
+}
+
+.chat-message.is-owner .chat-message--content {
+  margin-left: 12px;
+}
+
+.chat-message.is-guest .chat-message--meta {
+  flex-direction: row-reverse;
+}
+.chat-message.is-guest .chat-message--title {
+  background-color: #EFF7FF;
+  float: right;
+  margin-right: 12px;
+  text-align: right;
+  -moz-border-radius: 10px 0 10px 10px;
+  -webkit-border-radius: 10px 0 10px 10px;
+  border-radius: 10px 0 10px 10px;
+}

package/dist/collection/components/chat-messages/index.js

@@ -0,0 +1,142 @@
+import dayjs from 'dayjs';
+import { h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+import { dateFormat } from '../../types/common';
+import HttpService from '../../services/services';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+export class ChatMessages {
+  constructor() {
+    this.markMessagesAsRead = async () => {
+      try {
+        const unreadMessages = (this.messages || []).filter(message => {
+          return Boolean(message.unRead) && message.senderId !== this.sender.id;
+        });
+        if (unreadMessages.length > 0) {
+          await HttpService().markMessagesAsRead(this.chatRoomId, unreadMessages);
+        }
+      }
+      catch (e) { }
+    };
+    this.scrollToLastMessage = () => {
+      const targetElement = document.getElementById('chat--last-message');
+      targetElement && targetElement.scrollIntoView();
+    };
+    this.renderMessage = (chatMessage) => {
+      const { message, senderId, timestamp } = chatMessage;
+      const isOwner = this.sender.id === senderId;
+      const todayStr = dayjs().format(dateFormat);
+      const messageDayStr = dayjs(timestamp).format(dateFormat);
+      return (h("div", { class: `chat-message ${isOwner ? 'is-owner' : 'is-guest'}` }, h("div", { class: "chat-message--meta" }, h("user-avatar", { size: 40, shortName: String(((isOwner ? this.sender : this.receiver) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.sender : this.receiver) || {}).avatar }), h("div", { class: "chat-message--content" }, h("div", { class: "chat-message--title" }, message), timestamp && (h("div", { class: "chat-message--time" }, todayStr === messageDayStr ? dayjs(timestamp).format('HH:mm') : dayjs(timestamp).fromNow()))))));
+    };
+    this.sender = {};
+    this.receiver = {};
+    this.messages = [];
+    this.chatRoomId = undefined;
+  }
+  componentDidLoad() {
+    this.markMessagesAsRead();
+  }
+  componentDidUpdate() {
+    this.scrollToLastMessage();
+  }
+  render() {
+    const isEmpty = (this.messages || []).length === 0;
+    return (h("div", { class: "chat-messages" }, !isEmpty && this.messages.map(this.renderMessage), isEmpty && (h("div", { style: { padding: '48px', textAlign: 'center' } }, h("div", { style: { color: Colors.Green04 } }, "No messages yet"))), h("div", { id: "chat--last-message" })));
+  }
+  static get is() { return "chat-messages"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sender": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "User",
+          "resolved": "User",
+          "references": {
+            "User": {
+              "location": "import",
+              "path": "../../types/user"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{} as User"
+      },
+      "receiver": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "User",
+          "resolved": "User",
+          "references": {
+            "User": {
+              "location": "import",
+              "path": "../../types/user"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{} as User"
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChatMessage[]",
+          "resolved": "ChatMessage[]",
+          "references": {
+            "ChatMessage": {
+              "location": "import",
+              "path": "../../types/chat"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "chatRoomId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chat-room-id",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/chat-rooms/index.css

@@ -0,0 +1,102 @@
+chat-rooms,
+.chat-rooms {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.chat-rooms--search {
+  background-color: #001529;
+  border-bottom: 1px solid #EFEFEF;
+  display: flex;
+  padding: 16px;
+}
+
+.chat-rooms--search > input {
+  background-color: #F5F5F5;
+  border: 1px solid #EFEFEF;
+  height: 40px;
+  width: 100%;
+  font-size: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.chat-rooms--search > input:hover,
+.chat-rooms--search > input:active {
+  border: 1px solid #DBDBDB;
+}
+
+.chat-rooms--search > button {
+  background-color: #F5F5F5;
+  border: 1px solid #EFEFEF;
+  font-size: 16px;
+  min-width: 80px;
+  height: 40px;
+  margin-left: 12px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.chat-rooms--list {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+}
+
+.chat-room {
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  margin-bottom: 1px;
+  padding: 12px 16px;
+}
+
+.chat-room:hover,
+.chat-room.is-active {
+  background-color: #F5F5F5;
+}
+
+.chat-room--user {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+}
+
+.chat-room--user-name {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-room--latest-message {
+  font-size: 12px;
+  line-height: 14px;
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-room--user-indicator {
+  background-color: rgb(240, 90, 97);
+  border: 1px solid rgb(255, 255, 255);
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translate(0, -50%);
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}