favesalon-embed 1.0.1 → 1.0.3

package/dist/esm/google-map_5.entry.js

@@ -1,302 +0,0 @@
-import { r as registerInstance, g as getAssetPath, h } from './index-3fae868e.js';
-import { C as Colors } from './colors-ea36347a.js';
-import { H as HttpService, i as isVideoMedia, B as BusinessHourStatus } from './services-40a3e622.js';
-import { f as formatWebsiteUrl, a as formatFullAddress } from './utils-e97485e0.js';
-import './_commonjsHelpers-098d5b27.js';
-
-const indexCss$4 = "google-map{display:block;width:100%;height:100%}";
-
-const GoogleMap = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.locationName = undefined;
-    this.locationAddress = undefined;
-  }
-  render() {
-    const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
-    return (h("div", { style: {
-        backgroundImage: `url("${mapPlaceholder}")`,
-        backgroundColor: Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        borderRadius: '8px',
-        position: 'relative',
-        height: '296px',
-      } }, h("div", { style: {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-      } }, h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
-        backgroundColor: Colors.Red01,
-        border: `1px solid ${Colors.Red02}`,
-        borderRadius: '4px',
-        color: Colors.TextColor,
-        padding: '12px',
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: 'auto',
-        width: 'auto',
-        whiteSpace: 'normal',
-        textAlign: 'left',
-        maxWidth: '320px',
-        textDecoration: 'none',
-      } }, this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)), h("div", { style: { marginTop: '8px', textAlign: 'center' } }, h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-};
-GoogleMap.style = indexCss$4;
-
-const indexCss$3 = "";
-
-const SalonInfo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.salonId = undefined;
-    this.salonInfo = undefined;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    try {
-      this.salonInfo = await HttpService().fetchSalonInfo(this.salonId);
-    }
-    catch (e) { }
-  }
-  render() {
-    return (h("div", { class: "salon-info" }, h("div", { class: "container" }, h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } }, h("salon-schedules", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "row" }, h("div", { class: "col-md-5", style: { marginBottom: '24px' } }, h("salon-locations", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "col-md-7", style: { marginBottom: '24px' } }, h("salon-latest-styles", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))))));
-  }
-};
-SalonInfo.style = indexCss$3;
-
-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 { GoogleMap as google_map, SalonInfo as salon_info, SalonLatestStyles as salon_latest_styles, SalonLocations as salon_locations, SalonSchedules as salon_schedules };