favesalon-embed 0.0.2 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/_commonjsHelpers-5cfcba41.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.createCommonjsModule = createCommonjsModule;
+exports.getAugmentedNamespace = getAugmentedNamespace;

package/dist/cjs/colors-38421769.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const Colors = {
+  TextColor: '#141414',
+  Black: '#000000',
+  White: '#ffffff',
+  Primary: '#F05A61',
+  Secondary: '#001529',
+  Black01: '#262626',
+  Black02: '#1f1f1f',
+  Black03: '#141414',
+  Gray01: '#F5F5F5',
+  Gray02: '#EFEFEF',
+  Gray03: '#DBDBDB',
+  Gray04: '#999999',
+  Gray05: '#666666',
+  Red01: '#FEEFEF',
+  Red02: '#F9BDC0',
+  Red03: '#F05A61',
+  Red04: '#C0484E',
+  Red05: '#90363A',
+  Orange01: '#FFF4F0',
+  Orange02: '#FFD1C3',
+  Orange03: '#FF8D69',
+  Orange04: '#CC7154',
+  Orange05: '#99553F',
+  Yellow01: '#FDFBF4',
+  Yellow02: '#F8EDD3',
+  Yellow03: '#EED291',
+  Yellow04: '#BEA874',
+  Yellow05: '#8F7E57',
+  Lilac01: '#F3F0F4',
+  Lilac02: '#CFC1D4',
+  Lilac03: '#886594',
+  Lilac04: '#6D5176',
+  Lilac05: '#523D59',
+  Blue01: '#EAECEE',
+  Blue02: '#AAB1BD',
+  Blue03: '#2B3C59',
+  Blue04: '#223047',
+  Blue05: '#1A2435',
+  Green01: '#ECF7ED',
+  Green02: '#B2E1B9',
+  Green03: '#3FB34F',
+  Green04: '#328F3F',
+  Green05: '#266B2F',
+  Success01: '#EEF9E8',
+  Success02: '#BAE7A3',
+  Success03: '#52C41A',
+  Success04: '#429D15',
+  Success05: '#317610',
+  Error01: '#FFEDED',
+  Error02: '#FFB8B9',
+  Error03: '#FF4D4F',
+  Error04: '#CC3E3F',
+  Error05: '#992E2F',
+  Warning01: '#FFF7E8',
+  Warning02: '#FDDEA1',
+  Warning03: '#FAAD14',
+  Warning04: '#C88A10',
+  Warning05: '#96680C',
+  Info01: '#E8F4FF',
+  Info02: '#A3D3FF',
+  Info03: '#1890FF',
+  Info04: '#1373CC',
+  Info05: '#0E5699',
+};
+
+exports.Colors = Colors;

package/dist/cjs/favesalon-embed.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index-e6bea8f5.js');
+require('./global-9073d10e.js');
+
+/*
+ Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('favesalon-embed.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["salon-latest-reviews.cjs",[[0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-lookbook.cjs",[[0,"salon-lookbook",{"salonId":[2,"salon-id"],"isLoading":[32],"isLoadingMore":[32],"hideLoadMore":[32],"currentPage":[32],"totalLookbooks":[32],"salonCategories":[32],"salonLookbooks":[32],"sortBy":[32],"filterBy":[32],"isLayoutSetup":[32],"fetchData":[64],"fetchLookbooks":[64],"onChangeFiltering":[64],"onChangeSorting":[64],"onLoadMore":[64],"fetchCategories":[64]}]]],["salon-reviews.cjs",[[0,"salon-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonInfo":[32],"stats":[32],"totalReviews":[32],"allReviews":[32],"isLoading":[32],"isSorting":[32],"isFiltering":[32],"isLoadingMore":[32],"canLoadMore":[32],"page":[32],"filterBy":[32],"sortBy":[32]}]]],["style-detail.cjs",[[0,"style-detail",{"salonId":[2,"salon-id"],"salonLookbook":[1,"salon-lookbook"],"lookbookInfo":[32],"isModalOpen":[32],"currentMediaIdx":[32],"currentMedia":[32],"albumMedias":[32],"similarStyles":[32],"totalComments":[32],"lookbookComments":[32],"isLayoutSetup":[32],"fetchData":[64]}]]],["salon-booking.cjs",[[0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-booking-modal.cjs",[[0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]]],["salon-gift-card.cjs",[[0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]]],["salon-gift-card-modal.cjs",[[0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]]],["salon-ranking.cjs",[[0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]]],["salon-services.cjs",[[0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32],"fetchData":[64]}]]],["salon-stylists.cjs",[[0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32],"totalStylists":[32],"page":[32],"isLoading":[32],"isLoadingMore":[32],"canLoadMore":[32],"fetchData":[64],"onLoadMore":[64]}]]],["user-avatar.cjs",[[0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]]],["google-map_5.cjs",[[0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32],"fetchData":[64]}],[0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32],"fetchData":[64]}],[0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}],[0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]]]], options);
+});

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

@@ -0,0 +1,291 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
+const services = require('./services-eee8f251.js');
+const utils = require('./utils-c5a33b3c.js');
+require('./_commonjsHelpers-5cfcba41.js');
+
+const indexCss$4 = "google-map{display:block;width:100%;height:100%}";
+
+let GoogleMap = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mapPlaceholder = index.getAssetPath('./assets/map--placeholder.jpeg');
+    return (index.h("div", { style: {
+        backgroundImage: `url("${mapPlaceholder}")`,
+        backgroundColor: colors.Colors.Gray01,
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        borderRadius: '8px',
+        position: 'relative',
+        height: '296px',
+      } }, index.h("div", { style: {
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      } }, index.h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
+        backgroundColor: colors.Colors.Red01,
+        border: `1px solid ${colors.Colors.Red02}`,
+        borderRadius: '4px',
+        color: colors.Colors.TextColor,
+        padding: '12px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        height: 'auto',
+        width: 'auto',
+        whiteSpace: 'normal',
+        textAlign: 'left',
+        maxWidth: '320px',
+        textDecoration: 'none',
+      } }, this.locationName && index.h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName), this.locationAddress && index.h("span", { style: { fontSize: '12px' } }, this.locationAddress)), index.h("div", { style: { marginTop: '8px', textAlign: 'center' } }, index.h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+GoogleMap.style = indexCss$4;
+
+const indexCss$3 = "";
+
+let SalonInfo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    try {
+      this.salonInfo = await services.HttpService().fetchSalonInfo(this.salonId);
+    }
+    catch (e) { }
+  }
+  render() {
+    return (index.h("div", { class: "salon-info" }, index.h("div", { class: "container" }, index.h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } }, index.h("salon-schedules", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), index.h("div", { class: "row" }, index.h("div", { class: "col-md-5", style: { marginBottom: '24px' } }, index.h("salon-locations", { "with-border": true, "is-loading": !this.salonInfo, "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), index.h("div", { class: "col-md-7", style: { marginBottom: '24px' } }, index.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}}";
+
+let SalonLatestStyles = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoadingState = true;
+    try {
+      const promises = [
+        services.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 (index.h("div", { class: "view view--salon-styles" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray02,
+          height: '20px',
+          width: '120px',
+        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
+          overflow: 'hidden',
+          marginLeft: '-16px',
+          marginBottom: '-16px',
+        } }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((fakeId, idx) => (index.h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
+          float: 'left',
+          paddingLeft: '16px',
+          marginBottom: '16px',
+        } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          borderRadius: '8px',
+          width: '120px',
+          height: '120px',
+          overflow: 'hidden',
+          position: 'relative',
+          cursor: 'pointer',
+        } })))))))));
+    }
+    return (index.h("div", { class: "view view--salon-styles" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Photos"), index.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 ? services.isVideoMedia(firstMedia) : false;
+      return (index.h("div", { key: `style-listing--item-${faveStyle.id}-${idx}`, style: {
+          float: 'left',
+          paddingLeft: '16px',
+          marginBottom: '16px',
+        } }, index.h("div", { class: "view--salon-styles--item", style: Object.assign({ backgroundColor: colors.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 && (index.h("div", null, index.h("video", { muted: true, width: "100%", height: "100%", poster: imageThumb }, index.h("source", { src: firstMedia.mediaUrl, type: "video/mp4" })), index.h("i", { class: "ri-play-circle-fill", style: {
+          fontSize: '48px',
+          color: colors.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}}";
+
+let SalonLocations = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (this.salonInfo) {
+      this.salonInfoState = JSON.parse(this.salonInfo);
+    }
+    else {
+      this.fetchData();
+    }
+  }
+  fetchData() {
+    try {
+      services.HttpService().fetchSalonInfo(this.salonId)
+        .then(salonInfo => this.salonInfoState = salonInfo);
+    }
+    catch (e) { }
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", { class: "view view--salon-locations" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray02,
+          height: '20px',
+          width: '120px',
+        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '50%',
+        } }), index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '50%',
+          marginTop: '8px',
+        } }), index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '192px',
+          width: '100%',
+          marginTop: '24px',
+        } })))));
+    }
+    const { businessPhone, businessName, website, email, } = this.salonInfoState || {};
+    const websiteUrl = utils.formatWebsiteUrl(website);
+    const fullAddress = utils.formatFullAddress(this.salonInfoState);
+    return (index.h("div", { class: "view view--salon-locations" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "Contact"), index.h("div", { class: "salon-contact--links", style: { marginTop: '16px' } }, businessPhone && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-phone-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { href: `tel:${businessPhone}`, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, businessPhone))), websiteUrl && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-links-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { target: websiteUrl && websiteUrl.indexOf(window.location.hostname) === -1 ? '_blank' : undefined, href: websiteUrl, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, websiteUrl))), email && (index.h("div", { class: "salon-contact--links-item" }, index.h("i", { class: "ri-mail-line", style: { color: colors.Colors.Gray04, fontSize: '18px', marginRight: '6px' } }), " ", index.h("a", { href: `mailto:${email}`, style: { color: colors.Colors.TextColor, textDecoration: 'none' } }, email)))), index.h("div", { class: "view--salon-info--map", style: { marginTop: '24px' } }, index.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}}";
+
+let SalonSchedules = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (this.salonInfo) {
+      this.salonInfoState = JSON.parse(this.salonInfo);
+    }
+    else {
+      this.fetchData();
+    }
+  }
+  fetchData() {
+    try {
+      services.HttpService().fetchSalonInfo(this.salonId)
+        .then(salonInfo => this.salonInfoState = salonInfo);
+    }
+    catch (e) { }
+  }
+  renderBusinessHour(businessHour) {
+    if (businessHour.status === services.BusinessHourStatus.ByAppointment) {
+      return 'By Appointment';
+    }
+    if (businessHour.status === services.BusinessHourStatus.Close) {
+      return 'Close';
+    }
+    return `${businessHour.openTime} - ${businessHour.closeTime}`;
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", { class: "view view--salon-contact" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray02,
+          height: '20px',
+          width: '120px',
+        } }), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '30%',
+        } }), index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '40%',
+          marginTop: '8px',
+        } }), index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '75%',
+          marginTop: '12px',
+        } }), index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          height: '16px',
+          width: '75%',
+          marginTop: '8px',
+        } })), index.h("div", { style: { marginTop: '24px' } }, index.h("div", { style: {
+          overflow: 'hidden',
+          marginLeft: '-16px',
+          marginBottom: '-16px',
+        } }, [1, 2, 3, 4, 5, 6, 7].map((fakeId, idx) => (index.h("div", { key: `style-listing--item-${fakeId}-${idx}`, style: {
+          float: 'left',
+          paddingLeft: '16px',
+          marginBottom: '16px',
+        } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Gray01,
+          width: '120px',
+          height: '20px',
+        } })))))))));
+    }
+    const { about, businessHours, } = (this.salonInfoState || {});
+    return (index.h("div", { class: "view view--salon-contact" }, index.h("div", { class: "view-content", style: this.withBorder ? { border: `1px solid ${colors.Colors.Gray02}`, borderRadius: '4px' } : { padding: '0px' } }, index.h("div", { style: { fontSize: '18px', fontWeight: 'bold' } }, "About"), about && (index.h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about })), businessHours && businessHours.length > 0 && (index.h("div", { class: "salon-schedules", style: { marginTop: '24px' } }, index.h("div", { class: "salon-schedules--title", style: { fontSize: '16px', fontWeight: 'bold' } }, "Working hours"), index.h("div", { class: "salon-schedules--dates" }, index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Mon"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[0]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Tue"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[1]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Wed"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[2]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Thur"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[3]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Fri"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[4]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sat"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[5]))), index.h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } }, index.h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sun"), index.h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[6])))))))));
+  }
+};
+SalonSchedules.style = indexCss;
+
+exports.google_map = GoogleMap;
+exports.salon_info = SalonInfo;
+exports.salon_latest_styles = SalonLatestStyles;
+exports.salon_locations = SalonLocations;
+exports.salon_schedules = SalonSchedules;