favesalon-embed 0.1.0 → 1.0.0

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Method, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import dayjs from 'dayjs';
 import { Colors } from '../../constants/colors';
 import { shortDateYearFormat } from '../../types/common';
@@ -6,8 +6,10 @@ 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();
@@ -23,154 +25,139 @@ export class SalonLatestReviews {
   }
   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',
-                      } })))))));
-        }))));
+      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' } }))))))))));
-      }))));
+    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"
-          }
+  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": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "salon-id",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "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

@@ -2,6 +2,8 @@ salon-latest-styles .view--salon-styles--item {
   width: 120px;
   height: 120px;
 }
+
+
 @media (min-width: 1024px) {
   salon-latest-styles .view--salon-styles--item {
     width: 200px;

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

@@ -1,8 +1,15 @@
-import { Component, Prop, h, Method, State } from '@stencil/core';
+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();
   }
@@ -31,148 +38,146 @@ export class SalonLatestStyles {
   }
   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: {
+          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%)',
-                } }))))));
-        })))));
+    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": ""
+  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
       },
-      "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"
-          }
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<boolean>"
+        "attribute": "is-loading",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "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/dist/collection/components/salon-locations/index.css

@@ -3,6 +3,7 @@
     overflow: hidden;
     margin-left: -32px;
   }
+
   salon-locations .salon-contact--links-item {
     float: left;
     display: flex;
@@ -12,9 +13,11 @@
     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;
   }