favesalon-embed 1.0.5 → 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,12 +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;
@@ -140,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/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-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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
 import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService } from './services-260ea6eb.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}}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
 import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService } from './services-260ea6eb.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, 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: {
+    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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
-import { H as HttpService } from './services-260ea6eb.js';
+import { H as HttpService } from './services-d71be591.js';
 import './_commonjsHelpers-a4f66ccd.js';
 import './colors-ea36347a.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-888e99e3.js';
-import { d as dayjs_min, H as HttpService, t as timeFormatAmPm } from './services-260ea6eb.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';

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

@@ -1,7 +1,7 @@
 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-260ea6eb.js';
+import { H as HttpService } from './services-d71be591.js';
 import { f as formatPhoneNumber } from './utils-fd30fb29.js';
 import './_commonjsHelpers-a4f66ccd.js';
 

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

@@ -144,5 +144,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["chat-box",[[0,"chat-box",{"primaryColor":[1,"primary-color"],"accessToken":[1,"access-token"],"senderId":[1,"sender-id"],"salonId":[1,"salon-id"],"chatRooms":[32],"activeRoom":[32],"fetchData":[64]}]]],["chat-button",[[0,"chat-button",{"primaryColor":[1,"primary-color"],"accessToken":[1,"access-token"],"senderId":[1,"sender-id"],"receiverId":[1,"receiver-id"],"senderInfo":[32],"receiverInfo":[32],"chatRoom":[32],"chatMessages":[32],"isChatExpanded":[32],"fetchData":[64]}]]],["salon-info",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}]]],["salon-latest-reviews",[[0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-lookbook",[[0,"salon-lookbook",{"salonId":[2,"salon-id"],"isLoading":[32],"isLoadingMore":[32],"hideLoadMore":[32],"currentPage":[32],"totalLookbooks":[32],"salonCategories":[32],"salonLookbooks":[32],"sortBy":[32],"filterBy":[32],"isLayoutSetup":[32],"fetchData":[64],"fetchLookbooks":[64],"onChangeFiltering":[64],"onChangeSorting":[64],"onLoadMore":[64],"fetchCategories":[64]}]]],["salon-reviews",[[0,"salon-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonInfo":[32],"stats":[32],"totalReviews":[32],"allReviews":[32],"isLoading":[32],"isSorting":[32],"isFiltering":[32],"isLoadingMore":[32],"canLoadMore":[32],"page":[32],"filterBy":[32],"sortBy":[32]}]]],["style-detail",[[0,"style-detail",{"salonId":[2,"salon-id"],"salonLookbook":[1,"salon-lookbook"],"lookbookInfo":[32],"isModalOpen":[32],"currentMediaIdx":[32],"currentMedia":[32],"albumMedias":[32],"similarStyles":[32],"totalComments":[32],"lookbookComments":[32],"isLayoutSetup":[32],"fetchData":[64]}]]],["salon-booking",[[0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-booking-modal",[[0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]]],["salon-gift-card",[[0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-gift-card-modal",[[0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]]],["salon-ranking",[[0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]]],["salon-services",[[0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-stylists",[[0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32],"totalStylists":[32],"page":[32],"isLoading":[32],"isLoadingMore":[32],"canLoadMore":[32],"fetchData":[64],"onLoadMore":[64]}]]],["chat-rooms",[[0,"chat-rooms",{"senderId":[2,"sender-id"],"salonId":[2,"salon-id"],"chatRooms":[16],"clients":[16],"activeRoom":[16],"accessToken":[1,"access-token"],"onClickRoom":[16],"keyword":[32]}]]],["salon-locations",[[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]]],["notify-sounds",[[0,"notify-sounds"]]],["salon-latest-styles",[[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}]]],["salon-schedules",[[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]]],["chat-messages",[[0,"chat-messages",{"sender":[16],"receiver":[16],"messages":[16],"chatRoomId":[1,"chat-room-id"]}]]],["chat-form",[[0,"chat-form",{"senderId":[2,"sender-id"],"chatRoomId":[1,"chat-room-id"]}]]],["google-map",[[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]],["user-avatar",[[0,"user-avatar",{"size":[2],"name":[1],"description":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]]], options);
+  return bootstrapLazy([["chat-button",[[0,"chat-button",{"primaryColor":[1,"primary-color"],"receiverId":[1,"receiver-id"],"accessToken":[1,"access-token"],"senderId":[1,"sender-id"],"senderIdState":[32],"accessTokenState":[32],"isChatVerificationExpanded":[32],"senderInfo":[32],"receiverInfo":[32],"chatRoom":[32],"chatMessages":[32],"isChatExpanded":[32],"fetchData":[64],"onVerificationSuccess":[64]}]]],["chat-box",[[0,"chat-box",{"primaryColor":[1,"primary-color"],"accessToken":[1,"access-token"],"senderId":[1,"sender-id"],"salonId":[1,"salon-id"],"chatRooms":[32],"activeRoom":[32],"fetchData":[64]}]]],["salon-info",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}]]],["salon-latest-reviews",[[0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-lookbook",[[0,"salon-lookbook",{"salonId":[2,"salon-id"],"isLoading":[32],"isLoadingMore":[32],"hideLoadMore":[32],"currentPage":[32],"totalLookbooks":[32],"salonCategories":[32],"salonLookbooks":[32],"sortBy":[32],"filterBy":[32],"isLayoutSetup":[32],"fetchData":[64],"fetchLookbooks":[64],"onChangeFiltering":[64],"onChangeSorting":[64],"onLoadMore":[64],"fetchCategories":[64]}]]],["salon-reviews",[[0,"salon-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonInfo":[32],"stats":[32],"totalReviews":[32],"allReviews":[32],"isLoading":[32],"isSorting":[32],"isFiltering":[32],"isLoadingMore":[32],"canLoadMore":[32],"page":[32],"filterBy":[32],"sortBy":[32]}]]],["style-detail",[[0,"style-detail",{"salonId":[2,"salon-id"],"salonLookbook":[1,"salon-lookbook"],"lookbookInfo":[32],"isModalOpen":[32],"currentMediaIdx":[32],"currentMedia":[32],"albumMedias":[32],"similarStyles":[32],"totalComments":[32],"lookbookComments":[32],"isLayoutSetup":[32],"fetchData":[64]}]]],["salon-booking",[[0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-booking-modal",[[0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]]],["salon-gift-card",[[0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-gift-card-modal",[[0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]]],["salon-ranking",[[0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]]],["salon-services",[[0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-stylists",[[0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32],"totalStylists":[32],"page":[32],"isLoading":[32],"isLoadingMore":[32],"canLoadMore":[32],"fetchData":[64],"onLoadMore":[64]}]]],["user-form",[[0,"user-form",{"onSuccess":[16],"type":[32],"currentUser":[32]}]]],["chat-rooms",[[0,"chat-rooms",{"senderId":[2,"sender-id"],"salonId":[2,"salon-id"],"chatRooms":[16],"clients":[16],"activeRoom":[16],"accessToken":[1,"access-token"],"onClickRoom":[16],"keyword":[32]}]]],["salon-locations",[[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]]],["notify-sounds",[[0,"notify-sounds"]]],["salon-latest-styles",[[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}]]],["salon-schedules",[[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]]],["chat-messages",[[0,"chat-messages",{"sender":[16],"receiver":[16],"messages":[16],"chatRoomId":[1,"chat-room-id"]}]]],["activate-form",[[0,"activate-form",{"username":[1],"password":[1],"onSuccess":[16],"isSubmitting":[32],"error":[32],"confirmCode":[32],"onSubmit":[64],"resendCode":[64]}]]],["change-password-form",[[0,"change-password-form",{"username":[1],"onSuccess":[16],"isSubmitting":[32],"error":[32],"confirmCode":[32],"password":[32],"onSubmit":[64],"resendCode":[64]}]]],["chat-form",[[0,"chat-form",{"senderId":[2,"sender-id"],"chatRoomId":[1,"chat-room-id"]}]]],["google-map",[[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]],["login-form",[[0,"login-form",{"onSuccess":[16],"isSubmitting":[32],"error":[32],"username":[32],"password":[32],"onSubmit":[64]}]]],["register-form",[[0,"register-form",{"onSuccess":[16],"isSubmitting":[32],"error":[32],"firstName":[32],"lastName":[32],"email":[32],"phone":[32],"password":[32],"onSubmit":[64]}]]],["reset-password-form",[[0,"reset-password-form",{"onSuccess":[16],"isSubmitting":[32],"error":[32],"username":[32],"onSubmit":[64]}]]],["user-avatar",[[0,"user-avatar",{"size":[2],"name":[1],"description":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]]], options);
 });