favesalon-embed 1.0.4 → 1.0.6

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,18 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface ActivateForm extends Components.ActivateForm, HTMLElement {}
+export const ActivateForm: {
+  prototype: ActivateForm;
+  new (): ActivateForm;
+};
+
+interface ChangePasswordForm extends Components.ChangePasswordForm, HTMLElement {}
+export const ChangePasswordForm: {
+  prototype: ChangePasswordForm;
+  new (): ChangePasswordForm;
+};
+
 interface ChatBox extends Components.ChatBox, HTMLElement {}
 export const ChatBox: {
   prototype: ChatBox;
@@ -38,6 +50,30 @@ export const GoogleMap: {
   new (): GoogleMap;
 };
 
+interface LoginForm extends Components.LoginForm, HTMLElement {}
+export const LoginForm: {
+  prototype: LoginForm;
+  new (): LoginForm;
+};
+
+interface NotifySounds extends Components.NotifySounds, HTMLElement {}
+export const NotifySounds: {
+  prototype: NotifySounds;
+  new (): NotifySounds;
+};
+
+interface RegisterForm extends Components.RegisterForm, HTMLElement {}
+export const RegisterForm: {
+  prototype: RegisterForm;
+  new (): RegisterForm;
+};
+
+interface ResetPasswordForm extends Components.ResetPasswordForm, HTMLElement {}
+export const ResetPasswordForm: {
+  prototype: ResetPasswordForm;
+  new (): ResetPasswordForm;
+};
+
 interface SalonBooking extends Components.SalonBooking, HTMLElement {}
 export const SalonBooking: {
   prototype: SalonBooking;
@@ -134,6 +170,12 @@ export const UserAvatar: {
   new (): UserAvatar;
 };
 
+interface UserForm extends Components.UserForm, HTMLElement {}
+export const UserForm: {
+  prototype: UserForm;
+  new (): UserForm;
+};
+
 /**
  * Utility to define all custom elements within this package using the tag name provided in the component's source. 
  * When defining each custom element, it will also check it's safe to define by:

package/dist/{cjs/_commonjsHelpers-5cfcba41.js → favesalon-embed/_commonjsHelpers-a4f66ccd.js}

@@ -1,17 +1,27 @@
-'use strict';
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire();
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
+function getDefaultExportFromNamespaceIfPresent (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
+}
+
+function getDefaultExportFromNamespaceIfNotNamed (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
+}
+
 function getAugmentedNamespace(n) {
 	if (n.__esModule) return n;
 	var a = Object.defineProperty({}, '__esModule', {value: true});
@@ -31,6 +41,4 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-exports.commonjsGlobal = commonjsGlobal;
-exports.createCommonjsModule = createCommonjsModule;
-exports.getAugmentedNamespace = getAugmentedNamespace;
+export { createCommonjsModule as a, getAugmentedNamespace as b, commonjsGlobal as c, getDefaultExportFromCjs as g };

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

@@ -0,0 +1,70 @@
+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 activateFormCss = ".form--user-activate-account .form--login-label{cursor:pointer;display:block;margin-bottom:6px}.form--user-activate-account input,.form--user-activate-account 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-activate-account button{background-color:#001529;border:1px solid #001529;color:#fff;cursor:pointer}.form--user-activate-account button.btn--default{background-color:#fff;border:1px solid #F5F5F5;color:#141414}.form--user-activate-account button:disabled{background-color:#cecece;border:1px solid #cecece;color:#212121}";
+
+const ActivateForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.username = undefined;
+    this.password = undefined;
+    this.onSuccess = undefined;
+    this.isSubmitting = undefined;
+    this.error = undefined;
+    this.confirmCode = undefined;
+  }
+  async onSubmit(evt) {
+    evt.preventDefault();
+    this.error = null;
+    this.isSubmitting = true;
+    if (this.username && this.confirmCode && this.password) {
+      try {
+        await HttpService().activateAccount(this.username, this.confirmCode);
+        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) {
+        this.error = e.message || `Something went wrong when changing your new password`;
+      }
+    }
+    else {
+      this.error = 'Please enter your received code or password to change your password';
+    }
+    this.isSubmitting = false;
+  }
+  async resendCode(evt) {
+    evt.preventDefault();
+    this.error = null;
+    try {
+      await HttpService().resendActivateCode(this.username);
+    }
+    catch (e) {
+      this.error = e.message || `Something went wrong when sending the confirm code`;
+    }
+  }
+  render() {
+    return (h("form", { class: "form--user-activate-account", 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" }, "Confirmation code"), h("input", { id: "form--login-username", type: "text", onInput: (evt) => {
+        this.confirmCode = evt.target.value;
+      } })), h("div", { style: { marginBottom: '24px' } }, h("button", { type: "submit", disabled: this.isSubmitting }, "SUBMIT")), h("div", { style: { marginTop: '32px', marginBottom: '24px', textAlign: 'center' } }, "I didn\u2019t receive my confirmation code yet?"), h("div", { style: { marginBottom: '24px' } }, h("button", { class: "btn--default", style: {
+        backgrourColor: `${Colors.Gray02} !important`,
+        border: `1px solid ${Colors.Gray02} !important`,
+        color: `${Colors.TextColor} !important`,
+      }, onClick: (evt) => this.resendCode(evt) }, "Resend"))));
+  }
+};
+ActivateForm.style = activateFormCss;
+
+export { ActivateForm as activate_form };

package/dist/favesalon-embed/app-globals-74127f4b.js

@@ -0,0 +1,7 @@
+import './index-888e99e3.js';
+
+const globalFn = () => { };
+
+const globalScripts = globalFn;
+
+export { globalScripts as g };

package/dist/favesalon-embed/app-globals-f954a22f.js

@@ -0,0 +1,7 @@
+import './index-a229b3b5.js';
+
+const globalFn = () => { };
+
+const globalScripts = globalFn;
+
+export { globalScripts as g };

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

@@ -0,0 +1,81 @@
+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 changePasswordFormCss = ".form--user-change-password .form--login-label{cursor:pointer;display:block;margin-bottom:6px}.form--user-change-password input,.form--user-change-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-change-password button{background-color:#001529;border:1px solid #001529;color:#fff;cursor:pointer}.form--user-change-password button.btn--default{background-color:#fff;border:1px solid #F5F5F5;color:#141414}.form--user-change-password button:disabled{background-color:#cecece;border:1px solid #cecece;color:#212121}";
+
+const ChangePasswordForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.username = undefined;
+    this.onSuccess = undefined;
+    this.isSubmitting = undefined;
+    this.error = undefined;
+    this.confirmCode = undefined;
+    this.password = undefined;
+  }
+  async onSubmit(evt) {
+    evt.preventDefault();
+    this.error = null;
+    this.isSubmitting = true;
+    if (this.username && this.confirmCode && this.password) {
+      try {
+        await HttpService().onChangePassword({
+          email: this.username,
+          password: this.password,
+          code: this.confirmCode,
+        });
+        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) {
+        this.error = e.message || `Something went wrong when changing your new password`;
+      }
+    }
+    else {
+      this.error = 'Please enter your received code or password to change your password';
+    }
+    this.isSubmitting = false;
+  }
+  async resendCode(evt) {
+    evt.preventDefault();
+    this.error = null;
+    if (this.username) {
+      try {
+        await HttpService().resetPassword(this.username);
+      }
+      catch (e) {
+        this.error = e.message || `Something went wrong when sending the confirm code`;
+      }
+    }
+    else {
+      this.error = 'Please enter your phone or email to reset your password';
+    }
+  }
+  render() {
+    return (h("form", { class: "form--user-change-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" }, "Confirmation code"), h("input", { id: "form--login-username", type: "text", onInput: (evt) => {
+        this.confirmCode = evt.target.value;
+      } })), h("div", { style: { marginBottom: '24px' } }, 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: { marginBottom: '24px' } }, h("button", { type: "submit", disabled: this.isSubmitting }, "SAVE")), h("div", { style: { marginTop: '32px', marginBottom: '24px', textAlign: 'center' } }, "I didn\u2019t receive my confirmation code yet?"), h("div", { style: { marginBottom: '24px' } }, h("button", { class: "btn--default", style: {
+        backgrourColor: `${Colors.Gray02} !important`,
+        border: `1px solid ${Colors.Gray02} !important`,
+        color: `${Colors.TextColor} !important`,
+      }, onClick: (evt) => this.resendCode(evt) }, "Resend"))));
+  }
+};
+ChangePasswordForm.style = changePasswordFormCss;
+
+export { ChangePasswordForm as change_password_form };

package/dist/favesalon-embed/chat-box.entry.js

@@ -0,0 +1,55 @@
+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 indexCss = ".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.salonId = 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", { "access-token": this.accessToken, "salon-id": Number(this.salonId), "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;
+
+export { ChatBox as chat_box };

package/dist/{esm → favesalon-embed}/chat-button.entry.js

@@ -1,7 +1,7 @@
-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';
-import { H as HttpService } from './services-257442e2.js';
-import './_commonjsHelpers-66ac50f5.js';
+import { H as HttpService } from './services-d71be591.js';
+import './_commonjsHelpers-a4f66ccd.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}}";
 
@@ -9,9 +9,12 @@ const ChatButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.primaryColor = undefined;
+    this.receiverId = undefined;
     this.accessToken = undefined;
     this.senderId = undefined;
-    this.receiverId = undefined;
+    this.senderIdState = undefined;
+    this.accessTokenState = undefined;
+    this.isChatVerificationExpanded = undefined;
     this.senderInfo = {};
     this.receiverInfo = {};
     this.chatRoom = {};
@@ -19,31 +22,51 @@ const ChatButton = class {
     this.isChatExpanded = undefined;
   }
   componentWillLoad() {
-    this.fetchData();
+    this.senderIdState = this.senderId;
+    this.accessTokenState = this.accessToken;
+    this.senderIdState && this.accessTokenState && this.fetchData();
   }
   async fetchData() {
     try {
-      this.chatRoom = await HttpService().createChatRoom(this.receiverId, this.accessToken);
+      this.chatRoom = await HttpService().createChatRoom(this.receiverId, this.accessTokenState);
       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.senderInfo = this.chatRoom.members.find(user => user.id === Number(this.senderIdState));
         this.receiverInfo = this.chatRoom.members.find(user => user.id === Number(this.receiverId));
       }
     }
     catch (e) { }
   }
+  onVerificationSuccess(user) {
+    if (user.id && user.accessToken) {
+      this.isChatExpanded = true;
+      this.senderIdState = String(user.id);
+      this.accessTokenState = user.accessToken;
+      setTimeout(() => this.fetchData(), 350);
+    }
+  }
   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: {
+    if (this.senderIdState && this.accessTokenState) {
+      const unreadMessages = (this.chatMessages || []).filter(message => {
+        return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
+      });
+      return (h("div", null, unreadMessages.length > 0 && h("notify-sounds", 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 })))));
+    }
+    return (h("div", null, h("div", { class: "chat-button--indicator", onClick: () => this.isChatVerificationExpanded = true }), h("div", { class: "chat-box", style: this.isChatVerificationExpanded ? {} : { 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: {
+      } }, h("h3", { class: "chat-box--title" }, "Chat"), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-box--close", onClick: () => this.isChatVerificationExpanded = 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 })))));
+      } }, h("user-form", { onSuccess: user => this.onVerificationSuccess(user) })))));
   }
 };
 ChatButton.style = indexCss;

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { H as HttpService } from './services-d71be591.js';
+import './_commonjsHelpers-a4f66ccd.js';
+import './colors-ea36347a.js';
+
+const indexCss = ".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;
+
+export { ChatForm as chat_form };

package/dist/favesalon-embed/chat-messages.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { d as dayjs_min, H as HttpService, t as timeFormatAmPm } from './services-d71be591.js';
+import { l as lodash } from './lodash-d5526b38.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { r as relativeTime } from './relativeTime-268e64b0.js';
+import './_commonjsHelpers-a4f66ccd.js';
+
+const indexCss = ".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;
+      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" }, dayjs_min(timestamp).format(timeFormatAmPm)))))));
+    };
+    this.sender = {};
+    this.receiver = {};
+    this.messages = [];
+    this.chatRoomId = undefined;
+  }
+  componentDidLoad() {
+    this.markMessagesAsRead();
+  }
+  componentDidUpdate() {
+    this.scrollToLastMessage();
+  }
+  render() {
+    const isEmpty = (this.messages || []).length === 0;
+    const chatMessagesMapping = lodash.groupBy((this.messages || []), m => m.dateName);
+    return (h("div", { class: "chat-messages" }, !isEmpty && (h("div", null, lodash.keys(chatMessagesMapping).map(dateName => {
+      return (h("div", null, h("div", { style: {
+          backgroundColor: Colors.Gray01,
+          position: 'relative',
+          height: '1px',
+          marginTop: '24px',
+          marginBottom: '12px',
+        } }, h("span", { style: {
+          backgroundColor: Colors.White,
+          fontSize: '90%',
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          paddingLeft: '4px',
+          paddingRight: '4px',
+          marginTop: '-2px',
+        } }, dateName)), h("div", null, (chatMessagesMapping[dateName] || []).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;
+
+export { ChatMessages as chat_messages };

package/dist/favesalon-embed/chat-rooms.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, h } from './index-888e99e3.js';
+import { l as lodash } from './lodash-d5526b38.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService } from './services-d71be591.js';
+import { f as formatPhoneNumber } from './utils-fd30fb29.js';
+import './_commonjsHelpers-a4f66ccd.js';
+
+const indexCss = "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(async (keyword) => {
+      this.keyword = keyword;
+      this.clients = [];
+      if (!!keyword) {
+        try {
+          this.clients = await HttpService().fetchClients(this.salonId, keyword, this.accessToken);
+        }
+        catch (e) { }
+      }
+    }, 350);
+    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.initChatRoom = async (user) => {
+      let activeChatRoom = (this.chatRooms || []).find(room => {
+        return (room.members || []).find(member => member.id === user.id);
+      });
+      try {
+        if (!activeChatRoom && user.id) {
+          activeChatRoom = await HttpService().createChatRoom(user.id, this.accessToken);
+          this.chatRooms = this.chatRooms.concat([activeChatRoom]);
+        }
+      }
+      catch (e) { }
+      this.onClickRoom(activeChatRoom);
+    };
+    this.renderClient = (user, index) => {
+      const { id, avatar, fullName } = user;
+      return (h("div", { key: `chat-room--client-${id}-${index}`, class: "chat-room", onClick: () => this.initChatRoom(user) }, h("div", { class: "chat-room--user" }, h("user-avatar", { size: 48, avatar: avatar, name: h("div", { class: "chat-room--user-name" }, fullName), shortName: String(fullName || '').charAt(0) }))));
+    };
+    this.senderId = undefined;
+    this.salonId = undefined;
+    this.chatRooms = undefined;
+    this.clients = undefined;
+    this.activeRoom = undefined;
+    this.accessToken = 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
+          || String(formatPhoneNumber(receiverUser.mobilePhone)).toLowerCase().indexOf(formatPhoneNumber(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 && this.keyword && (h("div", { style: {
+        borderBottom: `1px solid ${Colors.Gray01}`,
+        color: Colors.Primary,
+        fontSize: '12px',
+        fontWeight: '700',
+        padding: '12px 16px',
+      } }, "PEOPLE")), 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")), this.keyword && (this.clients || []).length > 0 && (h("div", null, h("div", { style: {
+        borderBottom: `1px solid ${Colors.Gray01}`,
+        color: Colors.Primary,
+        fontSize: '12px',
+        fontWeight: '700',
+        padding: '12px 16px',
+        marginTop: '24px',
+      } }, "YOUR CLIENTS"), this.clients.map(this.renderClient))))));
+  }
+};
+ChatRooms.style = indexCss;
+
+export { ChatRooms as chat_rooms };