favesalon-embed 0.0.4 → 0.1.0

package/dist/esm/salon-services.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h } from './index-6af0a03d.js';
+import { H as HttpService, a as sortBy_1 } from './services-295247b1.js';
+import { C as Colors } from './colors-ea36347a.js';
+import './_commonjsHelpers-098d5b27.js';
+
+const indexCss = "";
+
+let SalonServices = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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_1(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_1(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(' · ')))))))))))));
+    })));
+  }
+};
+SalonServices.style = indexCss;
+
+export { SalonServices as salon_services };

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

@@ -0,0 +1,108 @@
+import { r as registerInstance, h } from './index-6af0a03d.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService } from './services-295247b1.js';
+import './_commonjsHelpers-098d5b27.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;
+let SalonStylists = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.page = 1;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      const { total, data } = await 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 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 (h("div", null, h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index) => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
+          background: 'none',
+          border: 'none',
+          overflow: 'hidden',
+        } }, h("div", { class: "salon-stylist--avatar", style: {
+          backgroundColor: Colors.Gray01,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center top',
+          backgroundSize: 'cover',
+          border: `1px solid ${Colors.Gray01}`,
+          borderRadius: '8px',
+          position: 'relative',
+          display: 'flex',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        } }), h("div", { class: "card-body" }, h("div", { key: `stylist--${fakeId}--${index}`, style: {
+          backgroundColor: Colors.Gray01,
+          height: '16px',
+          width: '120px',
+          margin: 'auto',
+        } })))))))));
+    }
+    return (h("div", null, h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
+        background: 'none',
+        border: 'none',
+        overflow: 'hidden',
+      } }, h("div", { class: "salon-stylist--avatar", style: {
+        backgroundImage: `url("${stylist.avatar}")`,
+        backgroundColor: Colors.Gray01,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center top',
+        backgroundSize: 'cover',
+        border: `1px solid ${Colors.Gray01}`,
+        borderRadius: '8px',
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      } }, !stylist.avatar && (h("span", { style: {
+        fontSize: '32px',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+      } }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), h("div", { class: "card-body" }, h("div", { style: {
+        fontSize: '18px',
+        fontWeight: '600',
+        textAlign: 'center',
+      } }, stylist.fullName))))))), this.canLoadMore && (h("div", { class: "view-footer", style: {
+        textAlign: 'center',
+        paddingTop: '32px',
+        paddingBottom: '16px',
+      } }, h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, style: {
+        background: Colors.White,
+        border: `1px solid ${Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      }, onClick: () => this.onLoadMore() }, "Load more")))));
+  }
+};
+SalonStylists.style = indexCss;
+
+export { SalonStylists as salon_stylists };