favesalon-embed 1.0.3 → 1.0.4

package/dist/cjs/salon-stylists.cjs.entry.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dd8176c4.js');
+const colors = require('./colors-38421769.js');
+const services = require('./services-d1bdf299.js');
+require('./_commonjsHelpers-5cfcba41.js');
+
+const indexCss = ".view--salon-stylists{overflow:hidden;margin-left:-12px;margin-top:-12px}.view--salon-stylists .salon-stylist{float:left;padding-left:12px;padding-top:12px;width:50%}.view--salon-stylists .salon-stylist--avatar{height:180px}@media (min-width: 576px){.view--salon-stylists .salon-stylist{width:33.33%;max-width:240px}}@media (min-width: 768px){.view--salon-stylists{margin-left:-24px;margin-top:-24px}.view--salon-stylists .salon-stylist{padding-left:24px;padding-top:24px;width:264px;max-width:none}.view--salon-stylists .salon-stylist--avatar{height:240px}}";
+
+const pageLimit = 20;
+const SalonStylists = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonStylists = undefined;
+    this.totalStylists = undefined;
+    this.page = 1;
+    this.isLoading = undefined;
+    this.isLoadingMore = undefined;
+    this.canLoadMore = undefined;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      const { total, data } = await services.HttpService().fetchSalonStylists(this.salonId, { page: 1, limit: pageLimit });
+      this.totalStylists = total;
+      this.salonStylists = data;
+      this.canLoadMore = data.length === pageLimit;
+    }
+    catch (e) {
+      this.totalStylists = 0;
+      this.salonStylists = [];
+      this.canLoadMore = false;
+    }
+    this.isLoading = false;
+  }
+  async onLoadMore() {
+    this.isLoadingMore = true;
+    try {
+      const { data } = await services.HttpService().fetchSalonStylists(this.salonId, { page: this.page + 1, limit: pageLimit });
+      this.salonStylists = this.salonStylists.concat(data || []);
+      this.canLoadMore = data.length === pageLimit;
+      this.page += 1;
+    }
+    catch (e) { }
+    this.isLoadingMore = false;
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", null, index.h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index$1) => (index.h("div", { class: "salon-stylist" }, index.h("div", { class: "card", style: {
+          background: 'none',
+          border: 'none',
+          overflow: 'hidden',
+        } }, index.h("div", { class: "salon-stylist--avatar", style: {
+          backgroundColor: colors.Colors.Gray01,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center top',
+          backgroundSize: 'cover',
+          border: `1px solid ${colors.Colors.Gray01}`,
+          borderRadius: '8px',
+          position: 'relative',
+          display: 'flex',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        } }), index.h("div", { class: "card-body" }, index.h("div", { key: `stylist--${fakeId}--${index$1}`, style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '120px',
+          margin: 'auto',
+        } })))))))));
+    }
+    return (index.h("div", null, index.h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (index.h("div", { class: "salon-stylist" }, index.h("div", { class: "card", style: {
+        background: 'none',
+        border: 'none',
+        overflow: 'hidden',
+      } }, index.h("div", { class: "salon-stylist--avatar", style: {
+        backgroundImage: `url("${stylist.avatar}")`,
+        backgroundColor: colors.Colors.Gray01,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center top',
+        backgroundSize: 'cover',
+        border: `1px solid ${colors.Colors.Gray01}`,
+        borderRadius: '8px',
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      } }, !stylist.avatar && (index.h("span", { style: {
+        fontSize: '32px',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+      } }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), index.h("div", { class: "card-body" }, index.h("div", { style: {
+        fontSize: '18px',
+        fontWeight: '600',
+        textAlign: 'center',
+      } }, stylist.fullName))))))), this.canLoadMore && (index.h("div", { class: "view-footer", style: {
+        textAlign: 'center',
+        paddingTop: '32px',
+        paddingBottom: '16px',
+      } }, index.h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, style: {
+        background: colors.Colors.White,
+        border: `1px solid ${colors.Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      }, onClick: () => this.onLoadMore() }, "Load more")))));
+  }
+};
+SalonStylists.style = indexCss;
+
+exports.salon_stylists = SalonStylists;