favesalon-embed 0.0.2 → 0.1.0

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

@@ -0,0 +1,286 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import dayjs from 'dayjs';
+import { Colors } from '../../constants/colors';
+import { shortDateYearFormat } from '../../types/common';
+import HttpService from '../../services/services';
+const pageLimited = 10;
+const sortOptions = [{
+    value: 'newest',
+    label: 'Newest first',
+  }, {
+    value: 'oldest',
+    label: 'Oldest first',
+  }, {
+    value: 'rating_desc',
+    label: 'High rating first',
+  }, {
+    value: 'rating_asc',
+    label: 'Low rating first',
+  }];
+export class SalonReviews {
+  constructor() {
+    this.primaryColor = Colors.Primary;
+    this.stats = {};
+    this.totalReviews = 0;
+    this.allReviews = [];
+    this.page = 1;
+    this.filterBy = [];
+    this.sortBy = sortOptions[0].value;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  fetchData() {
+    this.isLoading = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, {
+        page: 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, stats, data: allReviews } = response;
+        this.stats = stats;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = total > pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isLoading = false;
+  }
+  onLoadMore() {
+    this.isLoadingMore = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, {
+        page: this.page + 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = this.page + 1;
+        this.totalReviews = total;
+        this.allReviews = this.allReviews.concat(allReviews);
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isLoadingMore = false;
+  }
+  onChangeFilter(filterBy) {
+    this.isFiltering = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: this.sortBy, limit: pageLimited }, filterBy.length > 0 ? { avg_point: filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isFiltering = false;
+  }
+  onChangeSorting(sortBy) {
+    this.isSorting = true;
+    try {
+      HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: sortBy, limit: pageLimited }, this.filterBy.length > 0 ? { avg_point: this.filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
+    }
+    catch (e) { }
+    this.isSorting = false;
+  }
+  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: {
+          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"))));
+  }
+  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": ""
+      },
+      "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

@@ -0,0 +1,15 @@
+salon-schedules .salon-schedules--day {
+  display: flex;
+  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;
+  }
+}

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

@@ -0,0 +1,189 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import { BusinessHourStatus } from '../../types/salon';
+import HttpService from '../../services/services';
+import { Colors } from '../../constants/colors';
+export class SalonSchedules {
+  componentWillLoad() {
+    if (this.salonInfo) {
+      this.salonInfoState = JSON.parse(this.salonInfo);
+    }
+    else {
+      this.fetchData();
+    }
+  }
+  fetchData() {
+    try {
+      HttpService().fetchSalonInfo(this.salonId)
+        .then(salonInfo => this.salonInfoState = salonInfo);
+    }
+    catch (e) { }
+  }
+  renderBusinessHour(businessHour) {
+    if (businessHour.status === BusinessHourStatus.ByAppointment) {
+      return 'By Appointment';
+    }
+    if (businessHour.status === BusinessHourStatus.Close) {
+      return 'Close';
+    }
+    return `${businessHour.openTime} - ${businessHour.closeTime}`;
+  }
+  render() {
+    if (this.isLoading) {
+      return (h("div", { class: "view view--salon-contact" },
+        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: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '30%',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '40%',
+                marginTop: '8px',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '75%',
+                marginTop: '12px',
+              } }),
+            h("div", { style: {
+                backgroundColor: Colors.Gray01,
+                height: '16px',
+                width: '75%',
+                marginTop: '8px',
+              } })),
+          h("div", { style: { marginTop: '24px' } },
+            h("div", { style: {
+                overflow: 'hidden',
+                marginLeft: '-16px',
+                marginBottom: '-16px',
+              } }, [1, 2, 3, 4, 5, 6, 7].map((fakeId, idx) => (h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
+                float: 'left',
+                paddingLeft: '16px',
+                marginBottom: '16px',
+              } },
+              h("div", { style: {
+                  backgroundColor: Colors.Gray01,
+                  width: '120px',
+                  height: '20px',
+                } })))))))));
+    }
+    const { about, businessHours, } = (this.salonInfoState || {});
+    return (h("div", { class: "view view--salon-contact" },
+      h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } },
+        h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "About"),
+        about && (h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about })),
+        businessHours && businessHours.length > 0 && (h("div", { class: "salon-schedules", style: { marginTop: '24px' } },
+          h("div", { class: "salon-schedules--title", style: { fontSize: '16px', fontWeight: 'bold' } }, "Working hours"),
+          h("div", { class: "salon-schedules--dates" },
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Mon"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[0]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Tue"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[1]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Wed"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[2]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Thur"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[3]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Fri"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[4]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sat"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[5]))),
+            h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
+              h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sun"),
+              h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[6])))))))));
+  }
+  static get is() { return "salon-schedules"; }
+  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
+    },
+    "salonInfo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-info",
+      "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 {
+    "salonInfoState": {}
+  }; }
+}

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

@@ -0,0 +1,156 @@
+import { Component, Prop, h, Method, State } from '@stencil/core';
+import sortBy from 'lodash/sortBy';
+import { Colors } from '../../constants/colors';
+import HttpService from '../../services/services';
+export class SalonServices {
+  constructor() {
+    this.buttonClass = 'btn btn-light';
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      this.salonServices = await HttpService().fetchSalonServices(this.salonId);
+    }
+    catch (e) {
+      this.salonServices = [];
+    }
+    this.isLoading = false;
+  }
+  render() {
+    if (this.isLoading) {
+      return (h("div", { class: "salon-services--container" },
+        h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray01}` } },
+          h("div", { class: "view-content", style: { overflowX: 'auto' } },
+            h("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden' } }, [1, 2, 3, 4, 5, 6].map((fakeId, index) => (h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                backgroundColor: Colors.Gray02,
+                float: 'left',
+                marginRight: '12px',
+                height: '30px',
+                width: '120px',
+              } })))))),
+        [1, 2, 3, 4, 5, 6].map((fakeId, index) => {
+          return (h("div", { id: `service-group--${fakeId}`, style: { marginTop: '32px' } },
+            h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                backgroundColor: Colors.Gray03,
+                height: '20px',
+                width: '120px',
+              } }),
+            h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray01}`, marginTop: '12px' } },
+              h("div", { class: "view-content" }, [1, 2, 3].map((fakeGroupId, fakeGroupIndex) => (h("div", { key: `service-group--${fakeId}--service-${fakeGroupId}--${fakeGroupIndex}`, class: "salon-service" },
+                h("div", { class: "salon-service--name", style: Object.assign({}, fakeGroupIndex > 0 ? {
+                    marginTop: '12px',
+                    paddingTop: '12px',
+                    borderTop: `1px solid ${Colors.Gray01}`,
+                  } : {}) },
+                  h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                      backgroundColor: Colors.Gray01,
+                      height: '16px',
+                      width: '120px',
+                    } })),
+                h("div", { style: { marginTop: '4px' } },
+                  h("div", { style: {
+                      backgroundColor: Colors.Gray01,
+                      height: '16px',
+                      width: '240px',
+                    } })))))))));
+        })));
+    }
+    return (h("div", { class: "salon-services--container" },
+      h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray02}` } },
+        h("div", { class: "view-content", style: { overflowX: 'auto' } },
+          h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` },
+            h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))),
+      sortBy(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
+        const hasMultipleCates = (serviceGroup.data || []).length > 1;
+        return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } },
+          h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name),
+          h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray02}` } },
+            h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" },
+              hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray02}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)),
+              (subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" },
+                h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
+                    marginTop: '12px',
+                    paddingTop: '12px',
+                    borderTop: `1px solid ${Colors.Gray01}`,
+                  } : {}) }, service.name),
+                (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
+                    display: 'block',
+                    marginTop: '4px',
+                    fontSize: '90%',
+                    color: Colors.Gray05,
+                  } }, [
+                  !service.hideDuration ? `${service.duration} mins` : '',
+                  !service.hidePrice ? `$${service.price}` : '',
+                ].filter(field => !!field).join(' · ')))))))))))));
+      })));
+  }
+  static get is() { return "salon-services"; }
+  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
+    },
+    "buttonClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-class",
+      "reflect": false,
+      "defaultValue": "'btn btn-light'"
+    }
+  }; }
+  static get states() { return {
+    "salonServices": {},
+    "isLoading": {}
+  }; }
+  static get methods() { return {
+    "fetchData": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}