favesalon-embed 1.0.2 → 1.0.4

package/dist/esm/salon-latest-styles_3.entry.js

@@ -0,0 +1,235 @@
+import { r as registerInstance, h } from './index-0494771f.js';
+import { C as Colors } from './colors-ea36347a.js';
+import { H as HttpService, i as isVideoMedia, B as BusinessHourStatus } from './services-257442e2.js';
+import { f as formatWebsiteUrl, a as formatFullAddress } from './utils-e97485e0.js';
+import './_commonjsHelpers-66ac50f5.js';
+
+const indexCss$2 = "salon-latest-styles .view--salon-styles--item{width:120px;height:120px}@media (min-width: 1024px){salon-latest-styles .view--salon-styles--item{width:200px;height:200px}}";
+
+const SalonLatestStyles = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.isLoadingState = undefined;
+    this.latestStyles = undefined;
+  }
+  componentDidLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoadingState = true;
+    try {
+      const promises = [
+        HttpService().fetchSalonLatestStyles(this.salonId, { limit: 6 })
+          .then(salonStyles => this.latestStyles = salonStyles),
+      ];
+      return Promise.all(promises)
+        .then(() => this.isLoadingState = false)
+        .catch(() => this.isLoadingState = false);
+    }
+    catch (e) { }
+  }
+  onClickLookbook(style) {
+    const elLookbookModal = document.createElement('div');
+    elLookbookModal.innerHTML = `
+      <style-detail
+        salon-id=${this.salonId}
+        salon-lookbook='${JSON.stringify(style)}'
+      ></style-detail>
+    `;
+    document.body.appendChild(elLookbookModal);
+  }
+  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: { 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%)',
+        } }))))));
+    })))));
+  }
+};
+SalonLatestStyles.style = indexCss$2;
+
+const indexCss$1 = "@media (min-width: 768px){salon-locations .salon-contact--links{overflow:hidden;margin-left:-32px}salon-locations .salon-contact--links-item{float:left;display:flex;flex-direction:row;align-items:center;font-size:16px;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}}";
+
+const SalonLocations = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonInfo = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.salonInfoState = undefined;
+  }
+  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) { }
+  }
+  render() {
+    if (this.isLoading) {
+      return (h("div", { class: "view view--salon-locations" }, 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: '50%',
+        } }), h("div", { style: {
+          backgroundColor: Colors.Gray01,
+          height: '16px',
+          width: '50%',
+          marginTop: '8px',
+        } }), h("div", { style: {
+          backgroundColor: Colors.Gray01,
+          height: '192px',
+          width: '100%',
+          marginTop: '24px',
+        } })))));
+    }
+    const { businessPhone, businessName, website, email, } = this.salonInfoState || {};
+    const websiteUrl = formatWebsiteUrl(website);
+    const fullAddress = formatFullAddress(this.salonInfoState);
+    return (h("div", { class: "view view--salon-locations" }, h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Contact"), h("div", { class: "salon-contact--links", style: { marginTop: '16px' } }, businessPhone && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-phone-line", style: { color: Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", h("a", { href: `tel:${businessPhone}`, style: { color: Colors.TextColor, textDecoration: 'none' } }, businessPhone))), websiteUrl && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-links-line", style: { color: Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", h("a", { target: websiteUrl && websiteUrl.indexOf(window.location.hostname) === -1 ? '_blank' : undefined, href: websiteUrl, style: { color: Colors.TextColor, textDecoration: 'none' } }, websiteUrl))), email && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-mail-line", style: { color: Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", h("a", { href: `mailto:${email}`, style: { color: Colors.TextColor, textDecoration: 'none' } }, email)))), h("div", { class: "view--salon-info--map", style: { marginTop: '24px' } }, h("google-map", { "location-name": businessName, "location-address": fullAddress })))));
+  }
+};
+SalonLocations.style = indexCss$1;
+
+const indexCss = "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}}";
+
+const SalonSchedules = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.salonId = undefined;
+    this.salonInfo = undefined;
+    this.isLoading = undefined;
+    this.withBorder = undefined;
+    this.salonInfoState = undefined;
+  }
+  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])))))))));
+  }
+};
+SalonSchedules.style = indexCss;
+
+export { SalonLatestStyles as salon_latest_styles, SalonLocations as salon_locations, SalonSchedules as salon_schedules };

package/dist/{favesalon-embed → esm}/salon-lookbook.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-888e99e3.js';
+import { r as registerInstance, h } from './index-0494771f.js';
 import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService } from './services-7cb8f2a6.js';
-import './_commonjsHelpers-a4f66ccd.js';
+import { H as HttpService } from './services-257442e2.js';
+import './_commonjsHelpers-66ac50f5.js';
 
 const indexCss = "@media (max-width: 768px){salon-lookbook .view-header{display:block !important}salon-lookbook .salon-loobook--serch-result{margin-bottom:16px}salon-lookbook .salon-loobook--filter-wrapper>label,salon-lookbook .salon-loobook--sort-wrapper>label{display:none !important}}";
 

package/dist/{favesalon-embed → esm}/salon-ranking.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-888e99e3.js';
+import { r as registerInstance, h } from './index-0494771f.js';
 import { C as Colors } from './colors-ea36347a.js';
 
 const indexCss = "salon-ranking{display:block}";

package/dist/{favesalon-embed → esm}/salon-reviews.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-888e99e3.js';
-import { H as HttpService, d as dayjs_min, s as shortDateYearFormat } from './services-7cb8f2a6.js';
+import { r as registerInstance, h } from './index-0494771f.js';
+import { H as HttpService, d as dayjs_min, s as shortDateYearFormat } from './services-257442e2.js';
 import { C as Colors } from './colors-ea36347a.js';
-import './_commonjsHelpers-a4f66ccd.js';
+import './_commonjsHelpers-66ac50f5.js';
 
 const indexCss = "@media (max-width: 768px){salon-reviews .salon-reviews{flex-direction:column !important}salon-reviews .salon-reviews--filters--options{display:none !important}salon-reviews .salon-reviews--list{padding-top:32px !important;padding-left:0px !important}salon-reviews .reviews-list--sorting>label{display:none !important}}";
 

package/dist/{favesalon-embed → esm}/salon-services.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-888e99e3.js';
-import { H as HttpService, a as sortBy_1 } from './services-7cb8f2a6.js';
+import { r as registerInstance, h } from './index-0494771f.js';
+import { H as HttpService, b as sortBy_1 } from './services-257442e2.js';
 import { C as Colors } from './colors-ea36347a.js';
-import './_commonjsHelpers-a4f66ccd.js';
+import './_commonjsHelpers-66ac50f5.js';
 
 const indexCss = "";
 

package/dist/{favesalon-embed → esm}/salon-stylists.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-888e99e3.js';
+import { r as registerInstance, h } from './index-0494771f.js';
 import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService } from './services-7cb8f2a6.js';
-import './_commonjsHelpers-a4f66ccd.js';
+import { H as HttpService } from './services-257442e2.js';
+import './_commonjsHelpers-66ac50f5.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}}";