favesalon-embed 0.1.0 → 1.0.1

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import dayjs from 'dayjs';
 import { Colors } from '../../constants/colors';
 import { shortDateYearFormat } from '../../types/common';
@@ -19,10 +19,17 @@ const sortOptions = [{
   }];
 export class SalonReviews {
   constructor() {
+    this.salonId = undefined;
     this.primaryColor = Colors.Primary;
+    this.salonInfo = undefined;
     this.stats = {};
     this.totalReviews = 0;
     this.allReviews = [];
+    this.isLoading = undefined;
+    this.isSorting = undefined;
+    this.isFiltering = undefined;
+    this.isLoadingMore = undefined;
+    this.canLoadMore = undefined;
     this.page = 1;
     this.filterBy = [];
     this.sortBy = sortOptions[0].value;
@@ -96,191 +103,147 @@ export class SalonReviews {
   }
   render() {
     const ratingTexts = ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
-    return (h("div", { class: "view view--salon-reviews" },
-      h("div", { class: "salon-reviews--filters" },
-        h("div", { class: "salon-reviews--score" },
-          h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
-            return (h("i", { class: score <= this.stats.reviewPoint ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= this.stats.reviewPoint ? { color: this.primaryColor } : { color: Colors.Gray04 }) }));
-          })),
-          h("div", { class: "salon-review--rating--date", style: {
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginTop: '-8px',
-            } },
-            h("span", { style: { fontSize: '24px' } },
-              this.stats.reviewPoint,
-              "/5"),
-            " ",
-            h("span", { style: { color: Colors.Gray04, marginLeft: '8px' } },
-              "(",
-              this.stats.totalReviews,
-              " reviews)"))),
-        h("div", { class: "salon-reviews--filters--options", style: { marginTop: '24px' } },
-          h("div", { style: {
-              background: Colors.Gray01,
-              display: 'flex',
-              alignItems: 'center',
-              borderRadius: '4px',
-              padding: '16px',
-            } },
-            h("div", null,
-              h("input", { type: "checkbox", checked: this.filterBy.length === 0, onChange: () => {
-                  this.filterBy = [];
-                  this.onChangeFilter([]);
-                } }),
-              " ",
-              h("span", { style: { marginLeft: '4px' } }, "All reviews")),
-            [5, 4, 3, 2, 1].map(score => {
-              const isChecked = this.filterBy.indexOf(score) > -1;
-              return (h("div", { key: `salon-reviews--filters-score--${score}`, style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } },
-                h("input", { type: "checkbox", checked: isChecked, onChange: () => {
-                    const newFilter = isChecked ? this.filterBy.filter(fs => fs !== score) : this.filterBy.concat([score]);
-                    this.filterBy = newFilter;
-                    this.onChangeFilter(newFilter);
-                  } }),
-                " ",
-                h("span", { style: { display: 'flex', alignItems: 'center', marginLeft: '4px' } },
-                  score,
-                  " ",
-                  h("i", { class: "ri-heart-line", style: {
-                      fontSize: '16px',
-                      marginLeft: '4px',
-                      marginRight: '4px',
-                      lineHeight: '1',
-                    } }),
-                  " ",
-                  h("span", { style: { color: Colors.Gray04, fontSize: '12px' } },
-                    "(",
-                    this.stats[String(score)] || 0,
-                    ")"))));
-            })))),
-      h("div", { class: "salon-reviews--list-header", style: {
+    return (h("div", { class: "view view--salon-reviews" }, h("div", { class: "salon-reviews--filters" }, h("div", { class: "salon-reviews--score" }, h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
+      return (h("i", { class: score <= this.stats.reviewPoint ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= this.stats.reviewPoint ? { color: this.primaryColor } : { color: Colors.Gray04 }) }));
+    })), h("div", { class: "salon-review--rating--date", style: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: '-8px',
+      } }, h("span", { style: { fontSize: '24px' } }, this.stats.reviewPoint, "/5"), " ", h("span", { style: { color: Colors.Gray04, marginLeft: '8px' } }, "(", this.stats.totalReviews, " reviews)"))), h("div", { class: "salon-reviews--filters--options", style: { marginTop: '24px' } }, h("div", { style: {
+        background: Colors.Gray01,
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: '4px',
+        padding: '16px',
+      } }, h("div", null, h("input", { type: "checkbox", checked: this.filterBy.length === 0, onChange: () => {
+        this.filterBy = [];
+        this.onChangeFilter([]);
+      } }), " ", h("span", { style: { marginLeft: '4px' } }, "All reviews")), [5, 4, 3, 2, 1].map(score => {
+      const isChecked = this.filterBy.indexOf(score) > -1;
+      return (h("div", { key: `salon-reviews--filters-score--${score}`, style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } }, h("input", { type: "checkbox", checked: isChecked, onChange: () => {
+          const newFilter = isChecked ? this.filterBy.filter(fs => fs !== score) : this.filterBy.concat([score]);
+          this.filterBy = newFilter;
+          this.onChangeFilter(newFilter);
+        } }), " ", h("span", { style: { display: 'flex', alignItems: 'center', marginLeft: '4px' } }, score, " ", h("i", { class: "ri-heart-line", style: {
+          fontSize: '16px',
+          marginLeft: '4px',
+          marginRight: '4px',
+          lineHeight: '1',
+        } }), " ", h("span", { style: { color: Colors.Gray04, fontSize: '12px' } }, "(", this.stats[String(score)] || 0, ")"))));
+    })))), h("div", { class: "salon-reviews--list-header", style: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: '24px',
+      } }, h("div", { class: "view--salon-reviews--counter" }, this.totalReviews, " ", this.totalReviews === 1 ? `review` : `reviews`), h("div", { style: { display: 'flex', alignItems: 'center' } }, h("label", { style: { marginRight: '8px', color: Colors.Gray04 } }, "Sort by"), h("select", { class: "search-filter--select", "place-holder": "Most popular", disabled: this.isLoading, onChange: (evt) => {
+        this.sortBy = evt.target.value;
+        this.onChangeSorting(evt.target.value);
+      }, style: {
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: Colors.Gray01,
+        borderColor: Colors.Gray01,
+        borderRadius: '4px',
+        height: '40px',
+        width: '130px',
+      } }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy, key: `search-filter--select-option--${sortOption.value}` }, sortOption.label)))))), h("div", { class: "salon-reviews--list-content", style: { marginTop: '24px' } }, this.allReviews.map((review, idx) => {
+      const user = review.user || {};
+      return (h("div", { class: "salon-review", key: `salon-review--${idx}`, style: {
+          borderBottom: `1px solid ${Colors.Gray02}`,
+          marginBottom: '24px',
+          paddingBottom: '24px',
+        } }, h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: h("span", { style: { fontSize: '18px', fontWeight: '600', color: Colors.TextColor } }, (user.firstName || user.lastName) ? `${user.firstName || ''} ${user.lastName || ''}` : ''), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, 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", { key: `salon-review--rating--item--score--${score}`, class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
+          color: score <= review.point ? this.primaryColor : Colors.Gray04,
+          fontSize: '16px',
+          marginRight: '4px',
+        } }))), review.createdDate && (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: '600' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }), h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))), review.photos.length > 0 && (h("div", { style: {
           display: 'flex',
           flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginTop: '24px',
-        } },
-        h("div", { class: "view--salon-reviews--counter" },
-          this.totalReviews,
-          " ",
-          this.totalReviews === 1 ? `review` : `reviews`),
-        h("div", { style: { display: 'flex', alignItems: 'center' } },
-          h("label", { style: { marginRight: '8px', color: Colors.Gray04 } }, "Sort by"),
-          h("select", { class: "search-filter--select", "place-holder": "Most popular", disabled: this.isLoading, onChange: (evt) => {
-              this.sortBy = evt.target.value;
-              this.onChangeSorting(evt.target.value);
-            }, style: {
-              display: 'flex',
-              alignItems: 'center',
-              backgroundColor: Colors.Gray01,
-              borderColor: Colors.Gray01,
-              borderRadius: '4px',
-              height: '40px',
-              width: '130px',
-            } }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy, key: `search-filter--select-option--${sortOption.value}` }, sortOption.label)))))),
-      h("div", { class: "salon-reviews--list-content", style: { marginTop: '24px' } }, this.allReviews.map((review, idx) => {
-        const user = review.user || {};
-        return (h("div", { class: "salon-review", key: `salon-review--${idx}`, style: {
-            borderBottom: `1px solid ${Colors.Gray02}`,
-            marginBottom: '24px',
-            paddingBottom: '24px',
-          } },
-          h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } },
-            h("user-avatar", { size: 48, avatar: user.avatar, name: h("span", { style: { fontSize: '18px', fontWeight: '600', color: Colors.TextColor } }, (user.firstName || user.lastName) ? `${user.firstName || ''} ${user.lastName || ''}` : ''), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, 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", { key: `salon-review--rating--item--score--${score}`, class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
-                color: score <= review.point ? this.primaryColor : Colors.Gray04,
-                fontSize: '16px',
-                marginRight: '4px',
-              } }))),
-            review.createdDate && (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: '600' } }, ratingTexts[review.point]),
-          (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } },
-            h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }),
-            h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))),
-          review.photos.length > 0 && (h("div", { style: {
-              display: 'flex',
-              flexDirection: 'row',
-              overflowX: 'auto',
-            } }, review.photos.map(fileObj => (h("div", { key: `upload-file--${fileObj.id}`, class: "review--photo", style: {
-              position: 'relative',
-              cursor: 'pointer',
-              marginTop: '16px',
-              marginRight: '12px',
-            } },
-            h("img", { width: 72, src: fileObj.imageUrlThumb, style: { display: 'block' } }))))))));
-      })),
-      h("div", { class: "salon-reviews--list-footer", style: {
-          textAlign: 'center',
-          paddingTop: '16px',
-          paddingBottom: '16px',
-        } },
-        h("button", { class: "btn btn-light btn-lg", style: {
-            background: Colors.White,
-            border: `1px solid ${Colors.Gray02}`,
-            borderRadius: '4px',
-            paddingLeft: '24px',
-            paddingRight: '24px',
-          }, onClick: () => this.onLoadMore() }, "Load more"))));
+          overflowX: 'auto',
+        } }, review.photos.map(fileObj => (h("div", { key: `upload-file--${fileObj.id}`, class: "review--photo", style: {
+          position: 'relative',
+          cursor: 'pointer',
+          marginTop: '16px',
+          marginRight: '12px',
+        } }, h("img", { width: 72, src: fileObj.imageUrlThumb, style: { display: 'block' } }))))))));
+    })), h("div", { class: "salon-reviews--list-footer", style: {
+        textAlign: 'center',
+        paddingTop: '16px',
+        paddingBottom: '16px',
+      } }, h("button", { class: "btn btn-light btn-lg", style: {
+        background: Colors.White,
+        border: `1px solid ${Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      }, onClick: () => this.onLoadMore() }, "Load more"))));
   }
   static get is() { return "salon-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": ""
+  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": "primary-color",
-      "reflect": false,
-      "defaultValue": "Colors.Primary"
-    }
-  }; }
-  static get states() { return {
-    "salonInfo": {},
-    "stats": {},
-    "totalReviews": {},
-    "allReviews": {},
-    "isLoading": {},
-    "isSorting": {},
-    "isFiltering": {},
-    "isLoadingMore": {},
-    "canLoadMore": {},
-    "page": {},
-    "filterBy": {},
-    "sortBy": {}
-  }; }
+      "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 {
+      "salonInfo": {},
+      "stats": {},
+      "totalReviews": {},
+      "allReviews": {},
+      "isLoading": {},
+      "isSorting": {},
+      "isFiltering": {},
+      "isLoadingMore": {},
+      "canLoadMore": {},
+      "page": {},
+      "filterBy": {},
+      "sortBy": {}
+    };
+  }
 }

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

@@ -3,11 +3,14 @@ salon-schedules .salon-schedules--day {
   flex-direction: row;
   min-width: 240px;
 }
+
+
 @media (min-width: 768px) {
   salon-schedules .salon-schedules--dates {
     overflow: hidden;
     margin-left: -32px;
   }
+
   salon-schedules .salon-schedules--day {
     float: left;
     padding-left: 32px;