favesalon-embed 0.0.4 → 1.0.0

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>
+//     );
+//   }
+// }

package/{collection → dist/collection}/components/google-map/index.css

@@ -1,4 +1,3 @@
-#google-map-container,
 google-map {
   display: block;
   width: 100%;

package/dist/collection/components/google-map/index.js

@@ -0,0 +1,90 @@
+import { getAssetPath, h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+export class GoogleMap {
+  constructor() {
+    this.locationName = undefined;
+    this.locationAddress = undefined;
+  }
+  render() {
+    const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
+    return (h("div", { style: {
+        backgroundImage: `url("${mapPlaceholder}")`,
+        backgroundColor: Colors.Gray01,
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        borderRadius: '8px',
+        position: 'relative',
+        height: '296px',
+      } }, h("div", { style: {
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      } }, h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
+        backgroundColor: Colors.Red01,
+        border: `1px solid ${Colors.Red02}`,
+        borderRadius: '4px',
+        color: Colors.TextColor,
+        padding: '12px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        height: 'auto',
+        width: 'auto',
+        whiteSpace: 'normal',
+        textAlign: 'left',
+        maxWidth: '320px',
+        textDecoration: 'none',
+      } }, this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)), h("div", { style: { marginTop: '8px', textAlign: 'center' } }, h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
+  }
+  static get is() { return "google-map"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "locationName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "location-name",
+        "reflect": false
+      },
+      "locationAddress": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "location-address",
+        "reflect": false
+      }
+    };
+  }
+}

package/{collection → dist/collection}/components/salon-booking/index.css

@@ -10,30 +10,21 @@
 }
 
 .salon-modal.salon-modal--booking .salon-modal--close {
-  width: 48px;
-  height: 48px;
-  right: 10px;
-  top: 12px;
-}
-
-
-@media (min-width: 576px) {
-  .salon-modal.salon-modal--booking .salon-modal--close {
-    right: 16px;
-  }
+  background-color: #EFEFEF;
+  width: 40px;
+  height: 40px;
+  right: 16px;
+  top: 16px;
+
+  -moz-border-radius: 50px;
+  -webkit-border-radius: 50px;
+  border-radius: 50px;
 }
 
 
 @media (min-width: 768px) {
   .salon-modal.salon-modal--booking .salon-modal--close {
-    right: 24px;
-  }
-}
-
-
-@media (min-width: 1200px) {
-  .salon-modal.salon-modal--booking .salon-modal--close {
-    right: 50%;
-    margin-right: -585px;
+    right: 20px;
+    top: 20px;
   }
 }

package/dist/collection/components/salon-booking/index.js

@@ -0,0 +1,126 @@
+import { h } from '@stencil/core';
+import Color from 'color';
+import { css } from 'glamor';
+import { Colors } from '../../constants/colors';
+export class SalonBooking {
+  constructor() {
+    this.salonId = undefined;
+    this.buttonClass = '';
+    this.buttonText = 'Book now';
+    this.primaryColor = Colors.Primary;
+  }
+  openModal() {
+    const elBookingModal = document.createElement('div');
+    elBookingModal.innerHTML = `
+      <salon-booking-modal
+        salon-id=${this.salonId}
+        primary-color=${this.primaryColor}
+      ></salon-booking-modal>
+    `;
+    document.body.appendChild(elBookingModal);
+  }
+  render() {
+    const buttonClass = this.buttonClass || 'btn btn-primary';
+    let buttonStyle = {};
+    if (!this.buttonClass) {
+      const primaryColor = Color(this.primaryColor);
+      const primaryColorHover = primaryColor.darken(0.05);
+      buttonStyle = css({
+        backgroundColor: this.primaryColor,
+        borderColor: this.primaryColor,
+        color: primaryColor.isLight() ? Colors.Black01 : Colors.White,
+        ':hover': {
+          backgroundColor: primaryColorHover,
+          borderColor: primaryColorHover,
+        },
+      });
+    }
+    return (h("div", { class: "salon-booking" }, h("div", { class: "salon-booking--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
+  }
+  static get is() { return "salon-booking"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "salonId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-id",
+        "reflect": false
+      },
+      "buttonClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-class",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "buttonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-text",
+        "reflect": false,
+        "defaultValue": "'Book now'"
+      },
+      "primaryColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "primary-color",
+        "reflect": false,
+        "defaultValue": "Colors.Primary"
+      }
+    };
+  }
+}

package/dist/collection/components/salon-booking/salon-booking-modal.js

@@ -0,0 +1,92 @@
+import { h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+export class SalonBookingModal {
+  constructor() {
+    this.salonId = undefined;
+    this.primaryColor = Colors.Primary;
+    this.redirectUrl = window.btoa(window.location.href);
+    this.isModalOpen = true;
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('salon-booking-modal');
+    el.remove();
+  }
+  render() {
+    const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
+    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
+  }
+  static get is() { return "salon-booking-modal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "salonId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-id",
+        "reflect": false
+      },
+      "primaryColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "primary-color",
+        "reflect": false,
+        "defaultValue": "Colors.Primary"
+      },
+      "redirectUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "redirect-url",
+        "reflect": false,
+        "defaultValue": "window.btoa(window.location.href)"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isModalOpen": {}
+    };
+  }
+}