favesalon-embed 0.0.3 → 0.0.5

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"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,73 @@
+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.js

@@ -0,0 +1,77 @@
+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.js

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,12 @@
+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-latest-styles/index.js

@@ -0,0 +1,183 @@
+import { h } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+import { isVideoMedia } from '../../types/style';
+import HttpService from '../../services/services';
+export class SalonLatestStyles {
+  constructor() {
+    this.salonId = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.isLoadingState = undefined;
+    this.latestStyles = undefined;
+  }
+  componentDidLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoadingState = true;
+    try {
+      const promises = [
+        HttpService().fetchSalonLatestStyles(this.salonId, { limit: 6 })
+          .then(salonStyles => this.latestStyles = salonStyles),
+      ];
+      return Promise.all(promises)
+        .then(() => this.isLoadingState = false)
+        .catch(() => this.isLoadingState = false);
+    }
+    catch (e) { }
+  }
+  onClickLookbook(style) {
+    const elLookbookModal = document.createElement('div');
+    elLookbookModal.innerHTML = `
+      <style-detail
+        salon-id=${this.salonId}
+        salon-lookbook='${JSON.stringify(style)}'
+      ></style-detail>
+    `;
+    document.body.appendChild(elLookbookModal);
+  }
+  render() {
+    if (this.isLoading || this.isLoadingState) {
+      return (h("div", { class: "view view--salon-styles" }, h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, h("div", { style: {
+          backgroundColor: Colors.Gray02,
+          height: '20px',
+          width: '120px',
+        } }), h("div", { style: { marginTop: '24px' } }, h("div", { style: {
+          overflow: 'hidden',
+          marginLeft: '-16px',
+          marginBottom: '-16px',
+        } }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((fakeId, idx) => (h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
+          float: 'left',
+          paddingLeft: '16px',
+          marginBottom: '16px',
+        } }, h("div", { style: {
+          backgroundColor: Colors.Gray01,
+          borderRadius: '8px',
+          width: '120px',
+          height: '120px',
+          overflow: 'hidden',
+          position: 'relative',
+          cursor: 'pointer',
+        } })))))))));
+    }
+    return (h("div", { class: "view view--salon-styles" }, h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Photos"), h("div", { style: {
+        overflow: 'hidden',
+        marginLeft: '-16px',
+        marginBottom: '-16px',
+        marginTop: '16px',
+      } }, (this.latestStyles || []).map((faveStyle, idx) => {
+      const { imageThumb, albumMedias } = faveStyle;
+      const firstMedia = albumMedias.length > 0 ? albumMedias[0] : null;
+      const isVideo = firstMedia ? isVideoMedia(firstMedia) : false;
+      return (h("div", { key: `style-listing--item-${faveStyle.id}-${idx}`, style: {
+          float: 'left',
+          paddingLeft: '16px',
+          marginBottom: '16px',
+        } }, h("div", { class: "view--salon-styles--item", style: Object.assign({ backgroundColor: Colors.Gray01, borderRadius: '8px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, !isVideo && firstMedia ? {
+          backgroundImage: `url("${firstMedia.imageThumb || firstMedia.imageThumbMedium}")`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+        } : {}), onClick: () => this.onClickLookbook(faveStyle) }, isVideo && firstMedia && (h("div", null, h("video", { muted: true, width: "100%", height: "100%", poster: imageThumb }, h("source", { src: firstMedia.mediaUrl, type: "video/mp4" })), h("i", { class: "ri-play-circle-fill", style: {
+          fontSize: '48px',
+          color: Colors.TextColor,
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        } }))))));
+    })))));
+  }
+  static get is() { return "salon-latest-styles"; }
+  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
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-loading",
+        "reflect": false
+      },
+      "withBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "with-border",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoadingState": {},
+      "latestStyles": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fetchData": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}