favesalon-embed 0.1.0 → 1.0.0

package/dist/esm/chat-button.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, h } from './index-3fae868e.js';
+import { d as dayjs_min, H as HttpService } from './services-40a3e622.js';
+import { r as relativeTime } from './relativeTime-cd452e6d.js';
+import './_commonjsHelpers-098d5b27.js';
+import './colors-ea36347a.js';
+
+const indexCss = "chat-button{display:inline-block;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;bottom:12px;height:8px;width:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.chat-box{background-color:#fff;display:flex;flex-direction:column;position:fixed;inset:0px;z-index:20000}.chat-box--header{display:flex;justify-content:space-between;padding:16px;position:relative}.chat-box--header-title{color:#fff;font-size:20px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:space-between;margin:0}.chat-message{overflow:hidden;clear:both;min-width:240px}.chat-message--meta{display:flex}.chat-message--message{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-conversation--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--message{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}@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}}";
+
+dayjs_min.extend(relativeTime);
+const ChatButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onSubmitMessage = async () => {
+      try {
+        const elNewMessage = document.getElementById('chat-form--input');
+        await HttpService().sendChatMessage({
+          message: elNewMessage.value,
+          senderId: this.senderInfo.id,
+          chatRoomId: this.chatRoom.uid,
+        });
+        elNewMessage.value = '';
+      }
+      catch (error) { }
+    };
+    this.markMessagesAsRead = async () => {
+      try {
+        const unreadMessages = (this.chatMessages || []).filter(message => {
+          return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
+        });
+        if (unreadMessages.length > 0) {
+          await HttpService().markMessagesAsRead(this.chatRoom.uid, unreadMessages);
+        }
+      }
+      catch (e) { }
+    };
+    this.scrollToLastMessage = () => {
+      const targetElement = document.getElementById('chat--last-message');
+      targetElement && targetElement.scrollIntoView();
+    };
+    this.renderMessage = (chatMessage) => {
+      const { message, senderId, timestamp } = chatMessage;
+      const isOwner = this.senderInfo.id === senderId;
+      return (h("div", { class: `chat-message ${isOwner ? 'is-owner' : 'is-guest'}` }, h("div", { class: "chat-message--meta" }, h("user-avatar", { size: 40, shortName: String(((isOwner ? this.senderInfo : this.receiverInfo) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.senderInfo : this.receiverInfo) || {}).avatar }), h("div", { class: "chat-message--content" }, h("div", { class: "chat-message--message" }, message), timestamp && (h("div", { class: "chat-conversation--time" }, dayjs_min(timestamp).format('HH:mm')))))));
+    };
+    this.renderMessages = () => {
+      const isEmpty = (this.chatMessages || []).length === 0;
+      return (h("div", { class: "chat-messages" }, !isEmpty && this.chatMessages.map(this.renderMessage), isEmpty && (h("div", { style: { paddingTop: '48px', textAlign: 'center' } }, h("i", { class: "ri-bubble-chart-line", style: { fontSize: '48px' } }), h("div", { style: { color: 'rgba(0, 0, 0, 0.45)', marginTop: '8px' } }, "Enter a message on below to get starting"))), h("div", { id: "chat--last-message" })));
+    };
+    this.primaryColor = undefined;
+    this.accessToken = undefined;
+    this.senderId = undefined;
+    this.receiverId = undefined;
+    this.senderInfo = {};
+    this.receiverInfo = {};
+    this.chatRoom = undefined;
+    this.chatMessages = undefined;
+    this.isChatExpanded = undefined;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  componentDidLoad() {
+    this.scrollToLastMessage();
+    this.markMessagesAsRead();
+  }
+  componentWillUpdate() {
+    this.scrollToLastMessage();
+  }
+  async fetchData() {
+    try {
+      this.chatRoom = await HttpService().createChatRoom(this.receiverId, this.accessToken);
+      if (this.chatRoom) {
+        HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
+        this.senderInfo = this.chatRoom.members.find(user => user.id === Number(this.senderId));
+        this.receiverInfo = this.chatRoom.members.find(user => user.id === Number(this.receiverId));
+      }
+    }
+    catch (e) { }
+  }
+  renderForm() {
+    return (h("div", { style: { display: 'flex', height: '100%' } }, h("input", { id: "chat-form--input", type: "text", class: "form-control", placeholder: "Enter a message...", style: { border: 'none' }, onKeyPress: (evt) => {
+        if (evt.key === 'Enter') {
+          evt.preventDefault();
+          this.onSubmitMessage();
+        }
+      } }), h("button", { type: "button", class: "btn btn-link", style: {
+        textDecoration: 'none',
+        display: 'flex',
+        height: '100%',
+        alignItems: 'center',
+      }, onClick: () => this.onSubmitMessage() }, h("i", { class: "ri-send-plane-2-line", style: { color: '#111', fontSize: '24px', lineHeight: '1' } }))));
+  }
+  render() {
+    const unreadMessages = (this.chatMessages || []).filter(message => {
+      return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
+    });
+    return (h("div", null, h("div", { class: "chat-button--indicator", onClick: () => this.isChatExpanded = true }, unreadMessages.length > 0 && h("span", { class: "chat-button--counter" })), h("div", { class: "chat-box", style: this.isChatExpanded ? {} : { display: 'none' } }, h("div", { class: "chat-box--header", style: {
+        backgroundColor: this.primaryColor || '#f05a61',
+      } }, h("h3", { class: "chat-box--header-title" }, "Chat"), h("div", { class: "salon-modal--close", onClick: () => this.isChatExpanded = false, style: { position: 'static' } })), h("div", { style: {
+        flexShrink: '1',
+        flexGrow: '1',
+        overflowY: 'auto',
+        padding: '16px',
+      } }, this.renderMessages()), h("div", { style: {
+        height: '50px',
+        minHeight: '50px',
+        paddingTop: '1',
+        borderTop: '1px solid rgb(245, 245, 245)',
+      } }, this.renderForm()))));
+  }
+};
+ChatButton.style = indexCss;
+
+export { ChatButton as chat_button };

package/dist/esm/favesalon-embed.js

@@ -1,8 +1,9 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-6af0a03d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3fae868e.js';
+export { s as setNonce } from './index-3fae868e.js';
 import './global-e1089ffd.js';
 
 /*
- Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -14,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["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-avatar",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]],["google-map_5",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}],[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}],[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]]], options);
+  return bootstrapLazy([["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-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]}]]],["google-map_5",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}],[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}],[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]],["user-avatar",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]]], options);
 });

package/dist/esm/google-map_5.entry.js

@@ -1,14 +1,16 @@
-import { r as registerInstance, g as getAssetPath, h } from './index-6af0a03d.js';
+import { r as registerInstance, g as getAssetPath, h } from './index-3fae868e.js';
 import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService, i as isVideoMedia, B as BusinessHourStatus } from './services-295247b1.js';
+import { H as HttpService, i as isVideoMedia, B as BusinessHourStatus } from './services-40a3e622.js';
 import { f as formatWebsiteUrl, a as formatFullAddress } from './utils-e97485e0.js';
 import './_commonjsHelpers-098d5b27.js';
 
 const indexCss$4 = "google-map{display:block;width:100%;height:100%}";
 
-let GoogleMap = class {
+const GoogleMap = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.locationName = undefined;
+    this.locationAddress = undefined;
   }
   render() {
     const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
@@ -48,9 +50,11 @@ GoogleMap.style = indexCss$4;
 
 const indexCss$3 = "";
 
-let SalonInfo = class {
+const SalonInfo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonInfo = undefined;
   }
   componentWillLoad() {
     this.fetchData();
@@ -69,9 +73,14 @@ SalonInfo.style = indexCss$3;
 
 const indexCss$2 = "salon-latest-styles .view--salon-styles--item{width:120px;height:120px}@media (min-width: 1024px){salon-latest-styles .view--salon-styles--item{width:200px;height:200px}}";
 
-let SalonLatestStyles = class {
+const SalonLatestStyles = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.isLoadingState = undefined;
+    this.latestStyles = undefined;
   }
   componentDidLoad() {
     this.fetchData();
@@ -156,9 +165,14 @@ SalonLatestStyles.style = indexCss$2;
 
 const indexCss$1 = "@media (min-width: 768px){salon-locations .salon-contact--links{overflow:hidden;margin-left:-32px}salon-locations .salon-contact--links-item{float:left;display:flex;flex-direction:row;align-items:center;font-size:16px;min-width:300px;padding-left:32px}salon-locations .salon-contact--links-item:nth-child(2n+1){clear:left}salon-locations .salon-contact--links-item+.salon-contact--links-item{margin-top:8px}}";
 
-let SalonLocations = class {
+const SalonLocations = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonInfo = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.salonInfoState = undefined;
   }
   componentWillLoad() {
     if (this.salonInfo) {
@@ -207,9 +221,14 @@ SalonLocations.style = indexCss$1;
 
 const indexCss = "salon-schedules .salon-schedules--day{display:flex;flex-direction:row;min-width:240px}@media (min-width: 768px){salon-schedules .salon-schedules--dates{overflow:hidden;margin-left:-32px}salon-schedules .salon-schedules--day{float:left;padding-left:32px}}";
 
-let SalonSchedules = class {
+const SalonSchedules = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonInfo = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.salonInfoState = undefined;
   }
   componentWillLoad() {
     if (this.salonInfo) {