favesalon-embed 1.0.3 → 1.0.4

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

@@ -0,0 +1,157 @@
+import { debounce, last } from 'lodash';
+import { h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+export class ChatRooms {
+  constructor() {
+    this.clickRoom = (chatRoom) => {
+      this.onClickRoom(chatRoom);
+    };
+    this.onSearchRooms = debounce((keyword) => {
+      this.keyword = keyword;
+    }, 500);
+    this.renderChatRoom = (chatRoom, index) => {
+      const { uid, members, messages } = chatRoom;
+      const receiverUser = members.find(user => user.id !== this.senderId);
+      const isActiveRoom = (this.activeRoom || {}).uid === uid;
+      let unreadMessages = 0;
+      const lastMessage = last(messages || []);
+      (messages || []).forEach(message => {
+        if (Boolean(message.unRead) && message.senderId !== this.senderId) {
+          unreadMessages += 1;
+        }
+      });
+      return (h("div", { key: `chat-room--${uid}-${index}`, class: `chat-room ${isActiveRoom ? 'is-active' : ''}`, onClick: () => !isActiveRoom && this.clickRoom(chatRoom) }, h("div", { class: "chat-room--user" }, h("user-avatar", { size: 48, avatar: receiverUser.avatar, name: h("div", { class: "chat-room--user-name" }, receiverUser.fullName), description: lastMessage && (h("div", { class: "chat-room--latest-message" }, lastMessage.senderId === this.senderId ? 'You: ' : '', lastMessage.message)), shortName: String(receiverUser.fullName || '').charAt(0) })), unreadMessages > 0 && (h("div", { class: "chat-room--user-indicator" }))));
+    };
+    this.senderId = undefined;
+    this.chatRooms = undefined;
+    this.activeRoom = undefined;
+    this.onClickRoom = undefined;
+    this.keyword = undefined;
+  }
+  render() {
+    const visibleRooms = (this.chatRooms || []).filter(chatRoom => {
+      if (this.keyword) {
+        const receiverUser = chatRoom.members.find(user => user.id !== this.senderId);
+        return String(receiverUser.fullName).toLowerCase().indexOf(String(this.keyword).toLowerCase()) > -1;
+      }
+      return true;
+    });
+    return (h("div", { class: "chat-rooms" }, h("div", { class: "chat-rooms--search" }, h("input", { autoComplete: "off", placeholder: "Enter a name...", onInput: evt => this.onSearchRooms(evt.target.value) })), h("div", { class: "chat-rooms--list" }, !this.chatRooms && [1, 2, 3, 4].map(fakeId => (h("div", { key: `chat-room--${fakeId}`, class: "chat-room" }, h("div", { class: "chat-room--user" }, h("div", { style: { display: "flex", alignItems: "center" } }, h("div", { style: {
+        backgroundColor: Colors.Gray02,
+        borderRadius: '50%',
+        height: `48px`,
+        width: `48px`,
+        minWidth: `48px`,
+      } }), h("div", { style: {
+        flexShrink: '1',
+        flexGrow: '1',
+        marginLeft: '12px',
+      } }, h("div", { style: {
+        backgroundColor: Colors.Gray02,
+        height: '16px',
+        width: '30%',
+      } }), h("div", { style: {
+        backgroundColor: Colors.Gray01,
+        marginTop: '12px',
+        height: '16px',
+        width: '60%',
+      } }))))))), this.chatRooms && visibleRooms.length > 0 && visibleRooms.map(this.renderChatRoom), this.chatRooms && visibleRooms.length === 0 && (h("div", { style: { color: Colors.Gray04, padding: '64px 24px', textAlign: 'center' } }, "No available users")))));
+  }
+  static get is() { return "chat-rooms"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "senderId": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sender-id",
+        "reflect": false
+      },
+      "chatRooms": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChatRoom[]",
+          "resolved": "ChatRoom[]",
+          "references": {
+            "ChatRoom": {
+              "location": "import",
+              "path": "../../types/chat"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "activeRoom": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChatRoom",
+          "resolved": "ChatRoom",
+          "references": {
+            "ChatRoom": {
+              "location": "import",
+              "path": "../../types/chat"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "onClickRoom": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(chatRoom: ChatRoom) => void",
+          "resolved": "(chatRoom: ChatRoom) => void",
+          "references": {
+            "ChatRoom": {
+              "location": "import",
+              "path": "../../types/chat"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "keyword": {}
+    };
+  }
+}

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

@@ -0,0 +1,5 @@
+google-map {
+  display: block;
+  width: 100%;
+  height: 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/dist/collection/components/salon-booking/index.css

@@ -0,0 +1,30 @@
+.salon-modal.salon-modal--booking:before {
+  display: none;
+}
+
+.salon-modal.salon-modal--booking .salon-modal--inner,
+.salon-modal.salon-modal--booking .salon-modal--content {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+}
+
+.salon-modal.salon-modal--booking .salon-modal--close {
+  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: 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": {}
+    };
+  }
+}

package/dist/collection/components/salon-gift-card/index.css

@@ -0,0 +1,30 @@
+.salon-modal.salon-modal--gift-card:before {
+  display: none;
+}
+
+.salon-modal.salon-modal--gift-card .salon-modal--inner,
+.salon-modal.salon-modal--gift-card .salon-modal--content {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+}
+
+.salon-modal.salon-modal--gift-card .salon-modal--close {
+  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--gift-card .salon-modal--close {
+    right: 20px;
+    top: 20px;
+  }
+}

package/dist/collection/components/salon-gift-card/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 SalonGiftCard {
+  constructor() {
+    this.salonId = undefined;
+    this.buttonClass = '';
+    this.buttonText = 'Buy Gift card';
+    this.primaryColor = Colors.Primary;
+  }
+  openModal() {
+    const elBookingModal = document.createElement('div');
+    elBookingModal.innerHTML = `
+      <salon-gift-card-modal
+        salon-id=${this.salonId}
+        primary-color=${this.primaryColor}
+      ></salon-gift-card-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-gift-card" }, h("div", { class: "salon-gift-card--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
+  }
+  static get is() { return "salon-gift-card"; }
+  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": "'Buy Gift card'"
+      },
+      "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"
+      }
+    };
+  }
+}