favesalon-embed 1.0.1 → 1.0.3

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

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

package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js

@@ -1,73 +0,0 @@
-import { h } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class SalonGiftCardModal {
-  constructor() {
-    this.salonId = undefined;
-    this.primaryColor = Colors.Primary;
-    this.isModalOpen = true;
-  }
-  closeModal() {
-    this.isModalOpen = false;
-    const el = document.querySelector('salon-gift-card-modal');
-    el.remove();
-  }
-  render() {
-    const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
-    return (h("div", { class: "salon-gift-card--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--gift-card" }, 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/buy-gift-card?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
-  }
-  static get is() { return "salon-gift-card-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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isModalOpen": {}
-    };
-  }
-}

package/dist/collection/components/salon-info/index.css

@@ -1 +0,0 @@
-

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

@@ -1,77 +0,0 @@
-import { h } from '@stencil/core';
-import HttpService from '../../services/services';
-export class SalonInfo {
-  constructor() {
-    this.salonId = undefined;
-    this.salonInfo = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    try {
-      this.salonInfo = await HttpService().fetchSalonInfo(this.salonId);
-    }
-    catch (e) { }
-  }
-  render() {
-    return (h("div", { class: "salon-info" }, h("div", { class: "container" }, h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } }, h("salon-schedules", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "row" }, h("div", { class: "col-md-5", style: { marginBottom: '24px' } }, h("salon-locations", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "col-md-7", style: { marginBottom: '24px' } }, h("salon-latest-styles", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))))));
-  }
-  static get is() { return "salon-info"; }
-  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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "salonInfo": {}
-    };
-  }
-  static get methods() {
-    return {
-      "fetchData": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}

package/dist/collection/components/salon-latest-reviews/index.css

@@ -1,11 +0,0 @@
-.salon-latest-reviews .salon-review {
-  min-width: 280px;
-}
-
-
-
-@media (min-width: 768px) {
-  .salon-latest-reviews .salon-review {
-    min-width: 300px;
-  }
-}

package/dist/collection/components/salon-latest-reviews/index.js

@@ -1,163 +0,0 @@
-import { h } from '@stencil/core';
-import dayjs from 'dayjs';
-import { Colors } from '../../constants/colors';
-import { shortDateYearFormat } from '../../types/common';
-import { getRatingText } from '../../utils/utils';
-import HttpService from '../../services/services';
-export class SalonLatestReviews {
-  constructor() {
-    this.salonId = undefined;
-    this.primaryColor = Colors.Primary;
-    this.salonReviews = [];
-    this.isLoading = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    this.isLoading = true;
-    try {
-      const { data: allReviews } = await HttpService().fetchSalonReviews(this.salonId, { limit: 5 });
-      this.salonReviews = [...allReviews];
-    }
-    catch (e) { }
-    this.isLoading = false;
-  }
-  render() {
-    if (this.isLoading) {
-      return (h("div", { class: "salon-latest-reviews", style: { overflow: 'hidden' } }, h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, [1, 2, 3, 4, 5].map((fakeId, index) => {
-        return (h("div", { key: `salon-latest-review--${fakeId}`, class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray02}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) }, h("div", { class: "card", style: { border: 'none' } }, h("div", { class: "card-body" }, h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, h("div", { style: {
-            backgroundColor: Colors.Gray02,
-            borderRadius: '50px',
-            height: '48px',
-            width: '48px',
-            float: 'left',
-          } }), h("div", { style: {
-            backgroundColor: Colors.Gray01,
-            height: '16px',
-            width: '120px',
-            marginLeft: '16px',
-            marginTop: '14px',
-            float: 'left',
-          } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(() => (h("div", { style: {
-            backgroundColor: Colors.Gray01,
-            height: '20px',
-            width: '20px',
-            marginRight: '8px',
-            float: 'left',
-          } })))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold', marginTop: '16px' } }, h("div", { style: {
-            backgroundColor: Colors.Gray01,
-            height: '16px',
-            width: '132px',
-          } })), h("div", { class: "salon-review--detail", style: { marginTop: '8px' } }, h("div", { class: "salon-review--description", style: {
-            fontSize: '16px',
-            lineHeight: '26px',
-            overflow: 'hidden',
-          } }, h("div", { style: {
-            backgroundColor: Colors.Gray01,
-            height: '16px',
-            width: '240px',
-            float: 'left',
-          } })))))));
-      }))));
-    }
-    const ratingTexts = getRatingText();
-    return (h("div", { class: "salon-latest-reviews", style: { overflowX: 'auto' } }, h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, (this.salonReviews || []).map((review, index) => {
-      const { user } = review;
-      return (h("div", { class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray02}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) }, h("div", { class: "card", style: { border: 'none' } }, h("div", { class: "card-body" }, h("div", { class: "salon-review--user", style: { marginBottom: '16px' } }, h("user-avatar", { size: 48, name: h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, avatar: user.avatar, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '16px', marginRight: '4px' }, score <= review.point ? { color: this.primaryColor } : { color: Colors.Gray04 }) }))), h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, dayjs(review.createdDate).format(shortDateYearFormat))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--description", style: {
-          fontSize: '16px',
-          lineHeight: '26px',
-          overflow: 'hidden',
-          maxHeight: review.photos.length > 0 ? '52px' : '104px',
-        } }, review.title || review.description))), review.photos.length > 0 && (h("div", { style: {
-          display: 'flex',
-          flexDirection: 'row',
-          overflowX: 'auto',
-        } }, review.photos.map(photo => (h("div", { style: {
-          border: '1px solid #d9d9d9',
-          position: 'relative',
-          cursor: 'pointer',
-          borderRadius: '2px',
-          height: '66px',
-          marginTop: '12px',
-          marginRight: '12px',
-        } }, h("img", { alt: "", src: photo.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))))));
-    }))));
-  }
-  static get is() { return "salon-latest-reviews"; }
-  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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "salonReviews": {},
-      "isLoading": {}
-    };
-  }
-  static get methods() {
-    return {
-      "fetchData": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}

package/dist/collection/components/salon-latest-styles/index.css

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

package/dist/collection/components/salon-locations/index.css

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

package/dist/collection/components/salon-lookbook/index.css

@@ -1,15 +0,0 @@
-@media (max-width: 768px) {
-  salon-lookbook .view-header {
-    display: block !important;
-  }
-
-  salon-lookbook .salon-loobook--serch-result {
-    margin-bottom: 16px;
-  }
-
-  salon-lookbook .salon-loobook--filter-wrapper > label,
-  salon-lookbook .salon-loobook--sort-wrapper > label {
-    display: none !important;
-  }
-}
-