favesalon-embed 1.0.1 → 1.0.3

package/dist/types/components.d.ts

@@ -5,7 +5,15 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { User } from "./types/user";
+import { ChatMessage, ChatRoom } from "./types/chat";
 export namespace Components {
+    interface ChatBox {
+        "accessToken": string;
+        "fetchData": () => Promise<void>;
+        "primaryColor": string;
+        "senderId": string;
+    }
     interface ChatButton {
         "accessToken": string;
         "fetchData": () => Promise<void>;
@@ -13,6 +21,22 @@ export namespace Components {
         "receiverId": string;
         "senderId": string;
     }
+    interface ChatForm {
+        "chatRoomId": string;
+        "senderId": number;
+    }
+    interface ChatMessages {
+        "chatRoomId": string;
+        "messages": ChatMessage[];
+        "receiver": User;
+        "sender": User;
+    }
+    interface ChatRooms {
+        "activeRoom": ChatRoom;
+        "chatRooms": ChatRoom[];
+        "onClickRoom": (chatRoom: ChatRoom) => void;
+        "senderId": number;
+    }
     interface GoogleMap {
         "locationAddress"?: string;
         "locationName"?: string;
@@ -100,19 +124,44 @@ export namespace Components {
     }
     interface UserAvatar {
         "avatar": string;
-        "name": string;
+        "description"?: string;
+        "name"?: string;
         "nameStyle"?: object;
         "shortName": string;
         "size": number;
     }
 }
 declare global {
+    interface HTMLChatBoxElement extends Components.ChatBox, HTMLStencilElement {
+    }
+    var HTMLChatBoxElement: {
+        prototype: HTMLChatBoxElement;
+        new (): HTMLChatBoxElement;
+    };
     interface HTMLChatButtonElement extends Components.ChatButton, HTMLStencilElement {
     }
     var HTMLChatButtonElement: {
         prototype: HTMLChatButtonElement;
         new (): HTMLChatButtonElement;
     };
+    interface HTMLChatFormElement extends Components.ChatForm, HTMLStencilElement {
+    }
+    var HTMLChatFormElement: {
+        prototype: HTMLChatFormElement;
+        new (): HTMLChatFormElement;
+    };
+    interface HTMLChatMessagesElement extends Components.ChatMessages, HTMLStencilElement {
+    }
+    var HTMLChatMessagesElement: {
+        prototype: HTMLChatMessagesElement;
+        new (): HTMLChatMessagesElement;
+    };
+    interface HTMLChatRoomsElement extends Components.ChatRooms, HTMLStencilElement {
+    }
+    var HTMLChatRoomsElement: {
+        prototype: HTMLChatRoomsElement;
+        new (): HTMLChatRoomsElement;
+    };
     interface HTMLGoogleMapElement extends Components.GoogleMap, HTMLStencilElement {
     }
     var HTMLGoogleMapElement: {
@@ -216,7 +265,11 @@ declare global {
         new (): HTMLUserAvatarElement;
     };
     interface HTMLElementTagNameMap {
+        "chat-box": HTMLChatBoxElement;
         "chat-button": HTMLChatButtonElement;
+        "chat-form": HTMLChatFormElement;
+        "chat-messages": HTMLChatMessagesElement;
+        "chat-rooms": HTMLChatRoomsElement;
         "google-map": HTMLGoogleMapElement;
         "salon-booking": HTMLSalonBookingElement;
         "salon-booking-modal": HTMLSalonBookingModalElement;
@@ -237,12 +290,33 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface ChatBox {
+        "accessToken"?: string;
+        "primaryColor"?: string;
+        "senderId"?: string;
+    }
     interface ChatButton {
         "accessToken"?: string;
         "primaryColor"?: string;
         "receiverId"?: string;
         "senderId"?: string;
     }
+    interface ChatForm {
+        "chatRoomId"?: string;
+        "senderId"?: number;
+    }
+    interface ChatMessages {
+        "chatRoomId"?: string;
+        "messages"?: ChatMessage[];
+        "receiver"?: User;
+        "sender"?: User;
+    }
+    interface ChatRooms {
+        "activeRoom"?: ChatRoom;
+        "chatRooms"?: ChatRoom[];
+        "onClickRoom"?: (chatRoom: ChatRoom) => void;
+        "senderId"?: number;
+    }
     interface GoogleMap {
         "locationAddress"?: string;
         "locationName"?: string;
@@ -317,13 +391,18 @@ declare namespace LocalJSX {
     }
     interface UserAvatar {
         "avatar"?: string;
+        "description"?: string;
         "name"?: string;
         "nameStyle"?: object;
         "shortName"?: string;
         "size"?: number;
     }
     interface IntrinsicElements {
+        "chat-box": ChatBox;
         "chat-button": ChatButton;
+        "chat-form": ChatForm;
+        "chat-messages": ChatMessages;
+        "chat-rooms": ChatRooms;
         "google-map": GoogleMap;
         "salon-booking": SalonBooking;
         "salon-booking-modal": SalonBookingModal;
@@ -347,7 +426,11 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "chat-box": LocalJSX.ChatBox & JSXBase.HTMLAttributes<HTMLChatBoxElement>;
             "chat-button": LocalJSX.ChatButton & JSXBase.HTMLAttributes<HTMLChatButtonElement>;
+            "chat-form": LocalJSX.ChatForm & JSXBase.HTMLAttributes<HTMLChatFormElement>;
+            "chat-messages": LocalJSX.ChatMessages & JSXBase.HTMLAttributes<HTMLChatMessagesElement>;
+            "chat-rooms": LocalJSX.ChatRooms & JSXBase.HTMLAttributes<HTMLChatRoomsElement>;
             "google-map": LocalJSX.GoogleMap & JSXBase.HTMLAttributes<HTMLGoogleMapElement>;
             "salon-booking": LocalJSX.SalonBooking & JSXBase.HTMLAttributes<HTMLSalonBookingElement>;
             "salon-booking-modal": LocalJSX.SalonBookingModal & JSXBase.HTMLAttributes<HTMLSalonBookingModalElement>;

package/dist/types/utils/utils.d.ts

@@ -1,4 +1,5 @@
 import { Salon } from "../types/salon";
+export declare function wait(time?: number): Promise<unknown>;
 export declare function format(first: string, middle: string, last: string): string;
 export declare function formatWebsiteUrl(website: string): string;
 export declare function formatFullAddress(salon: Salon): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "favesalon-embed",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Favesalon Embed",
   "author": "Trung Luu <trung@favesalon.com> (https://favesalon.com)",
   "main": "dist/index.cjs.js",

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

@@ -1,118 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-47c2a5f6.js');
-const services = require('./services-125c82d8.js');
-const relativeTime = require('./relativeTime-3721080d.js');
-require('./_commonjsHelpers-5cfcba41.js');
-require('./colors-38421769.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}}";
-
-services.dayjs_min.extend(relativeTime.relativeTime);
-const ChatButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onSubmitMessage = async () => {
-      try {
-        const elNewMessage = document.getElementById('chat-form--input');
-        await services.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 services.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 (index.h("div", { class: `chat-message ${isOwner ? 'is-owner' : 'is-guest'}` }, index.h("div", { class: "chat-message--meta" }, index.h("user-avatar", { size: 40, shortName: String(((isOwner ? this.senderInfo : this.receiverInfo) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.senderInfo : this.receiverInfo) || {}).avatar }), index.h("div", { class: "chat-message--content" }, index.h("div", { class: "chat-message--message" }, message), timestamp && (index.h("div", { class: "chat-conversation--time" }, services.dayjs_min(timestamp).format('HH:mm')))))));
-    };
-    this.renderMessages = () => {
-      const isEmpty = (this.chatMessages || []).length === 0;
-      return (index.h("div", { class: "chat-messages" }, !isEmpty && this.chatMessages.map(this.renderMessage), isEmpty && (index.h("div", { style: { paddingTop: '48px', textAlign: 'center' } }, index.h("i", { class: "ri-bubble-chart-line", style: { fontSize: '48px' } }), index.h("div", { style: { color: 'rgba(0, 0, 0, 0.45)', marginTop: '8px' } }, "Enter a message on below to get starting"))), index.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 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) { }
-  }
-  renderForm() {
-    return (index.h("div", { style: { display: 'flex', height: '100%' } }, index.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();
-        }
-      } }), index.h("button", { type: "button", class: "btn btn-link", style: {
-        textDecoration: 'none',
-        display: 'flex',
-        height: '100%',
-        alignItems: 'center',
-      }, onClick: () => this.onSubmitMessage() }, index.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 (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--header-title" }, "Chat"), index.h("div", { class: "salon-modal--close", onClick: () => this.isChatExpanded = false, style: { position: 'static' } })), index.h("div", { style: {
-        flexShrink: '1',
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '16px',
-      } }, this.renderMessages()), index.h("div", { style: {
-        height: '50px',
-        minHeight: '50px',
-        paddingTop: '1',
-        borderTop: '1px solid rgb(245, 245, 245)',
-      } }, this.renderForm()))));
-  }
-};
-ChatButton.style = indexCss;
-
-exports.chat_button = ChatButton;

package/dist/cjs/colors-38421769.js

@@ -1,69 +0,0 @@
-'use strict';
-
-const Colors = {
-  TextColor: '#141414',
-  Black: '#000000',
-  White: '#ffffff',
-  Primary: '#F05A61',
-  Secondary: '#001529',
-  Black01: '#262626',
-  Black02: '#1f1f1f',
-  Black03: '#141414',
-  Gray01: '#F5F5F5',
-  Gray02: '#EFEFEF',
-  Gray03: '#DBDBDB',
-  Gray04: '#999999',
-  Gray05: '#666666',
-  Red01: '#FEEFEF',
-  Red02: '#F9BDC0',
-  Red03: '#F05A61',
-  Red04: '#C0484E',
-  Red05: '#90363A',
-  Orange01: '#FFF4F0',
-  Orange02: '#FFD1C3',
-  Orange03: '#FF8D69',
-  Orange04: '#CC7154',
-  Orange05: '#99553F',
-  Yellow01: '#FDFBF4',
-  Yellow02: '#F8EDD3',
-  Yellow03: '#EED291',
-  Yellow04: '#BEA874',
-  Yellow05: '#8F7E57',
-  Lilac01: '#F3F0F4',
-  Lilac02: '#CFC1D4',
-  Lilac03: '#886594',
-  Lilac04: '#6D5176',
-  Lilac05: '#523D59',
-  Blue01: '#EAECEE',
-  Blue02: '#AAB1BD',
-  Blue03: '#2B3C59',
-  Blue04: '#223047',
-  Blue05: '#1A2435',
-  Green01: '#ECF7ED',
-  Green02: '#B2E1B9',
-  Green03: '#3FB34F',
-  Green04: '#328F3F',
-  Green05: '#266B2F',
-  Success01: '#EEF9E8',
-  Success02: '#BAE7A3',
-  Success03: '#52C41A',
-  Success04: '#429D15',
-  Success05: '#317610',
-  Error01: '#FFEDED',
-  Error02: '#FFB8B9',
-  Error03: '#FF4D4F',
-  Error04: '#CC3E3F',
-  Error05: '#992E2F',
-  Warning01: '#FFF7E8',
-  Warning02: '#FDDEA1',
-  Warning03: '#FAAD14',
-  Warning04: '#C88A10',
-  Warning05: '#96680C',
-  Info01: '#E8F4FF',
-  Info02: '#A3D3FF',
-  Info03: '#1890FF',
-  Info04: '#1373CC',
-  Info05: '#0E5699',
-};
-
-exports.Colors = Colors;

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

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-47c2a5f6.js');
-require('./global-9073d10e.js');
-
-/*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
- */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('favesalon-embed.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
-};
-
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["chat-button.cjs",[[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.cjs",[[0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-lookbook.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-booking-modal.cjs",[[0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]]],["salon-gift-card.cjs",[[0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-gift-card-modal.cjs",[[0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]]],["salon-ranking.cjs",[[0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]]],["salon-services.cjs",[[0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-stylists.cjs",[[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.cjs",[[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.cjs",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]]], options);
-});
-
-exports.setNonce = index.setNonce;