favesalon-embed 0.1.0 → 1.0.1

package/dist/cjs/style-detail.cjs.entry.js

@@ -2,27 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e6bea8f5.js');
-const services = require('./services-eee8f251.js');
-const _commonjsHelpers = require('./_commonjsHelpers-5cfcba41.js');
+const index = require('./index-47c2a5f6.js');
+const services = require('./services-125c82d8.js');
+const relativeTime = require('./relativeTime-3721080d.js');
 const colors = require('./colors-38421769.js');
-
-var relativeTime = _commonjsHelpers.createCommonjsModule(function (module, exports) {
-!function(r,e){module.exports=e();}(_commonjsHelpers.commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
-});
+require('./_commonjsHelpers-5cfcba41.js');
 
 const indexCss = ".salon-modal.salon-modal--lookbook-detail .salon-modal--close{display:none !important}.salon-modal.salon-modal--lookbook-detail .salon-modal--content{background-color:#fff;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1000;overflow-y:auto}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:240px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnails{text-align:center}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{display:inline-block;margin-top:12px;margin-right:12px;height:40px;width:60px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--button{border:none;position:absolute;top:50%;z-index:20;height:40px;width:40px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--prev{left:24px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--next{right:24px}@media (min-width: 768px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:360px !important}}@media (min-width: 992px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:480px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{height:56px;width:72px}}";
 
-services.dayjs_min.extend(relativeTime);
-let StyleDetail = class {
+services.dayjs_min.extend(relativeTime.relativeTime);
+const StyleDetail = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonLookbook = undefined;
+    this.lookbookInfo = undefined;
     this.isModalOpen = true;
     this.currentMediaIdx = 0;
+    this.currentMedia = undefined;
     this.albumMedias = [];
     this.similarStyles = [];
     this.totalComments = 0;
     this.lookbookComments = [];
+    this.isLayoutSetup = undefined;
   }
   componentWillLoad() {
     this.injectSDK();

package/dist/cjs/user-avatar.cjs.entry.js

@@ -2,15 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e6bea8f5.js');
+const index = require('./index-47c2a5f6.js');
 const colors = require('./colors-38421769.js');
 
 const indexCss = "";
 
-let UserAvatar = class {
+const UserAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.size = 24;
+    this.name = undefined;
+    this.nameStyle = undefined;
+    this.shortName = undefined;
+    this.avatar = undefined;
   }
   render() {
     return (index.h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (index.h("div", { style: {
@@ -33,7 +37,7 @@ let UserAvatar = class {
         height: `${this.size}px`,
         width: `${this.size}px`,
         minWidth: `${this.size}px`,
-      } }, this.shortName)), index.h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name)));
+      } }, this.shortName)), this.name && (index.h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name))));
   }
 };
 UserAvatar.style = indexCss;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/chat-button/index.js",
     "./components/google-map/index.js",
     "./components/salon-booking/index.js",
     "./components/salon-booking/salon-booking-modal.js",
@@ -20,8 +21,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.9.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.22.3",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/chat-button/index.css

@@ -0,0 +1,122 @@
+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;
+  }
+}

package/dist/collection/components/chat-button/index.js

@@ -0,0 +1,218 @@
+import dayjs from 'dayjs';
+import { h } from '@stencil/core';
+import HttpService from '../../services/services';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
+export class ChatButton {
+  constructor() {
+    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(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()))));
+  }
+  static get is() { return "chat-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "primaryColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "primary-color",
+        "reflect": false
+      },
+      "accessToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "access-token",
+        "reflect": false
+      },
+      "senderId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sender-id",
+        "reflect": false
+      },
+      "receiverId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "receiver-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "senderInfo": {},
+      "receiverInfo": {},
+      "chatRoom": {},
+      "chatMessages": {},
+      "isChatExpanded": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fetchData": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/chat-conversation/index.js

@@ -0,0 +1,103 @@
+// import { Component, Prop, h, Method, State } from '@stencil/core';
+// import { User } from '../../types/user';
+// import { ChatMessage, ChatRoom } from '../../types/chat';
+// import HttpService from '../../services/services';
+// @Component({
+//   tag: 'chat-conversation',
+//   styleUrl: 'index.css',
+// })
+// export class ChatButton {
+//   @Prop() primaryColor: string;
+//   @Prop() accessToken: string;
+//   @Prop() sender: User;
+//   @Prop() receiver: User;
+//   @State() chatRoom: ChatRoom;
+//   @State() chatMessages: ChatMessage[];
+//   componentWillLoad() {
+//     this.senderInfo = this.sender ? JSON.parse(this.sender) : null;
+//     this.receiverInfo = this.receiver ? JSON.parse(this.receiver) : null;
+//     this.fetchData();
+//   }
+//   @Method()
+//   async fetchData() {
+//     try {
+//       const chatRooms: ChatRoom[] = await HttpService().fetchChatRooms(this.accessToken);
+//       this.chatRoom = (chatRooms || []).find(chatRoom => {
+//         return chatRoom.members.find(user => user.id === this.receiverInfo.id);
+//       });
+//       if (this.chatRoom) {
+//         HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
+//       }
+//     } catch(e) {}
+//   }
+//   render() {
+//     return (
+//       <div>
+//         <div
+//           class="chat-button--indicator"
+//           onClick={() => this.isChatExpanded = true}
+//         >
+//           <span class="chat-button--counter"></span>
+//         </div>
+//         <div
+//           class="chat-box"
+//           style={this.isChatExpanded ? {} : { display: 'none' }}
+//         >
+//           <div style={{
+//             backgroundColor: this.primaryColor || '#f05a61',
+//             display: 'flex',
+//             justifyContent: 'space-between',
+//             padding: '16px',
+//             position: 'relative',
+//             borderRadius: '8px 8px 0px 0px',
+//           }}>
+//             <h3 style={{
+//               color: '#fff',
+//               fontSize: '20px',
+//               fontWeight: '600',
+//               lineHeight: '1',
+//               display: 'flex',
+//               alignItems: 'center',
+//               justifyContent: 'space-between',
+//               margin: '0',
+//             }}>Chat</h3>
+//             <div
+//               class="salon-modal--close"
+//               onClick={() => this.isChatExpanded = false}
+//               style={{ position: 'static' }}
+//             />
+//           </div>
+//           <div style={{
+//             flexShrink: '1',
+//             flexGrow: '1',
+//             display: 'flex',
+//             flexDirection: 'column',
+//           }}>
+//             <div style={{ padding: '16px', flexGrow: '1', flexShrink: '1' }}>
+//               {/* <ChatConversation
+//                 sender={senderUser}
+//                 receiver={receiverUser}
+//                 chatRoom={currentChatRoom}
+//                 chatMessages={messages || []}
+//               /> */}
+//               ChatConversation
+//             </div>
+//             <div style={{
+//               height: '50px',
+//               paddingTop: '1',
+//               borderTop: '1px solid rgb(245, 245, 245)',
+//             }}>
+//               {/* <ChatForm
+//                 sender={senderUser}
+//                 receiver={receiverUser}
+//                 chatRoom={currentChatRoom}
+//                 onSendMessageSuccess={(chatMessage) => {}}
+//               /> */}
+//               Chat form
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }
+// }