favesalon-embed 1.0.4 → 1.0.6

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

@@ -1,142 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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;
-}

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

@@ -1,157 +0,0 @@
-import { debounce, last } from 'lodash';
-import { h } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class ChatRooms {
-  constructor() {
-    this.clickRoom = (chatRoom) => {
-      this.onClickRoom(chatRoom);
-    };
-    this.onSearchRooms = debounce((keyword) => {
-      this.keyword = keyword;
-    }, 500);
-    this.renderChatRoom = (chatRoom, index) => {
-      const { uid, members, messages } = chatRoom;
-      const receiverUser = members.find(user => user.id !== this.senderId);
-      const isActiveRoom = (this.activeRoom || {}).uid === uid;
-      let unreadMessages = 0;
-      const lastMessage = last(messages || []);
-      (messages || []).forEach(message => {
-        if (Boolean(message.unRead) && message.senderId !== this.senderId) {
-          unreadMessages += 1;
-        }
-      });
-      return (h("div", { key: `chat-room--${uid}-${index}`, class: `chat-room ${isActiveRoom ? 'is-active' : ''}`, onClick: () => !isActiveRoom && this.clickRoom(chatRoom) }, h("div", { class: "chat-room--user" }, h("user-avatar", { size: 48, avatar: receiverUser.avatar, name: h("div", { class: "chat-room--user-name" }, receiverUser.fullName), description: lastMessage && (h("div", { class: "chat-room--latest-message" }, lastMessage.senderId === this.senderId ? 'You: ' : '', lastMessage.message)), shortName: String(receiverUser.fullName || '').charAt(0) })), unreadMessages > 0 && (h("div", { class: "chat-room--user-indicator" }))));
-    };
-    this.senderId = undefined;
-    this.chatRooms = undefined;
-    this.activeRoom = undefined;
-    this.onClickRoom = undefined;
-    this.keyword = undefined;
-  }
-  render() {
-    const visibleRooms = (this.chatRooms || []).filter(chatRoom => {
-      if (this.keyword) {
-        const receiverUser = chatRoom.members.find(user => user.id !== this.senderId);
-        return String(receiverUser.fullName).toLowerCase().indexOf(String(this.keyword).toLowerCase()) > -1;
-      }
-      return true;
-    });
-    return (h("div", { class: "chat-rooms" }, h("div", { class: "chat-rooms--search" }, h("input", { autoComplete: "off", placeholder: "Enter a name...", onInput: evt => this.onSearchRooms(evt.target.value) })), h("div", { class: "chat-rooms--list" }, !this.chatRooms && [1, 2, 3, 4].map(fakeId => (h("div", { key: `chat-room--${fakeId}`, class: "chat-room" }, h("div", { class: "chat-room--user" }, h("div", { style: { display: "flex", alignItems: "center" } }, h("div", { style: {
-        backgroundColor: Colors.Gray02,
-        borderRadius: '50%',
-        height: `48px`,
-        width: `48px`,
-        minWidth: `48px`,
-      } }), h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        marginLeft: '12px',
-      } }, h("div", { style: {
-        backgroundColor: Colors.Gray02,
-        height: '16px',
-        width: '30%',
-      } }), h("div", { style: {
-        backgroundColor: Colors.Gray01,
-        marginTop: '12px',
-        height: '16px',
-        width: '60%',
-      } }))))))), this.chatRooms && visibleRooms.length > 0 && visibleRooms.map(this.renderChatRoom), this.chatRooms && visibleRooms.length === 0 && (h("div", { style: { color: Colors.Gray04, padding: '64px 24px', textAlign: 'center' } }, "No available users")))));
-  }
-  static get is() { return "chat-rooms"; }
-  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
-      },
-      "chatRooms": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChatRoom[]",
-          "resolved": "ChatRoom[]",
-          "references": {
-            "ChatRoom": {
-              "location": "import",
-              "path": "../../types/chat"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "activeRoom": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ChatRoom",
-          "resolved": "ChatRoom",
-          "references": {
-            "ChatRoom": {
-              "location": "import",
-              "path": "../../types/chat"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "onClickRoom": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(chatRoom: ChatRoom) => void",
-          "resolved": "(chatRoom: ChatRoom) => void",
-          "references": {
-            "ChatRoom": {
-              "location": "import",
-              "path": "../../types/chat"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "keyword": {}
-    };
-  }
-}

package/dist/collection/components/google-map/index.css

@@ -1,5 +0,0 @@
-google-map {
-  display: block;
-  width: 100%;
-  height: 100%;
-}

package/dist/collection/components/google-map/index.js

@@ -1,90 +0,0 @@
-import { getAssetPath, h } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class GoogleMap {
-  constructor() {
-    this.locationName = undefined;
-    this.locationAddress = undefined;
-  }
-  render() {
-    const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
-    return (h("div", { style: {
-        backgroundImage: `url("${mapPlaceholder}")`,
-        backgroundColor: Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        borderRadius: '8px',
-        position: 'relative',
-        height: '296px',
-      } }, h("div", { style: {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-      } }, h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
-        backgroundColor: Colors.Red01,
-        border: `1px solid ${Colors.Red02}`,
-        borderRadius: '4px',
-        color: Colors.TextColor,
-        padding: '12px',
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: 'auto',
-        width: 'auto',
-        whiteSpace: 'normal',
-        textAlign: 'left',
-        maxWidth: '320px',
-        textDecoration: 'none',
-      } }, this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)), h("div", { style: { marginTop: '8px', textAlign: 'center' } }, h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
-  }
-  static get is() { return "google-map"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() {
-    return {
-      "locationName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "location-name",
-        "reflect": false
-      },
-      "locationAddress": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "location-address",
-        "reflect": false
-      }
-    };
-  }
-}

package/dist/collection/components/salon-booking/index.css

@@ -1,30 +0,0 @@
-.salon-modal.salon-modal--booking:before {
-  display: none;
-}
-
-.salon-modal.salon-modal--booking .salon-modal--inner,
-.salon-modal.salon-modal--booking .salon-modal--content {
-  max-width: none;
-  width: 100%;
-  height: 100%;
-}
-
-.salon-modal.salon-modal--booking .salon-modal--close {
-  background-color: #EFEFEF;
-  width: 40px;
-  height: 40px;
-  right: 16px;
-  top: 16px;
-
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  border-radius: 50px;
-}
-
-
-@media (min-width: 768px) {
-  .salon-modal.salon-modal--booking .salon-modal--close {
-    right: 20px;
-    top: 20px;
-  }
-}

package/dist/collection/components/salon-booking/index.js

@@ -1,126 +0,0 @@
-import { h } from '@stencil/core';
-import Color from 'color';
-import { css } from 'glamor';
-import { Colors } from '../../constants/colors';
-export class SalonBooking {
-  constructor() {
-    this.salonId = undefined;
-    this.buttonClass = '';
-    this.buttonText = 'Book now';
-    this.primaryColor = Colors.Primary;
-  }
-  openModal() {
-    const elBookingModal = document.createElement('div');
-    elBookingModal.innerHTML = `
-      <salon-booking-modal
-        salon-id=${this.salonId}
-        primary-color=${this.primaryColor}
-      ></salon-booking-modal>
-    `;
-    document.body.appendChild(elBookingModal);
-  }
-  render() {
-    const buttonClass = this.buttonClass || 'btn btn-primary';
-    let buttonStyle = {};
-    if (!this.buttonClass) {
-      const primaryColor = Color(this.primaryColor);
-      const primaryColorHover = primaryColor.darken(0.05);
-      buttonStyle = css({
-        backgroundColor: this.primaryColor,
-        borderColor: this.primaryColor,
-        color: primaryColor.isLight() ? Colors.Black01 : Colors.White,
-        ':hover': {
-          backgroundColor: primaryColorHover,
-          borderColor: primaryColorHover,
-        },
-      });
-    }
-    return (h("div", { class: "salon-booking" }, h("div", { class: "salon-booking--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
-  }
-  static get is() { return "salon-booking"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "salonId": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "salon-id",
-        "reflect": false
-      },
-      "buttonClass": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "button-class",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "buttonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "button-text",
-        "reflect": false,
-        "defaultValue": "'Book now'"
-      },
-      "primaryColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "primary-color",
-        "reflect": false,
-        "defaultValue": "Colors.Primary"
-      }
-    };
-  }
-}