favesalon-embed 1.0.1 → 1.0.3

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

@@ -1,218 +0,0 @@
-import dayjs from 'dayjs';
-import { h } from '@stencil/core';
-import HttpService from '../../services/services';
-import relativeTime from 'dayjs/plugin/relativeTime';
-dayjs.extend(relativeTime);
-export class ChatButton {
-  constructor() {
-    this.onSubmitMessage = async () => {
-      try {
-        const elNewMessage = document.getElementById('chat-form--input');
-        await HttpService().sendChatMessage({
-          message: elNewMessage.value,
-          senderId: this.senderInfo.id,
-          chatRoomId: this.chatRoom.uid,
-        });
-        elNewMessage.value = '';
-      }
-      catch (error) { }
-    };
-    this.markMessagesAsRead = async () => {
-      try {
-        const unreadMessages = (this.chatMessages || []).filter(message => {
-          return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
-        });
-        if (unreadMessages.length > 0) {
-          await HttpService().markMessagesAsRead(this.chatRoom.uid, 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.senderInfo.id === senderId;
-      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.senderInfo : this.receiverInfo) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.senderInfo : this.receiverInfo) || {}).avatar }), h("div", { class: "chat-message--content" }, h("div", { class: "chat-message--message" }, message), timestamp && (h("div", { class: "chat-conversation--time" }, dayjs(timestamp).format('HH:mm')))))));
-    };
-    this.renderMessages = () => {
-      const isEmpty = (this.chatMessages || []).length === 0;
-      return (h("div", { class: "chat-messages" }, !isEmpty && this.chatMessages.map(this.renderMessage), isEmpty && (h("div", { style: { paddingTop: '48px', textAlign: 'center' } }, h("i", { class: "ri-bubble-chart-line", style: { fontSize: '48px' } }), h("div", { style: { color: 'rgba(0, 0, 0, 0.45)', marginTop: '8px' } }, "Enter a message on below to get starting"))), h("div", { id: "chat--last-message" })));
-    };
-    this.primaryColor = undefined;
-    this.accessToken = undefined;
-    this.senderId = undefined;
-    this.receiverId = undefined;
-    this.senderInfo = {};
-    this.receiverInfo = {};
-    this.chatRoom = undefined;
-    this.chatMessages = undefined;
-    this.isChatExpanded = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  componentDidLoad() {
-    this.scrollToLastMessage();
-    this.markMessagesAsRead();
-  }
-  componentWillUpdate() {
-    this.scrollToLastMessage();
-  }
-  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) { }
-  }
-  renderForm() {
-    return (h("div", { style: { display: 'flex', height: '100%' } }, h("input", { id: "chat-form--input", type: "text", class: "form-control", placeholder: "Enter a message...", style: { border: 'none' }, onKeyPress: (evt) => {
-        if (evt.key === 'Enter') {
-          evt.preventDefault();
-          this.onSubmitMessage();
-        }
-      } }), h("button", { type: "button", class: "btn btn-link", style: {
-        textDecoration: 'none',
-        display: 'flex',
-        height: '100%',
-        alignItems: 'center',
-      }, onClick: () => this.onSubmitMessage() }, h("i", { class: "ri-send-plane-2-line", style: { color: '#111', fontSize: '24px', lineHeight: '1' } }))));
-  }
-  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--header-title" }, "Chat"), h("div", { class: "salon-modal--close", onClick: () => this.isChatExpanded = false, style: { position: 'static' } })), h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '16px',
-      } }, this.renderMessages()), h("div", { style: {
-        height: '50px',
-        minHeight: '50px',
-        paddingTop: '1',
-        borderTop: '1px solid rgb(245, 245, 245)',
-      } }, this.renderForm()))));
-  }
-  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-conversation/index.js

@@ -1,103 +0,0 @@
-// import { Component, Prop, h, Method, State } from '@stencil/core';
-// import { User } from '../../types/user';
-// import { ChatMessage, ChatRoom } from '../../types/chat';
-// import HttpService from '../../services/services';
-// @Component({
-//   tag: 'chat-conversation',
-//   styleUrl: 'index.css',
-// })
-// export class ChatButton {
-//   @Prop() primaryColor: string;
-//   @Prop() accessToken: string;
-//   @Prop() sender: User;
-//   @Prop() receiver: User;
-//   @State() chatRoom: ChatRoom;
-//   @State() chatMessages: ChatMessage[];
-//   componentWillLoad() {
-//     this.senderInfo = this.sender ? JSON.parse(this.sender) : null;
-//     this.receiverInfo = this.receiver ? JSON.parse(this.receiver) : null;
-//     this.fetchData();
-//   }
-//   @Method()
-//   async fetchData() {
-//     try {
-//       const chatRooms: ChatRoom[] = await HttpService().fetchChatRooms(this.accessToken);
-//       this.chatRoom = (chatRooms || []).find(chatRoom => {
-//         return chatRoom.members.find(user => user.id === this.receiverInfo.id);
-//       });
-//       if (this.chatRoom) {
-//         HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
-//       }
-//     } catch(e) {}
-//   }
-//   render() {
-//     return (
-//       <div>
-//         <div
-//           class="chat-button--indicator"
-//           onClick={() => this.isChatExpanded = true}
-//         >
-//           <span class="chat-button--counter"></span>
-//         </div>
-//         <div
-//           class="chat-box"
-//           style={this.isChatExpanded ? {} : { display: 'none' }}
-//         >
-//           <div style={{
-//             backgroundColor: this.primaryColor || '#f05a61',
-//             display: 'flex',
-//             justifyContent: 'space-between',
-//             padding: '16px',
-//             position: 'relative',
-//             borderRadius: '8px 8px 0px 0px',
-//           }}>
-//             <h3 style={{
-//               color: '#fff',
-//               fontSize: '20px',
-//               fontWeight: '600',
-//               lineHeight: '1',
-//               display: 'flex',
-//               alignItems: 'center',
-//               justifyContent: 'space-between',
-//               margin: '0',
-//             }}>Chat</h3>
-//             <div
-//               class="salon-modal--close"
-//               onClick={() => this.isChatExpanded = false}
-//               style={{ position: 'static' }}
-//             />
-//           </div>
-//           <div style={{
-//             flexShrink: '1',
-//             flexGrow: '1',
-//             display: 'flex',
-//             flexDirection: 'column',
-//           }}>
-//             <div style={{ padding: '16px', flexGrow: '1', flexShrink: '1' }}>
-//               {/* <ChatConversation
-//                 sender={senderUser}
-//                 receiver={receiverUser}
-//                 chatRoom={currentChatRoom}
-//                 chatMessages={messages || []}
-//               /> */}
-//               ChatConversation
-//             </div>
-//             <div style={{
-//               height: '50px',
-//               paddingTop: '1',
-//               borderTop: '1px solid rgb(245, 245, 245)',
-//             }}>
-//               {/* <ChatForm
-//                 sender={senderUser}
-//                 receiver={receiverUser}
-//                 chatRoom={currentChatRoom}
-//                 onSendMessageSuccess={(chatMessage) => {}}
-//               /> */}
-//               Chat form
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     );
-//   }
-// }

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

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

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"
-      }
-    };
-  }
-}

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

@@ -1,92 +0,0 @@
-import { h } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class SalonBookingModal {
-  constructor() {
-    this.salonId = undefined;
-    this.primaryColor = Colors.Primary;
-    this.redirectUrl = window.btoa(window.location.href);
-    this.isModalOpen = true;
-  }
-  closeModal() {
-    this.isModalOpen = false;
-    const el = document.querySelector('salon-booking-modal');
-    el.remove();
-  }
-  render() {
-    const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
-    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
-  }
-  static get is() { return "salon-booking-modal"; }
-  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
-      },
-      "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"
-      },
-      "redirectUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "redirect-url",
-        "reflect": false,
-        "defaultValue": "window.btoa(window.location.href)"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isModalOpen": {}
-    };
-  }
-}

package/dist/collection/components/salon-gift-card/index.css

@@ -1,30 +0,0 @@
-.salon-modal.salon-modal--gift-card:before {
-  display: none;
-}
-
-.salon-modal.salon-modal--gift-card .salon-modal--inner,
-.salon-modal.salon-modal--gift-card .salon-modal--content {
-  max-width: none;
-  width: 100%;
-  height: 100%;
-}
-
-.salon-modal.salon-modal--gift-card .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--gift-card .salon-modal--close {
-    right: 20px;
-    top: 20px;
-  }
-}