favesalon-embed 0.0.2 → 0.1.0

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

@@ -0,0 +1,25 @@
+.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/{collection → dist/collection}/components/salon-gift-card/index.js

@@ -1,26 +1,46 @@
 import { Component, Prop, h } from '@stencil/core';
+import Color from 'color';
+import { css } from 'glamor';
+import { Colors } from '../../constants/colors';
 export class SalonGiftCard {
   constructor() {
+    this.buttonClass = '';
     this.buttonText = 'Buy Gift card';
-    this.buttonClass = 'btn btn-primary';
+    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", { type: "button", class: this.buttonClass, onClick: () => this.openModal() }, this.buttonText))));
+        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"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -43,6 +63,24 @@ export class SalonGiftCard {
       "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,
@@ -61,7 +99,7 @@ export class SalonGiftCard {
       "reflect": false,
       "defaultValue": "'Buy Gift card'"
     },
-    "buttonClass": {
+    "primaryColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -75,9 +113,9 @@ export class SalonGiftCard {
         "tags": [],
         "text": ""
       },
-      "attribute": "button-class",
+      "attribute": "primary-color",
       "reflect": false,
-      "defaultValue": "'btn btn-primary'"
+      "defaultValue": "Colors.Primary"
     }
   }; }
 }

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

@@ -1,19 +1,27 @@
 import { Component, Prop, h, State } from '@stencil/core';
+import { Colors } from '../../constants/colors';
 export class SalonGiftCardModal {
   constructor() {
+    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.isModalOpen = false }),
+      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--close", onClick: () => this.isModalOpen = false }),
         h("div", { class: "salon-modal--content" },
-          h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/salon/detail/${this.salonId}/gift-cards.html` })))))));
+          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"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -35,6 +43,24 @@ export class SalonGiftCardModal {
       },
       "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 {

package/{collection → dist/collection}/components/salon-info/index.js

@@ -1,10 +1,6 @@
 import { Component, Prop, h, Method, State } from '@stencil/core';
 import HttpService from '../../services/services';
-import { Colors } from '../../constants/colors';
 export class SalonInfo {
-  constructor() {
-    this.backgroundColor = Colors.Gray06;
-  }
   componentWillLoad() {
     this.fetchData();
   }
@@ -15,19 +11,15 @@ export class SalonInfo {
     catch (e) { }
   }
   render() {
-    if (this.salonInfo) {
-      return (h("div", { class: "salon-info", style: { background: this.backgroundColor } },
+    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", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })),
+            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-styles", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))),
-        h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } },
-          h("salon-schedules", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })),
-        h("div", { class: "salon-info--contact" },
-          h("salon-contact", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))));
-    }
-    return (h("div", { class: "salon-info", style: { padding: '24px', textAlign: 'center' } }, "Loading..."));
+            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 {
@@ -53,24 +45,6 @@ export class SalonInfo {
       },
       "attribute": "salon-id",
       "reflect": false
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "Colors.Gray06"
     }
   }; }
   static get states() { return {

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

@@ -1,9 +1,6 @@
 .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

@@ -0,0 +1,176 @@
+import { Component, Prop, h, Method, State } 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.primaryColor = Colors.Primary;
+    this.salonReviews = [];
+  }
+  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.less"]
+  }; }
+  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,10 @@
+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,178 @@
+import { Component, Prop, h, Method, State } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+import { isVideoMedia } from '../../types/style';
+import HttpService from '../../services/services';
+export class SalonLatestStyles {
+  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.less"]
+  }; }
+  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": []
+      }
+    }
+  }; }
+}

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

@@ -1,10 +1,9 @@
 @media (min-width: 768px) {
-  .salon-contact--links {
+  salon-locations .salon-contact--links {
     overflow: hidden;
     margin-left: -32px;
   }
-
-  .salon-contact--links .salon-contact--links-item {
+  salon-locations .salon-contact--links-item {
     float: left;
     display: flex;
     flex-direction: row;
@@ -12,10 +11,11 @@
     font-size: 16px;
     min-width: 300px;
     padding-left: 32px;
-    margin-top: 8px;
   }
-
-  .salon-contact--links .salon-contact--links-item:nth-child(2n + 1) {
+  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;
+  }
 }