favesalon-embed 1.0.4 → 1.0.6

package/dist/favesalon-embed/index.esm.js

@@ -0,0 +1 @@
+

package/dist/{esm/chat-box_5.entry.js → favesalon-embed/lodash-d5526b38.js}

@@ -1,138 +1,15 @@
-import { r as registerInstance, h } from './index-0494771f.js';
-import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService, d as dayjs_min, a as dateFormat } from './services-257442e2.js';
-import { r as relativeTime } from './relativeTime-baa50aa2.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-66ac50f5.js';
-
-const indexCss$4 = ".chat-widget,.chat-widget--sidebar,.chat-widget--content{display:flex;height:100%;width:100%}.chat-widget{font-size:16px;position:relative;font-family:'Roboto', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chat-widget--sidebar,.chat-widget--content{background-color:#fff;border:1px solid #EFEFEF;position:absolute;inset:0;flex-direction:column}.chat-widget .chat-widget--sidebar{z-index:10}.chat-widget .chat-widget--content{z-index:5}.chat-widget.has-chat-room .chat-widget--content{z-index:10}.chat-widget--content-header{background-color:#001529;border-bottom:1px solid #EFEFEF;display:flex;align-items:center;justify-content:space-between;padding:16px}.chat-widget--content-title{font-size:20px;font-weight:600;line-height:1;margin:0}.chat-widget--content-close{border:1px solid #fff;cursor:pointer;display:block;position:absolute;z-index:1000;top:50%;right:0;width:30px;height:30px;transform:translate(0, -50%);-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;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: 992px){.chat-widget--sidebar,.chat-widget--content{position:static;width:auto;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.chat-widget--sidebar{min-width:320px;max-width:320px;margin-right:24px}.chat-widget--content{flex-grow:1;flex-shrink:1}.chat-rooms--search,.chat-widget--content-header{-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0}}";
-
-const ChatBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onClickRoom = (chatRoom) => {
-      this.activeRoom = chatRoom;
-    };
-    this.primaryColor = undefined;
-    this.accessToken = undefined;
-    this.senderId = undefined;
-    this.chatRooms = undefined;
-    this.activeRoom = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    try {
-      this.chatRooms = await HttpService().fetchChatRooms(this.accessToken);
-      (this.chatRooms || []).forEach((chatRoom) => {
-        HttpService().fetchChatMessages(chatRoom.uid, (messages) => {
-          this.chatRooms = [...(this.chatRooms || [])].map((room) => {
-            if (chatRoom.uid === room.uid) {
-              room.messages = messages;
-            }
-            return room;
-          });
-        });
-      });
-    }
-    catch (e) {
-      this.chatRooms = [];
-    }
-  }
-  render() {
-    const senderInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id === Number(this.senderId)) : null;
-    const receiverInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id !== Number(this.senderId)) : null;
-    return (h("div", { class: `chat-widget ${this.activeRoom ? 'has-chat-room' : ''}` }, h("div", { class: "chat-widget--sidebar" }, h("chat-rooms", { "sender-id": Number(this.senderId), activeRoom: this.activeRoom, chatRooms: this.chatRooms, onClickRoom: this.onClickRoom })), h("div", { class: "chat-widget--content" }, receiverInfo && (h("div", { class: "chat-widget--content-header" }, h("user-avatar", { size: 40, avatar: receiverInfo.avatar, name: h("div", { class: "chat-room--user-name", style: { color: '#fff' } }, receiverInfo.fullName), shortName: String(receiverInfo.fullName || '').charAt(0) }), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-widget--content-close", onClick: () => this.onClickRoom(null) })))), h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '16px',
-      } }, this.activeRoom && (h("chat-messages", { sender: senderInfo, receiver: receiverInfo, messages: this.activeRoom.messages || [], "chat-room-id": this.activeRoom.uid })), !this.activeRoom && (h("div", { style: { paddingTop: '72px', textAlign: 'center' } }, h("div", { class: "chat-widget--content-title" }, "Welcome back!"), h("div", { style: { marginTop: "12px" } }, "Select any user in left hand side to get started.")))), this.activeRoom && (h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": Number(senderInfo.id), "chat-room-id": this.activeRoom.uid }))))));
-  }
-};
-ChatBox.style = indexCss$4;
-
-const indexCss$3 = ".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}";
-
-const ChatForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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")));
-  }
-};
-ChatForm.style = indexCss$3;
-
-const indexCss$2 = ".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}";
-
-dayjs_min.extend(relativeTime);
-const ChatMessages = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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_min().format(dateFormat);
-      const messageDayStr = dayjs_min(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_min(timestamp).format('HH:mm') : dayjs_min(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" })));
-  }
-};
-ChatMessages.style = indexCss$2;
+import { a as createCommonjsModule, c as commonjsGlobal } from './_commonjsHelpers-a4f66ccd.js';
 
 var lodash = createCommonjsModule(function (module, exports) {
-(function() {
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+;(function() {
 
   /** Used as a safe reference for `undefined` in pre-ES5 environments. */
   var undefined$1;
@@ -562,7 +439,7 @@ var lodash = createCommonjsModule(function (module, exports) {
   var root = freeGlobal || freeSelf || Function('return this')();
 
   /** Detect free variable `exports`. */
-  var freeExports = exports && !exports.nodeType && exports;
+  var freeExports = 'object' == 'object' && exports && !exports.nodeType && exports;
 
   /** Detect free variable `module`. */
   var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
@@ -17308,7 +17185,21 @@ var lodash = createCommonjsModule(function (module, exports) {
   var _ = runInContext();
 
   // Some AMD build optimizers, like r.js, check for condition patterns like:
-  if (freeModule) {
+  if (typeof undefined$1 == 'function' && typeof undefined$1.amd == 'object' && undefined$1.amd) {
+    // Expose Lodash on the global object to prevent errors when Lodash is
+    // loaded by a script tag in the presence of an AMD loader.
+    // See http://requirejs.org/docs/errors.html#mismatch for more details.
+    // Use `_.noConflict` to remove Lodash from the global object.
+    root._ = _;
+
+    // Define as an anonymous module so, through path mapping, it can be
+    // referenced as the "underscore" module.
+    undefined$1(function() {
+      return _;
+    });
+  }
+  // Check for `exports` after `define` in case a build optimizer adds it.
+  else if (freeModule) {
     // Export for Node.js.
     (freeModule.exports = _)._ = _;
     // Export for CommonJS support.
@@ -17321,111 +17212,4 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
-const indexCss$1 = "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}";
-
-const ChatRooms = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clickRoom = (chatRoom) => {
-      this.onClickRoom(chatRoom);
-    };
-    this.onSearchRooms = lodash.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 = lodash.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")))));
-  }
-};
-ChatRooms.style = indexCss$1;
-
-const indexCss = "";
-
-const UserAvatar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 24;
-    this.name = undefined;
-    this.description = undefined;
-    this.nameStyle = undefined;
-    this.shortName = undefined;
-    this.avatar = undefined;
-  }
-  render() {
-    return (h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (h("div", { style: {
-        border: `1px solid ${Colors.White}`,
-        backgroundImage: `url("${this.avatar}")`,
-        backgroundColor: Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: '50%',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } })), !this.avatar && (h("div", { style: {
-        border: `1px solid ${Colors.White}`,
-        backgroundColor: Colors.Gray01,
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } }, this.shortName)), this.name && (h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        marginLeft: '12px',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-      } }, h("div", { style: Object.assign({}, this.nameStyle) }, this.name), this.description && h("div", { style: { color: '#999999' } }, this.description)))));
-  }
-};
-UserAvatar.style = indexCss;
-
-export { ChatBox as chat_box, ChatForm as chat_form, ChatMessages as chat_messages, ChatRooms as chat_rooms, UserAvatar as user_avatar };
+export { lodash as l };

package/dist/favesalon-embed/login-form.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService } from './services-d71be591.js';
+import './_commonjsHelpers-a4f66ccd.js';
+
+const loginFormCss = ".form--user-login .form--login-label{cursor:pointer;display:block;margin-bottom:6px}.form--user-login input,.form--user-login button{border:1px solid #cecece;box-sizing:border-box;display:inline-block;width:100%;padding:4px 11px;min-height:40px;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.form--user-login button{background-color:#001529;border:1px solid #001529;color:#fff;cursor:pointer}.form--user-login button:disabled{background-color:#cecece;border:1px solid #cecece;color:#212121}";
+
+const LoginForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onSuccess = undefined;
+    this.isSubmitting = undefined;
+    this.error = undefined;
+    this.username = undefined;
+    this.password = undefined;
+  }
+  async onSubmit(evt) {
+    evt.preventDefault();
+    this.error = null;
+    this.isSubmitting = true;
+    if (this.username && this.password) {
+      try {
+        const apiUrl = window.location.origin.indexOf('localhost') > -1 || window.location.origin.indexOf('favesalon.com')
+          ? 'https://favesalon.com'
+          : window.location.origin;
+        const userInfo = await HttpService().login(apiUrl, {
+          email: this.username,
+          password: this.password,
+        });
+        this.onSuccess(userInfo);
+      }
+      catch (e) {
+        let errorMessage = e.message || `Something went wrong when logging your account`;
+        if (errorMessage.indexOf('404') > -1) {
+          errorMessage = 'You have entered an invalid username or password';
+        }
+        this.error = errorMessage;
+      }
+    }
+    else {
+      this.error = 'Please enter your username and password';
+    }
+    this.isSubmitting = false;
+  }
+  render() {
+    return (h("form", { class: "form--user-login", onSubmit: (evt) => this.onSubmit(evt) }, this.error && (h("div", { style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        marginBottom: '24px',
+        padding: '12px',
+      } }, this.error)), h("div", { style: { marginBottom: '24px' } }, h("label", { ...{ for: "form--login-username" }, class: "form--login-label" }, "Phone or Email"), h("input", { id: "form--login-username", type: "text", onInput: (evt) => {
+        this.username = evt.target.value;
+      } })), h("div", { style: {
+        display: 'flex',
+        marginBottom: '24px',
+        width: '100%',
+      } }, h("div", { style: {
+        flexShrink: '1',
+        flexGrow: '1',
+      } }, h("label", { ...{ for: "form--login-password" }, class: "form--login-label" }, "Password"), h("input", { id: "form--login-password", type: "password", onInput: (evt) => {
+        this.password = evt.target.value;
+      } })), h("div", { style: { width: '100px', marginLeft: '12px' } }, h("label", { style: { display: 'inline-block', marginBottom: '6px' } }, "\u00A0"), h("button", { type: "submit", disabled: this.isSubmitting }, "SIGN IN")))));
+  }
+};
+LoginForm.style = loginFormCss;
+
+export { LoginForm as login_form };

package/dist/{cjs/chat-button.cjs.entry.js → favesalon-embed/notify-sounds.entry.js}

@@ -1,55 +1,31 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dd8176c4.js');
-const colors = require('./colors-38421769.js');
-const services = require('./services-d1bdf299.js');
-require('./_commonjsHelpers-5cfcba41.js');
+import { r as registerInstance, h } from './index-888e99e3.js';
 
 const indexCss = "@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}}";
 
-const ChatButton = class {
+const NotifySounds = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.primaryColor = undefined;
-    this.accessToken = undefined;
-    this.senderId = undefined;
-    this.receiverId = undefined;
-    this.senderInfo = {};
-    this.receiverInfo = {};
-    this.chatRoom = {};
-    this.chatMessages = undefined;
-    this.isChatExpanded = undefined;
+    registerInstance(this, hostRef);
   }
-  componentWillLoad() {
-    this.fetchData();
+  componentDidLoad() {
+    const btnPlaySound = document.getElementById('chat--play-sound');
+    btnPlaySound.click();
   }
-  async fetchData() {
-    try {
-      this.chatRoom = await services.HttpService().createChatRoom(this.receiverId, this.accessToken);
-      if (this.chatRoom) {
-        services.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) { }
+  playSound() {
+    const audioPlayer = new Audio('https://res.cloudinary.com/reckon-mini-sites/video/upload/v1696198815/favesalon/notification--message_i9wsj8.mp3');
+    audioPlayer.play();
   }
+  ;
   render() {
-    const unreadMessages = (this.chatMessages || []).filter(message => {
-      return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
-    });
-    return (index.h("div", null, index.h("div", { class: "chat-button--indicator", onClick: () => this.isChatExpanded = true }, unreadMessages.length > 0 && index.h("span", { class: "chat-button--counter" })), index.h("div", { class: "chat-box", style: this.isChatExpanded ? {} : { display: 'none' } }, index.h("div", { class: "chat-box--header", style: {
-        backgroundColor: this.primaryColor || '#f05a61',
-      } }, index.h("h3", { class: "chat-box--title" }, "Chat"), index.h("div", { style: { position: 'relative' } }, index.h("div", { class: "chat-box--close", onClick: () => this.isChatExpanded = false }))), index.h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '16px',
-      } }, index.h("chat-messages", { sender: this.senderInfo, receiver: this.receiverInfo, messages: this.chatMessages || [], "chat-room-id": this.chatRoom.uid })), index.h("div", { style: { borderTop: `1px solid ${colors.Colors.Gray02}` } }, index.h("chat-form", { "sender-id": this.senderInfo.id ? Number(this.senderInfo.id) : null, "chat-room-id": this.chatRoom.uid })))));
+    return (h("button", { id: "chat--play-sound", onClick: () => this.playSound(), style: {
+        border: 'none',
+        display: 'block',
+        overflow: 'hidden',
+        height: '1px',
+        width: '1px',
+        padding: '0',
+      } }, "Play"));
   }
 };
-ChatButton.style = indexCss;
+NotifySounds.style = indexCss;
 
-exports.chat_button = ChatButton;
+export { NotifySounds as notify_sounds };

package/dist/favesalon-embed/register-form.entry.js

@@ -0,0 +1,88 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService } from './services-d71be591.js';
+import './_commonjsHelpers-a4f66ccd.js';
+
+const registerFormCss = ".form--user-register .form--login-label{cursor:pointer;display:block;margin-bottom:6px}.form--user-register input,.form--user-register button{border:1px solid #cecece;box-sizing:border-box;display:inline-block;width:100%;padding:4px 11px;min-height:40px;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.form--user-register button{background-color:#001529;border:1px solid #001529;color:#fff;cursor:pointer}.form--user-register button:disabled{background-color:#cecece;border:1px solid #cecece;color:#212121}";
+
+const RegisterForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onSuccess = undefined;
+    this.isSubmitting = undefined;
+    this.error = undefined;
+    this.firstName = undefined;
+    this.lastName = undefined;
+    this.email = undefined;
+    this.phone = undefined;
+    this.password = undefined;
+  }
+  async onSubmit(evt) {
+    evt.preventDefault();
+    this.error = null;
+    this.isSubmitting = true;
+    if (this.firstName && this.lastName && this.email && this.phone && this.password) {
+      try {
+        await HttpService().register({
+          email: this.email,
+          password: this.password,
+          mobile_phone: this.phone,
+          first_name: this.firstName,
+          last_name: this.lastName,
+          user_type: 1, // Consumer account
+        });
+        this.onSuccess({
+          email: this.email,
+          password: this.password,
+        });
+      }
+      catch (e) {
+        let errorMessage = e.message || `Something went wrong when creating your account`;
+        if (errorMessage.indexOf('Email has been exists') > -1) {
+          errorMessage = 'There was an existing account with your inputted info';
+        }
+        this.error = errorMessage;
+      }
+    }
+    else {
+      this.error = 'Please enter your username and password';
+    }
+    this.isSubmitting = false;
+  }
+  render() {
+    return (h("form", { class: "form--user-register", onSubmit: (evt) => this.onSubmit(evt) }, this.error && (h("div", { style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        marginBottom: '24px',
+        padding: '12px',
+      } }, this.error)), h("div", { style: {
+        display: 'flex',
+        marginBottom: '24px',
+        width: '100%',
+      } }, h("div", { style: { width: '48%', marginRight: '4%' } }, h("label", { ...{ for: "form--login-firstname" }, class: "form--login-label" }, "First name"), h("input", { id: "form--login-firstname", type: "text", onInput: (evt) => {
+        this.firstName = evt.target.value;
+      } })), h("div", { style: { width: '48%' } }, h("label", { ...{ for: "form--login-lastname" }, class: "form--login-label" }, "Last name"), h("input", { id: "form--login-lastname", type: "text", onInput: (evt) => {
+        this.lastName = evt.target.value;
+      } }))), h("div", { style: {
+        display: 'flex',
+        marginBottom: '24px',
+        width: '100%',
+      } }, h("div", { style: { width: '48%', marginRight: '4%' } }, h("label", { ...{ for: "form--login-email" }, class: "form--login-label" }, "Email"), h("input", { id: "form--login-email", type: "text", onInput: (evt) => {
+        this.email = evt.target.value;
+      } })), h("div", { style: { width: '48%' } }, h("label", { ...{ for: "form--login-phone" }, class: "form--login-label" }, "Phone"), h("input", { id: "form--login-phone", type: "text", onInput: (evt) => {
+        this.phone = evt.target.value;
+      } }))), h("div", { style: {
+        display: 'flex',
+        marginBottom: '24px',
+        width: '100%',
+      } }, h("div", { style: {
+        flexShrink: '1',
+        flexGrow: '1',
+      } }, h("label", { ...{ for: "form--login-password" }, class: "form--login-label" }, "Password"), h("input", { id: "form--login-password", type: "password", onInput: (evt) => {
+        this.password = evt.target.value;
+      } })), h("div", { style: { width: '100px', marginLeft: '12px' } }, h("label", { style: { display: 'inline-block', marginBottom: '6px' } }, "\u00A0"), h("button", { type: "submit", disabled: this.isSubmitting }, "SIGN UP"))), h("div", { style: { marginBottom: '24px' } }, "By submitting, you agree to our ", h("a", { target: "_blank", rel: "noopener noreferrer", href: "https://fave.salon/r/terms-for-client", style: { color: Colors.TextColor, cursor: 'pointer', display: 'inline', textDecoration: 'underline' } }, "Terms of Clients"), ", ", h("a", { target: "_blank", rel: "noopener noreferrer", href: "https://fave.salon/r/terms-for-business", style: { color: Colors.TextColor, cursor: 'pointer', display: 'inline', textDecoration: 'underline' } }, "Terms of Salons & Stylist"), " and ", h("a", { target: "_blank", rel: "noopener noreferrer", href: "https://fave.salon/r/privacy-policy", style: { color: Colors.TextColor, cursor: 'pointer', display: 'inline', textDecoration: 'underline' } }, "Private Policy"))));
+  }
+};
+RegisterForm.style = registerFormCss;
+
+export { RegisterForm as register_form };

package/dist/favesalon-embed/relativeTime-268e64b0.js

@@ -0,0 +1,7 @@
+import { a as createCommonjsModule, c as commonjsGlobal } from './_commonjsHelpers-a4f66ccd.js';
+
+var relativeTime = createCommonjsModule(function (module, exports) {
+!function(r,e){"object"=='object'&&"undefined"!='object'?module.exports=e():"function"==typeof undefined&&undefined.amd?undefined(e):(r="undefined"!=typeof globalThis?globalThis:r||self).dayjs_plugin_relativeTime=e();}(commonjsGlobal,(function(){"use strict";return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+});
+
+export { relativeTime as r };

package/dist/favesalon-embed/reset-password-form.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService } from './services-d71be591.js';
+import './_commonjsHelpers-a4f66ccd.js';
+
+const resetPasswordFormCss = ".form--user-reset-password .form--login-label{cursor:pointer;display:block;margin-bottom:6px}.form--user-reset-password input,.form--user-reset-password button{border:1px solid #cecece;box-sizing:border-box;display:inline-block;width:100%;padding:4px 11px;min-height:40px;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.form--user-reset-password button{background-color:#001529;border:1px solid #001529;color:#fff;cursor:pointer}.form--user-reset-password button:disabled{background-color:#cecece;border:1px solid #cecece;color:#212121}";
+
+const ResetPasswordForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onSuccess = undefined;
+    this.isSubmitting = undefined;
+    this.error = undefined;
+    this.username = undefined;
+  }
+  async onSubmit(evt) {
+    evt.preventDefault();
+    this.error = null;
+    this.isSubmitting = true;
+    if (this.username) {
+      try {
+        await HttpService().resetPassword(this.username);
+        this.onSuccess({ email: this.username });
+      }
+      catch (e) {
+        this.error = e.message || `Something went wrong when setting your new password`;
+      }
+    }
+    else {
+      this.error = 'Please enter your phone or email to reset your password';
+    }
+    this.isSubmitting = false;
+  }
+  render() {
+    return (h("form", { class: "form--user-reset-password", onSubmit: (evt) => this.onSubmit(evt) }, this.error && (h("div", { style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        marginBottom: '24px',
+        padding: '12px',
+      } }, this.error)), h("div", { style: { marginBottom: '24px' } }, h("label", { ...{ for: "form--login-username" }, class: "form--login-label" }, "Phone or Email"), h("input", { id: "form--login-username", type: "text", onInput: (evt) => {
+        this.username = evt.target.value;
+      } })), h("div", { style: { marginBottom: '24px' } }, h("button", { type: "submit", disabled: this.isSubmitting }, "RESET NOW"))));
+  }
+};
+ResetPasswordForm.style = resetPasswordFormCss;
+
+export { ResetPasswordForm as reset_password_form };

package/dist/{esm → favesalon-embed}/salon-booking-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0494771f.js';
+import { r as registerInstance, h } from './index-888e99e3.js';
 import { C as Colors } from './colors-ea36347a.js';
 
 const indexCss = ".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/{esm → favesalon-embed}/salon-booking.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-0494771f.js';
-import { c as color, l as lib } from './index-a1c7583c.js';
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { c as color, l as lib } from './index-00b83e1c.js';
 import { C as Colors } from './colors-ea36347a.js';
-import './_commonjsHelpers-66ac50f5.js';
+import './_commonjsHelpers-a4f66ccd.js';
 
 const indexCss = ".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}}";
 
@@ -39,7 +39,7 @@ const SalonBooking = class {
         },
       });
     }
-    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))));
+    return (h("div", { class: "salon-booking" }, h("div", { class: "salon-booking--button" }, h("button", { type: "button", class: buttonClass, onClick: () => this.openModal(), ...buttonStyle }, this.buttonText))));
   }
 };
 SalonBooking.style = indexCss;

package/dist/{esm → favesalon-embed}/salon-gift-card-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0494771f.js';
+import { r as registerInstance, h } from './index-888e99e3.js';
 import { C as Colors } from './colors-ea36347a.js';
 
 const indexCss = ".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}}";