favesalon-embed 0.0.4 → 0.1.0

package/{custom-elements → dist/custom-elements}/index.js

@@ -1,4 +1,4 @@
-import { h, proxyCustomElement } from '@stencil/core/internal/client';
+import { getAssetPath, h, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
 /*!
@@ -705,44 +705,112 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
   return R(Mn), g(Mn), { Alert: W, Button: z, Carousel: st, Collapse: pt, Dropdown: hi, Modal: Hi, Offcanvas: Fi, Popover: gn, ScrollSpy: An, Tab: xn, Toast: Mn, Tooltip: un };
 }));
 
-const indexCss$g = "#google-map-container,google-map{display:block;width:100%;height:100%}";
+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',
+};
+
+const indexCss$g = "google-map{display:block;width:100%;height:100%}";
 
 let GoogleMap$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.apiKey = 'AIzaSyBW4PbW9aM2FXZl83Gs7jeRmekEWSzC1sY';
-  }
-  componentDidLoad() {
-    this.injectSDK().then(() => {
-      setTimeout(() => this.initMap(), 300);
-    });
-  }
-  injectSDK() {
-    return new Promise((resolve) => {
-      window['mapInit'] = () => resolve(true);
-      const script = document.createElement('script');
-      script.id = 'googleMaps';
-      if (this.apiKey) {
-        script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
-      }
-      else {
-        script.src = 'https://maps.googleapis.com/maps/api/js?callback=mapInit';
-      }
-      document.body.appendChild(script);
-      return resolve(true);
-    });
-  }
-  initMap() {
-    const mapOptions = {
-      center: { lat: this.lat, lng: this.lng },
-      zoom: 8,
-    };
-    this.map = new window.google.maps.Map(document.getElementById('google-map-container'), mapOptions);
   }
   render() {
-    return h("div", { id: 'google-map-container' });
-  }
+    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"]; }
   static get style() { return indexCss$g; }
 };
 
@@ -2707,7 +2775,7 @@ object-assign
 */
 /* eslint-disable no-unused-vars */
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty$a = Object.prototype.hasOwnProperty;
+var hasOwnProperty$9 = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
 function toObject(val) {
@@ -2771,7 +2839,7 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 		from = Object(arguments[s]);
 
 		for (var key in from) {
-			if (hasOwnProperty$a.call(from, key)) {
+			if (hasOwnProperty$9.call(from, key)) {
 				to[key] = from[key];
 			}
 		}
@@ -5167,99 +5235,7 @@ function attribsFor() {
 }
 });
 
-const Colors = {
-  // Neutral Color
-  Black: '#000000',
-  White: '#ffffff',
-  Primary: '#5C1973',
-  Danger: '#E92626',
-  Success: '#3FB34F',
-  Warning: '#F17714',
-  Info: '#013385',
-  Black01: '#141414',
-  Black02: '#1f1f1f',
-  Black03: '#262626',
-  Gray01: '#333333',
-  Gray02: '#666666',
-  Gray03: '#999999',
-  Gray04: '#DBDBDB',
-  Gray05: '#EFEFEF',
-  Gray06: '#F5F5F5',
-  // Accent Colors
-  DarkBlue01: '#E8E8EF',
-  DarkBlue02: '#7674A0',
-  DarkBlue03: '#1B1761',
-  DarkBlue04: '#100E3A',
-  DarkBlue05: '#08071D',
-  Violet01: '#EFE8F1',
-  Violet02: '#9D75AB',
-  Violet03: '#5C1973',
-  Violet04: '#370F45',
-  Violet05: '#1C0722',
-  Pink01: '#FDE9F2',
-  Pink02: '#F27DAF',
-  Pink03: '#E9267A',
-  Pink04: '#8C1749',
-  Pink05: '#2F0818',
-  Blue01: '#E6EBF3',
-  Blue02: '#6785B6',
-  Blue03: '#013385',
-  Blue04: '#011F50',
-  Blue05: '#000F28',
-  Green01: '#ECF7ED',
-  Green02: '#8CD195',
-  Green03: '#3FB34F',
-  Green04: '#266B2F',
-  Green05: '#0D2410',
-  Orange01: '#FEF1E8',
-  Orange02: '#F7AD72',
-  Orange03: '#F17714',
-  Orange04: '#91470C',
-  Orange05: '#301804',
-  Yellow01: '#FFFAED',
-  Yellow02: '#FDE392',
-  Yellow03: '#FCD14A',
-  Yellow04: '#977D2C',
-  Yellow05: '#322A0F',
-  Red01: '#FD2727',
-  Red02: '#FF4D4F',
-  Red03: '#FFA39E',
-  Red04: '#FFCCC7',
-  Red05: '#FFF1F0',
-  // deprecated
-  BluePurple01: '#2D3B8A',
-  BluePurple02: '#36459D',
-  BluePurple03: '#5760A1',
-  BluePurple04: '#828AB9',
-  BluePurple05: '#ABB0D0',
-  Coral01: '#F16B68',
-  Coral02: '#F68A87',
-  Coral03: '#F7A6A3',
-  Coral04: '#FAC4C2',
-  Coral05: '#FCE0DF',
-  YellowLight01: '#F0E902',
-  YellowLight02: '#F5ED33',
-  YellowLight03: '#F8F266',
-  YellowLight04: '#FAF599',
-  YellowLight05: '#FCF9CC',
-  YellowCyber01: '#FDCF00',
-  YellowCyber02: '#FCD932',
-  YellowCyber03: '#FFE365',
-  YellowCyber04: '#FFED99',
-  YellowCyber05: '#FFF5CC',
-  Turquoise01: '#00E4CB',
-  Turquoise02: '#33E8D6',
-  Turquoise03: '#67F0DF',
-  Turquoise04: '#99F4EB',
-  Turquoise05: '#CCFAF5',
-  Purple01: '#8A5BED',
-  Purple02: '#9970F0',
-  Purple03: '#B394F2',
-  Purple04: '#CCB8F7',
-  Purple05: '#E6DBFA',
-};
-
-const indexCss$f = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{width:48px;height:48px;right:10px;top:12px}@media (min-width: 576px){.salon-modal.salon-modal--booking .salon-modal--close{right:16px}}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:24px}}@media (min-width: 1200px){.salon-modal.salon-modal--booking .salon-modal--close{right:50%;margin-right:-585px}}";
+const indexCss$f = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:20px;top:20px}}";
 
 let SalonBooking$1 = class extends HTMLElement {
   constructor() {
@@ -5267,7 +5243,7 @@ let SalonBooking$1 = class extends HTMLElement {
     this.__registerHost();
     this.buttonClass = '';
     this.buttonText = 'Book now';
-    this.primaryColor = Colors.Coral03;
+    this.primaryColor = Colors.Primary;
   }
   openModal() {
     const elBookingModal = document.createElement('div');
@@ -5300,13 +5276,13 @@ let SalonBooking$1 = class extends HTMLElement {
   static get style() { return indexCss$f; }
 };
 
-const indexCss$e = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{width:48px;height:48px;right:10px;top:12px}@media (min-width: 576px){.salon-modal.salon-modal--booking .salon-modal--close{right:16px}}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:24px}}@media (min-width: 1200px){.salon-modal.salon-modal--booking .salon-modal--close{right:50%;margin-right:-585px}}";
+const indexCss$e = ".salon-modal.salon-modal--booking:before{display:none}.salon-modal.salon-modal--booking .salon-modal--inner,.salon-modal.salon-modal--booking .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--booking .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--booking .salon-modal--close{right:20px;top:20px}}";
 
-let SalonBookingModal$2 = class extends HTMLElement {
+let SalonBookingModal$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.primaryColor = Colors.Coral03;
+    this.primaryColor = Colors.Primary;
     this.redirectUrl = window.btoa(window.location.href);
     this.isModalOpen = true;
   }
@@ -5317,28 +5293,72 @@ let SalonBookingModal$2 = class extends HTMLElement {
   }
   render() {
     const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
-    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&redirectUrl=${this.redirectUrl}` })))))));
+    return (h("div", { class: "salon-booking--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--booking" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/booking?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
   }
   static get style() { return indexCss$e; }
 };
 
-function formatWebsiteUrl(website) {
-  return !!website ? website.indexOf('http') > -1 ? website : `http://${website}` : null;
-}
-function formatFullAddress(salon) {
-  const { businessAddress, city, state, zipcode, } = salon || {};
-  const stateFields = [state, zipcode].filter(field => !!field);
-  if (businessAddress) {
-    return [businessAddress, city]
-      .filter(field => !!field)
-      .concat(stateFields.length > 0 ? [stateFields.join(' ')] : [])
-      .join(', ');
+const indexCss$d = ".salon-modal.salon-modal--gift-card:before{display:none}.salon-modal.salon-modal--gift-card .salon-modal--inner,.salon-modal.salon-modal--gift-card .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--gift-card .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--gift-card .salon-modal--close{right:20px;top:20px}}";
+
+let SalonGiftCard$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.buttonClass = '';
+    this.buttonText = 'Buy Gift card';
+    this.primaryColor = Colors.Primary;
   }
-  return null;
-}
-function getRatingText() {
-  return ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
-}
+  openModal() {
+    const elBookingModal = document.createElement('div');
+    elBookingModal.innerHTML = `
+      <salon-gift-card-modal
+        salon-id=${this.salonId}
+        primary-color=${this.primaryColor}
+      ></salon-gift-card-modal>
+    `;
+    document.body.appendChild(elBookingModal);
+  }
+  render() {
+    const buttonClass = this.buttonClass || 'btn btn-primary';
+    let buttonStyle = {};
+    if (!this.buttonClass) {
+      const primaryColor = color(this.primaryColor);
+      const primaryColorHover = primaryColor.darken(0.05);
+      buttonStyle = lib.css({
+        backgroundColor: this.primaryColor,
+        borderColor: this.primaryColor,
+        color: primaryColor.isLight() ? Colors.Black01 : Colors.White,
+        ':hover': {
+          backgroundColor: primaryColorHover,
+          borderColor: primaryColorHover,
+        },
+      });
+    }
+    return (h("div", { class: "salon-gift-card" }, h("div", { class: "salon-gift-card--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
+  }
+  static get style() { return indexCss$d; }
+};
+
+const indexCss$c = ".salon-modal.salon-modal--gift-card:before{display:none}.salon-modal.salon-modal--gift-card .salon-modal--inner,.salon-modal.salon-modal--gift-card .salon-modal--content{max-width:none;width:100%;height:100%}.salon-modal.salon-modal--gift-card .salon-modal--close{background-color:#EFEFEF;width:40px;height:40px;right:16px;top:16px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px}@media (min-width: 768px){.salon-modal.salon-modal--gift-card .salon-modal--close{right:20px;top:20px}}";
+
+let SalonGiftCardModal$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.primaryColor = Colors.Primary;
+    this.isModalOpen = true;
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('salon-gift-card-modal');
+    el.remove();
+  }
+  render() {
+    const primaryColor = this.primaryColor.split('#')[1] || 'd47b99';
+    return (h("div", { class: "salon-gift-card--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--gift-card" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/r/buy-gift-card?salonId=${this.salonId}&primaryColor=${primaryColor}&closeAble=false` })))))));
+  }
+  static get style() { return indexCss$c; }
+};
 
 /**
  * Appends the elements of `values` to `array`.
@@ -5380,17 +5400,17 @@ var Symbol$1 = _root.Symbol;
 var _Symbol = Symbol$1;
 
 /** Used for built-in method references. */
-var objectProto$c = Object.prototype;
+var objectProto$b = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$9 = objectProto$c.hasOwnProperty;
+var hasOwnProperty$8 = objectProto$b.hasOwnProperty;
 
 /**
  * Used to resolve the
  * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
  * of values.
  */
-var nativeObjectToString$1 = objectProto$c.toString;
+var nativeObjectToString$1 = objectProto$b.toString;
 
 /** Built-in value references. */
 var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
@@ -5403,7 +5423,7 @@ var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
  * @returns {string} Returns the raw `toStringTag`.
  */
 function getRawTag(value) {
-  var isOwn = hasOwnProperty$9.call(value, symToStringTag$1),
+  var isOwn = hasOwnProperty$8.call(value, symToStringTag$1),
       tag = value[symToStringTag$1];
 
   try {
@@ -5425,14 +5445,14 @@ function getRawTag(value) {
 var _getRawTag = getRawTag;
 
 /** Used for built-in method references. */
-var objectProto$b = Object.prototype;
+var objectProto$a = Object.prototype;
 
 /**
  * Used to resolve the
  * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
  * of values.
  */
-var nativeObjectToString = objectProto$b.toString;
+var nativeObjectToString = objectProto$a.toString;
 
 /**
  * Converts `value` to a string using `Object.prototype.toString`.
@@ -5519,13 +5539,13 @@ function baseIsArguments(value) {
 var _baseIsArguments = baseIsArguments;
 
 /** Used for built-in method references. */
-var objectProto$a = Object.prototype;
+var objectProto$9 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$8 = objectProto$a.hasOwnProperty;
+var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
 
 /** Built-in value references. */
-var propertyIsEnumerable$1 = objectProto$a.propertyIsEnumerable;
+var propertyIsEnumerable$1 = objectProto$9.propertyIsEnumerable;
 
 /**
  * Checks if `value` is likely an `arguments` object.
@@ -5546,7 +5566,7 @@ var propertyIsEnumerable$1 = objectProto$a.propertyIsEnumerable;
  * // => false
  */
 var isArguments = _baseIsArguments(function() { return arguments; }()) ? _baseIsArguments : function(value) {
-  return isObjectLike_1(value) && hasOwnProperty$8.call(value, 'callee') &&
+  return isObjectLike_1(value) && hasOwnProperty$7.call(value, 'callee') &&
     !propertyIsEnumerable$1.call(value, 'callee');
 };
 
@@ -5837,17 +5857,17 @@ var reIsHostCtor = /^\[object .+?Constructor\]$/;
 
 /** Used for built-in method references. */
 var funcProto = Function.prototype,
-    objectProto$9 = Object.prototype;
+    objectProto$8 = Object.prototype;
 
 /** Used to resolve the decompiled source of functions. */
 var funcToString = funcProto.toString;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
+var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
 
 /** Used to detect if a method is native. */
 var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty$7).replace(reRegExpChar, '\\$&')
+  funcToString.call(hasOwnProperty$6).replace(reRegExpChar, '\\$&')
   .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
 );
 
@@ -5939,10 +5959,10 @@ var _hashDelete = hashDelete;
 var HASH_UNDEFINED$2 = '__lodash_hash_undefined__';
 
 /** Used for built-in method references. */
-var objectProto$8 = Object.prototype;
+var objectProto$7 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
+var hasOwnProperty$5 = objectProto$7.hasOwnProperty;
 
 /**
  * Gets the hash value for `key`.
@@ -5959,16 +5979,16 @@ function hashGet(key) {
     var result = data[key];
     return result === HASH_UNDEFINED$2 ? undefined : result;
   }
-  return hasOwnProperty$6.call(data, key) ? data[key] : undefined;
+  return hasOwnProperty$5.call(data, key) ? data[key] : undefined;
 }
 
 var _hashGet = hashGet;
 
 /** Used for built-in method references. */
-var objectProto$7 = Object.prototype;
+var objectProto$6 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$5 = objectProto$7.hasOwnProperty;
+var hasOwnProperty$4 = objectProto$6.hasOwnProperty;
 
 /**
  * Checks if a hash value for `key` exists.
@@ -5981,7 +6001,7 @@ var hasOwnProperty$5 = objectProto$7.hasOwnProperty;
  */
 function hashHas(key) {
   var data = this.__data__;
-  return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty$5.call(data, key);
+  return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty$4.call(data, key);
 }
 
 var _hashHas = hashHas;
@@ -7130,10 +7150,10 @@ function stubArray() {
 var stubArray_1 = stubArray;
 
 /** Used for built-in method references. */
-var objectProto$6 = Object.prototype;
+var objectProto$5 = Object.prototype;
 
 /** Built-in value references. */
-var propertyIsEnumerable = objectProto$6.propertyIsEnumerable;
+var propertyIsEnumerable = objectProto$5.propertyIsEnumerable;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeGetSymbols = Object.getOwnPropertySymbols;
@@ -7425,10 +7445,10 @@ var isTypedArray = nodeIsTypedArray ? _baseUnary(nodeIsTypedArray) : _baseIsType
 var isTypedArray_1 = isTypedArray;
 
 /** Used for built-in method references. */
-var objectProto$5 = Object.prototype;
+var objectProto$4 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
+var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
 
 /**
  * Creates an array of the enumerable property names of the array-like `value`.
@@ -7448,7 +7468,7 @@ function arrayLikeKeys(value, inherited) {
       length = result.length;
 
   for (var key in value) {
-    if ((inherited || hasOwnProperty$4.call(value, key)) &&
+    if ((inherited || hasOwnProperty$3.call(value, key)) &&
         !(skipIndexes && (
            // Safari 9 has enumerable `arguments.length` in strict mode.
            key == 'length' ||
@@ -7468,7 +7488,7 @@ function arrayLikeKeys(value, inherited) {
 var _arrayLikeKeys = arrayLikeKeys;
 
 /** Used for built-in method references. */
-var objectProto$4 = Object.prototype;
+var objectProto$3 = Object.prototype;
 
 /**
  * Checks if `value` is likely a prototype object.
@@ -7479,7 +7499,7 @@ var objectProto$4 = Object.prototype;
  */
 function isPrototype(value) {
   var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$4;
+      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$3;
 
   return value === proto;
 }
@@ -7508,10 +7528,10 @@ var nativeKeys = _overArg(Object.keys, Object);
 var _nativeKeys = nativeKeys;
 
 /** Used for built-in method references. */
-var objectProto$3 = Object.prototype;
+var objectProto$2 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$3 = objectProto$3.hasOwnProperty;
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
 
 /**
  * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
@@ -7526,7 +7546,7 @@ function baseKeys(object) {
   }
   var result = [];
   for (var key in Object(object)) {
-    if (hasOwnProperty$3.call(object, key) && key != 'constructor') {
+    if (hasOwnProperty$2.call(object, key) && key != 'constructor') {
       result.push(key);
     }
   }
@@ -7617,10 +7637,10 @@ var _getAllKeys = getAllKeys;
 var COMPARE_PARTIAL_FLAG$3 = 1;
 
 /** Used for built-in method references. */
-var objectProto$2 = Object.prototype;
+var objectProto$1 = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
 
 /**
  * A specialized version of `baseIsEqualDeep` for objects with support for
@@ -7648,7 +7668,7 @@ function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
   var index = objLength;
   while (index--) {
     var key = objProps[index];
-    if (!(isPartial ? key in other : hasOwnProperty$2.call(other, key))) {
+    if (!(isPartial ? key in other : hasOwnProperty$1.call(other, key))) {
       return false;
     }
   }
@@ -7782,10 +7802,10 @@ var argsTag = '[object Arguments]',
     objectTag = '[object Object]';
 
 /** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
+var objectProto = Object.prototype;
 
 /** Used to check objects for own properties. */
-var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+var hasOwnProperty = objectProto.hasOwnProperty;
 
 /**
  * A specialized version of `baseIsEqual` for arrays and objects which performs
@@ -7828,8 +7848,8 @@ function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
       : _equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
   }
   if (!(bitmask & COMPARE_PARTIAL_FLAG$2)) {
-    var objIsWrapped = objIsObj && hasOwnProperty$1.call(object, '__wrapped__'),
-        othIsWrapped = othIsObj && hasOwnProperty$1.call(other, '__wrapped__');
+    var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
+        othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
 
     if (objIsWrapped || othIsWrapped) {
       var objUnwrapped = objIsWrapped ? object.value() : object,
@@ -8763,131 +8783,6 @@ var sortBy = _baseRest(function(collection, iteratees) {
 
 var sortBy_1 = sortBy;
 
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && _defineProperty) {
-    _defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-var _baseAssignValue = baseAssignValue;
-
-/**
- * A specialized version of `baseAggregator` for arrays.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function arrayAggregator(array, setter, iteratee, accumulator) {
-  var index = -1,
-      length = array == null ? 0 : array.length;
-
-  while (++index < length) {
-    var value = array[index];
-    setter(accumulator, value, iteratee(value), array);
-  }
-  return accumulator;
-}
-
-var _arrayAggregator = arrayAggregator;
-
-/**
- * Aggregates elements of `collection` on `accumulator` with keys transformed
- * by `iteratee` and values set by `setter`.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function baseAggregator(collection, setter, iteratee, accumulator) {
-  _baseEach(collection, function(value, key, collection) {
-    setter(accumulator, value, iteratee(value), collection);
-  });
-  return accumulator;
-}
-
-var _baseAggregator = baseAggregator;
-
-/**
- * Creates a function like `_.groupBy`.
- *
- * @private
- * @param {Function} setter The function to set accumulator values.
- * @param {Function} [initializer] The accumulator object initializer.
- * @returns {Function} Returns the new aggregator function.
- */
-function createAggregator(setter, initializer) {
-  return function(collection, iteratee) {
-    var func = isArray_1(collection) ? _arrayAggregator : _baseAggregator,
-        accumulator = initializer ? initializer() : {};
-
-    return func(collection, setter, _baseIteratee(iteratee), accumulator);
-  };
-}
-
-var _createAggregator = createAggregator;
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Creates an object composed of keys generated from the results of running
- * each element of `collection` thru `iteratee`. The order of grouped values
- * is determined by the order they occur in `collection`. The corresponding
- * value of each key is an array of elements responsible for generating the
- * key. The iteratee is invoked with one argument: (value).
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
- * @returns {Object} Returns the composed aggregate object.
- * @example
- *
- * _.groupBy([6.1, 4.2, 6.3], Math.floor);
- * // => { '4': [4.2], '6': [6.1, 6.3] }
- *
- * // The `_.property` iteratee shorthand.
- * _.groupBy(['one', 'two', 'three'], 'length');
- * // => { '3': ['one', 'two'], '5': ['three'] }
- */
-var groupBy = _createAggregator(function(result, value, key) {
-  if (hasOwnProperty.call(result, key)) {
-    result[key].push(value);
-  } else {
-    _baseAssignValue(result, key, [value]);
-  }
-});
-
-var groupBy_1 = groupBy;
-
 var bind = function bind(fn, thisArg) {
   return function wrap() {
     var args = new Array(arguments.length);
@@ -10632,6 +10527,11 @@ axios_1.default = _default;
 
 var axios = axios_1;
 
+const dateTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+const shortDateYearFormat = 'ddd, MMM DD YYYY';
+const apiV1Prefix = 'api';
+const defaultImage = 'https://res.cloudinary.com/reckon-mini-sites/image/upload/v1636477599/FaveSalon%20Social%20Website/default/default--picture_w3jvfh.png';
+
 var BusinessHourStatus;
 (function (BusinessHourStatus) {
   BusinessHourStatus[BusinessHourStatus["Open"] = 0] = "Open";
@@ -10639,40 +10539,34 @@ var BusinessHourStatus;
   BusinessHourStatus[BusinessHourStatus["ByAppointment"] = 2] = "ByAppointment";
 })(BusinessHourStatus || (BusinessHourStatus = {}));
 function createSalon(blob) {
-  const salonGeoLocations = blob.salon_geolocation || [];
-  const themeColors = {
-    'allure24-blue': '89c8d2',
-    'allure24-pink': 'ff7fa2',
-    'the-shave': 'af8c45',
-    'theme2-dark-green': '90c245',
-    'theme2-green': 'bed451',
-    'theme2-light-pink': 'd47b99',
-    'theme2-purple': 'ab345c',
-    'theme3-blue': '076dec',
-    'theme3-layout1': 'd59b76',
-    'theme3-layout2': 'b02858',
-    'theme4-green': '5da826',
-    'theme4': '08b89d',
-    'theme5': 'f64c4d',
-  };
+  const geoLocations = blob.salon_geolocation || [];
+  let salonImages = [];
+  if (blob.salon_miniwebsite) {
+    const activeSite = Array.isArray(blob.salon_miniwebsite) ? blob.salon_miniwebsite[0] : (blob.salon_miniwebsite || {});
+    salonImages = [
+      activeSite.full_small_slider_img1,
+      activeSite.full_small_slider_img2,
+      activeSite.full_small_slider_img3,
+    ].filter(image => !!image);
+  }
   return {
     id: blob.id,
     about: blob.about,
     email: blob.email,
+    ownerName: blob.owner_name,
     fullProfileImage: blob.full_profile_image,
     fullCoverImage: blob.full_cover_image,
-    ownerName: blob.owner_name,
     subdomain: blob.subdomain,
     website: blob.website,
     businessName: blob.business_name,
     businessPhone: blob.business_phone,
     businessAddress: blob.business_address,
-    businessLocationLat: salonGeoLocations.length > 0 ? salonGeoLocations[0].location_lat : null,
-    businessLocationLng: salonGeoLocations.length > 0 ? salonGeoLocations[0].location_lng : null,
+    businessLocationLat: geoLocations.length > 0 ? geoLocations[0].location_lat : null,
+    businessLocationLng: geoLocations.length > 0 ? geoLocations[0].location_lng : null,
     city: blob.city,
     state: blob.state,
     zipcode: blob.zipcode ? Number(blob.zipcode) : null,
-    businessHours: (blob.business_hours || blob.salon_workingtime || []).map(bh => {
+    businessHours: (blob.business_hours || blob.salon_working_time || []).map(bh => {
       return {
         dayName: bh.day_name,
         openTime: bh.open_time,
@@ -10681,17 +10575,24 @@ function createSalon(blob) {
       };
     }),
     rating: Number(blob.rating_point),
-    primaryColor: themeColors[blob.default_mini_site_template] || themeColors['allure24-blue'],
+    primaryColor: blob.primary_color || Colors.Primary,
+    salonImages,
   };
 }
+function getSalonImage({ salonImages, fullProfileImage }) {
+  if (salonImages && salonImages.length > 0) {
+    return salonImages[0];
+  }
+  if (fullProfileImage) {
+    return fullProfileImage;
+  }
+  return defaultImage;
+}
 
 var dayjs_min = createCommonjsModule(function (module, exports) {
 !function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
 });
 
-const shortDate = 'DD MMM YYYY';
-const apiDateFormat = 'YYYY-MM-DD HH:mm:ss';
-
 function createService(blob) {
   const photos = (blob.photo_link || []).map(photo => {
     return {
@@ -10719,13 +10620,15 @@ function createService(blob) {
 
 function createStylist(blob) {
   const ratingPercentage = blob.rating_percent ? Number(blob.rating_percent) : 0;
+  const { first_name, last_name, mobile_phone, avatar, full_profile_image, } = blob.user || {};
+  const userNames = [first_name, last_name].filter(name => !!name);
   return {
-    id: Number(blob.stylist_id),
-    name: blob.title || [blob.first_name, blob.last_name].filter(field => !!field).join(' '),
-    firstName: blob.first_name,
-    lastName: blob.last_name,
-    avatar: blob.avatar,
-    phone: blob.mobile_phone,
+    id: Number(blob.id),
+    firstName: first_name,
+    lastName: last_name,
+    fullName: userNames.length > 0 ? userNames.join(' ') : blob.email,
+    avatar: avatar || full_profile_image,
+    phone: mobile_phone,
     expertise: Boolean(blob.expertise),
     rating: Math.ceil((ratingPercentage * 5) / 100),
   };
@@ -10733,15 +10636,16 @@ function createStylist(blob) {
 function createStylistFromLookbook(blob) {
   const { user } = blob;
   const ratingPercentage = blob.rating_percent ? Number(blob.rating_percent) : 0;
+  const userNames = [user.first_name, user.last_name].filter(name => !!name);
   return {
     id: Number(blob.id),
-    expertise: Boolean(blob.expertise),
-    rating: Math.ceil((ratingPercentage * 5) / 100),
-    name: [user.first_name, user.last_name].filter(field => !!field).join(' '),
     firstName: user.first_name,
     lastName: user.last_name,
+    fullName: userNames.length > 0 ? userNames.join(' ') : (blob.fullName || blob.name || blob.title),
     avatar: user.full_avatar || user.full_profile_image_thumb,
     phone: user.mobile_phone,
+    expertise: Boolean(blob.expertise),
+    rating: Math.ceil((ratingPercentage * 5) / 100),
   };
 }
 
@@ -10749,99 +10653,134 @@ function createUser(blob) {
   const userNames = [blob.first_name, blob.last_name].filter(name => !!name);
   return {
     id: blob.user_id,
-    name: userNames.length > 0 ? userNames.join(' ') : blob.username,
     firstName: blob.first_name,
     lastName: blob.last_name,
-    avatar: blob.full_profile_image_thumb,
+    fullName: userNames.length > 0 ? userNames.join(' ') : (blob.fullName || blob.name || blob.username),
+    avatar: blob.avatar || blob.full_profile_image_thumb,
   };
 }
 
-function createFaveStyleComent(blob) {
-  const [createdDay, createdTime] = String(blob.create_date).split(' ');
-  const [updatedDay, updatedTime] = String(blob.update_date).split(' ');
-  return {
+var MediaType;
+(function (MediaType) {
+  MediaType[MediaType["Photo"] = 0] = "Photo";
+  MediaType[MediaType["Video"] = 1] = "Video";
+})(MediaType || (MediaType = {}));
+class AlbumMedia {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+}
+function createAlbumMedia(blob) {
+  const [createdDay, createdTime] = blob.create_date ? String(blob.create_date).split(' ') : [];
+  const createdDateTime = createdDay && createdTime ? dayjs_min(`${createdDay} ${createdTime}`, dateTimeFormat).valueOf() : null;
+  const [updatedDay, updatedTime] = blob.update_date ? String(blob.update_date).split(' ') : [];
+  const updatedDateTime = updatedDay && updatedTime ? dayjs_min(`${updatedDay} ${updatedTime}`, dateTimeFormat).valueOf() : null;
+  const isVideo = blob.media_type === MediaType.Video || blob.full_image_url.indexOf('.mp4') > -1;
+  return new AlbumMedia({
     id: blob.id,
-    type: blob.type,
-    content: blob.content,
-    createdDate: dayjs_min(`${createdDay} ${createdTime}`, apiDateFormat).valueOf(),
-    updatedDate: dayjs_min(`${updatedDay} ${updatedTime}`, apiDateFormat).valueOf(),
-    parentCommentId: blob.parentCommentId,
-    childComments: blob.child_comment ? blob.child_comment.map(createFaveStyleComent) : [],
-    owner: createUser(blob.user),
-  };
+    caption: blob.caption,
+    description: blob.description,
+    createdDate: createdDateTime,
+    updatedDate: updatedDateTime,
+    mediaUrl: blob.full_image_url,
+    imageThumb: !isVideo ? blob.full_image_url_thumb : null,
+    imageThumbMedium: !isVideo ? blob.full_image_url_medium : null,
+    imageWidth: !isVideo ? blob.img_w : 400,
+    imageHeight: !isVideo ? blob.img_h : 300,
+    mediaType: isVideo ? MediaType.Video : blob.media_type,
+    totalLike: blob.total_like,
+    totalDislike: blob.total_dislike,
+    totalShare: blob.total_shared,
+    totalView: blob.view_count,
+    totalBooking: blob.total_booking,
+  });
 }
-function createFavesalonAlbum(blob) {
-  return {
+class Album {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+}
+function createAlbum(blob) {
+  return new Album({
     id: blob.id,
     name: blob.name,
     caption: blob.caption,
     description: blob.description,
     tags: blob.tags ? blob.tags.filter(tag => !!tag) : [],
     salonId: blob.salon_id,
-    stylistId: blob.beautician_id,
+    stylistId: blob.stylist_id,
     totalMedias: blob.total_medias || 0,
     service: blob.service ? createService(blob.service) : null,
     isPublic: (typeof blob.is_public !== 'undefined') ? Boolean(blob.is_public) : true,
-  };
+  });
 }
-function createFavesalonStyle(blob) {
-  const [createdDay, createdTime] = String(blob.create_date).split(' ');
-  const [updatedDay, updatedTime] = String(blob.update_date).split(' ');
-  return {
+class FaveStyleComment {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+}
+function createFaveStyleComment(blob) {
+  const [createdDay, createdTime] = blob.create_date ? String(blob.create_date).split(' ') : [];
+  const createdDateTime = createdDay && createdTime ? dayjs_min(`${createdDay} ${createdTime}`, dateTimeFormat).valueOf() : null;
+  const [updatedDay, updatedTime] = blob.update_date ? String(blob.update_date).split(' ') : [];
+  const updatedDateTime = updatedDay && updatedTime ? dayjs_min(`${updatedDay} ${updatedTime}`, dateTimeFormat).valueOf() : null;
+  return new FaveStyleComment({
+    id: blob.id,
+    type: blob.type,
+    title: blob.content,
+    description: blob.description,
+    createdDate: createdDateTime,
+    updatedDate: updatedDateTime,
+    parentCommentId: blob.parentCommentId,
+    childComments: blob.child_comment ? blob.child_comment.map(createFaveStyleComment) : [],
+    user: createUser(blob.user),
+  });
+}
+class FaveStyle {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+}
+function createFaveStyle(blob) {
+  const [createdDay, createdTime] = blob.create_date ? String(blob.create_date).split(' ') : [];
+  const createdDateTime = createdDay && createdTime ? dayjs_min(`${createdDay} ${createdTime}`, dateTimeFormat).valueOf() : null;
+  const [updatedDay, updatedTime] = blob.update_date ? String(blob.update_date).split(' ') : [];
+  const updatedDateTime = updatedDay && updatedTime ? dayjs_min(`${updatedDay} ${updatedTime}`, dateTimeFormat).valueOf() : null;
+  const albumMedias = [createAlbumMedia(blob)].concat(blob.album_medias ? blob.album_medias.map(createAlbumMedia).filter(ap => ap.id !== blob.id) : []);
+  const { total_booked: totalBooked, total_like: totalLike, total_share: totalShare, total_view: totalView, } = blob.style_activity || {};
+  return new FaveStyle({
     id: blob.id,
     caption: blob.caption,
     description: blob.description,
-    createdDate: dayjs_min(`${createdDay} ${createdTime}`, apiDateFormat).valueOf(),
-    updatedDate: dayjs_min(`${updatedDay} ${updatedTime}`, apiDateFormat).valueOf(),
+    createdDate: createdDateTime,
+    updatedDate: updatedDateTime,
+    imageUrl: blob.full_image_url,
+    imageThumb: blob.full_image_url_thumb,
+    imageThumbMedium: blob.full_image_url_medium,
+    imageWidth: blob.img_w,
+    imageHeight: blob.img_h,
     mediaType: blob.media_type,
-    fullImageUrl: blob.full_image_url,
-    fullImageUrlThumb: blob.full_image_url_thumb,
-    fullImageUrlMedium: blob.full_image_url_medium,
-    imgWidth: blob.img_w,
-    imgHeight: blob.img_h,
-    s3ImgWidth: blob.s3_img_w,
-    s3ImgHeight: blob.s3_img_h,
-    totalLike: blob.total_like,
-    totalDislike: blob.total_dislike,
-    totalShare: blob.total_shared,
-    totalView: blob.view_count,
-    totalBooking: blob.total_booking,
-    owner: blob.user ? createUser(blob.user) : null,
-  };
-}
-function createFavesalonLookbook(blob) {
-  const [createdDay, createdTime] = String(blob.create_date).split(' ');
-  const [updatedDay, updatedTime] = String(blob.update_date).split(' ');
-  let albumPhotos = blob.style_in_album ? blob.style_in_album.map(createFavesalonStyle) : [];
-  if (!albumPhotos.find(ap => ap.id === blob.id)) {
-    const currentPhoto = createFavesalonStyle(blob);
-    albumPhotos = [currentPhoto].concat(albumPhotos);
-  }
-  return {
-    id: blob.id,
-    caption: blob.caption,
-    description: blob.description,
-    createdDate: dayjs_min(`${createdDay} ${createdTime}`, apiDateFormat).valueOf(),
-    updatedDate: dayjs_min(`${updatedDay} ${updatedTime}`, apiDateFormat).valueOf(),
-    mediaType: blob.media_type,
-    fullImageUrl: blob.full_image_url,
-    fullImageUrlThumb: blob.full_image_url_thumb,
-    fullImageUrlMedium: blob.full_image_url_medium,
-    imgWidth: blob.img_w,
-    imgHeight: blob.img_h,
-    s3ImgWidth: blob.s3_img_w,
-    s3ImgHeight: blob.s3_img_h,
-    totalLike: blob.total_like,
-    totalDislike: blob.total_dislike,
-    totalShare: blob.total_shared,
-    totalView: blob.view_count,
-    totalBooking: blob.total_booking,
+    isPublic: (typeof blob.is_public !== 'undefined') ? Boolean(blob.is_public) : true,
+    totalBooking: totalBooked || 0,
+    totalLike: totalLike || 0,
+    totalDislike: blob.total_dislike || 0,
+    totalShare: totalShare || 0,
+    totalView: totalView || 0,
+    albumMedias,
+    album: blob.album ? createAlbum(blob.album) : null,
     owner: blob.user ? createUser(blob.user) : null,
+    salonId: blob.salon_id ? Number(blob.salon_id) : null,
     salon: blob.salon ? createSalon(blob.salon) : null,
-    stylist: blob.beautician && blob.beautician.user ? createStylistFromLookbook(blob.beautician) : null,
-    album: blob.album ? createFavesalonAlbum(blob.album) : null,
-    albumPhotos,
-  };
+    stylistId: blob.stylist_id ? Number(blob.stylist_id) : null,
+    stylist: blob.stylist ? createStylistFromLookbook(blob.stylist) : null,
+    isLiked: blob.my_activity && blob.my_activity.liked,
+    serviceId: blob.service_id ? Number(blob.service_id) : null,
+    salonServiceId: blob.category_service_id ? Number(blob.category_service_id) : null,
+    productBrand: blob.product_brand_used || '',
+  });
+}
+function isVideoMedia({ mediaType }) {
+  return mediaType === MediaType.Video;
 }
 
 function createReviewPhoto(blob) {
@@ -10853,15 +10792,15 @@ function createReviewPhoto(blob) {
   };
 }
 function createReview(blob) {
-  const reviewPhotos = blob.salon_review_photo || blob.beautician_review_photo || [];
+  const reviewPhotos = blob.review_photo || [];
   const [createdDay, createdTime] = String(blob.create_date).split(' ');
   const [updatedDay, updatedTime] = String(blob.update_date).split(' ');
   return {
     title: blob.title,
-    point: Math.ceil(Number(blob.avg_point)),
     description: blob.comment,
-    createdDate: dayjs_min(`${createdDay} ${createdTime}`, apiDateFormat).valueOf(),
-    updatedDate: dayjs_min(`${updatedDay} ${updatedTime}`, apiDateFormat).valueOf(),
+    createdDate: dayjs_min(`${createdDay} ${createdTime}`, dateTimeFormat).valueOf(),
+    updatedDate: dayjs_min(`${updatedDay} ${updatedTime}`, dateTimeFormat).valueOf(),
+    point: Math.ceil(Number(blob.avg_point)),
     pointView: blob.view_point,
     pointPrice: blob.price_point,
     pointProduct: blob.product_point,
@@ -10871,69 +10810,58 @@ function createReview(blob) {
     helpful: blob.helpful,
     recommend: blob.recommend,
     user: blob.user ? createUser(blob.user) : null,
+    salon: blob.salon ? createSalon(blob.salon) : null,
+    stylist: blob.stylist && blob.stylist.user ? createStylist(blob.stylist) : null,
     photos: reviewPhotos.map(createReviewPhoto),
   };
 }
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
+const apiV2Prefix = 'api-ver2';
 class HttpService {
   constructor() {
     this.http = null;
     this.http = axios.create({
       baseURL: 'https://favesalon.com',
+      // baseURL: 'http://13.57.216.170',
       headers: {},
     });
   }
-  fetchSalonInfo(salonId) {
-    const url = 'api/salon/settings-public';
-    return this.http.post(url, { salon_id: salonId })
-      .then((response) => {
-      const { status, data } = response.data;
-      return status && data ? createSalon(data.Salon) : null;
-    })
-      .catch(() => (null));
-  }
-  fetchReviews(url, options, allReviews) {
-    const { noLoop } = options, restOptions = __rest(options, ["noLoop"]);
-    return this.http.post(url, restOptions)
+  fetchStyleDetail(styleId) {
+    return this.http.get(`${apiV2Prefix}/style/${styleId}/detail`)
       .then((response) => {
       const { status, data } = response.data;
       if (status) {
-        const reviews = (data || []).filter(blob => Math.ceil(Number(blob.avg_point)) > 0).map(createReview);
-        // fetch next page's reviews
-        if (!noLoop && reviews.length >= options.limit) {
-          return this.fetchReviews(url, Object.assign(Object.assign({}, options), { page: options.page + 1 }), allReviews.concat(reviews));
+        let styleInfo = null, similarStyles = [];
+        try {
+          styleInfo = createFaveStyle(data);
+          similarStyles = (data.style_similars || []).map(createFaveStyle);
         }
-        const finalReviews = options.page === 1 ? reviews : allReviews.concat(reviews);
-        return {
-          totalReviews: finalReviews.length || 0,
-          allReviews: finalReviews,
-        };
+        catch (e) { }
+        return { styleInfo, similarStyles };
       }
-      return { totalReviews: 0, allReviews: [] };
+      return { styleInfo: null, similarStyles: [] };
+    })
+      .catch(() => {
+      return { styleInfo: null, similarStyles: [] };
     });
   }
-  fetchSalonReviews(salonId, options) {
-    const url = '/api/salon/reviews';
-    return this.fetchReviews(url, Object.assign({ page: 1, limit: 5, salon_id: salonId, avg_point_greater_than: 0 }, options), [])
+  fetchSalonInfo(salonId) {
+    const url = `${apiV2Prefix}/salon/${salonId}/detail`;
+    return this.http.get(url)
+      .then((response) => {
+      const { status, data } = response.data;
+      return status && data ? createSalon(data) : null;
+    })
+      .catch(() => (null));
+  }
+  fetchSalonLatestStyles(salonId, options) {
+    const url = `${apiV2Prefix}/salon/${salonId}/styles`;
+    return this.http.post(url, Object.assign(Object.assign({}, options), { sort: 'newest' }))
       .then(response => {
-      const { totalReviews, allReviews } = response;
-      return {
-        total: totalReviews,
-        allItems: allReviews,
-      };
+      const { data } = response.data;
+      return (data || []).slice(0, options.limit).map(createFaveStyle);
     })
-      .catch(() => ({ total: 0, allItems: [] }));
+      .catch(() => ([]));
   }
   decorateServiceGroups(groups) {
     return groups.map((cate, index) => {
@@ -10960,7 +10888,7 @@ class HttpService {
     });
   }
   fetchSalonServices(salonId) {
-    const url = `api/salon/services?v=2&id=${salonId}`;
+    const url = `${apiV1Prefix}/salon/services?v=2&id=${salonId}`;
     return this.http.get(url)
       .then(response => {
       const { status, data } = response.data;
@@ -10971,34 +10899,42 @@ class HttpService {
     })
       .catch(() => ([]));
   }
-  fetchSalonStylists(salonId) {
-    const fetchStylistSchedules = this.http.get(`api/calendar/resource/stylists?salon_id=${salonId}`)
-      .then((response) => {
-      const { status, data } = response.data;
-      return status ? (data || []) : [];
-    })
-      .catch(() => ([]));
-    const fetchStylistSkills = this.http.get(`api/salon/skill-stylists/${salonId}`)
-      .then((response) => {
-      const { status, data } = response.data;
-      return status ? (data || []).map(blob => (Object.assign(Object.assign({}, blob), { id: blob.stylist_id }))) : [];
+  fetchSalonStylists(salonId, options = { page: 1, limit: 12 }) {
+    const url = `${apiV2Prefix}/salon/${salonId}/stylists?page=${options.page}&limit=${options.limit}`;
+    return this.http.get(url)
+      .then(response => {
+      const { paging, data } = response.data;
+      return {
+        total: paging.total_item || data.length,
+        data: data.map(createStylist),
+      };
     })
-      .catch(() => ([]));
-    return Promise.all([fetchStylistSchedules, fetchStylistSkills])
-      .then(results => {
-      const [stylistSchedules, stylistSkills] = results;
-      const allStylistGroups = groupBy_1(stylistSchedules.concat(stylistSkills), stylist => stylist.id);
-      return Object.keys(allStylistGroups)
-        .filter(stylistId => Number(stylistId) > 0)
-        .map(stylistId => {
-        const [schedule, skills] = allStylistGroups[stylistId];
-        return createStylist(Object.assign(Object.assign({}, schedule), skills));
-      });
+      .catch(() => ({ total: 0, data: [] }));
+  }
+  fetchSalonReviews(salonId, options) {
+    const url = `${apiV2Prefix}/salon/${salonId}/reviews`;
+    return this.http.post(url, Object.assign({ avg_point_greater_than: 0 }, options))
+      .then(response => {
+      const { data, paging } = response.data || {};
+      const { total_1star: onestar, total_2star: twoStar, total_3star: threeStar, total_4star: fourStar, total_5star: fiveStar, total_review: totalReviews, avg_point: reviewPoint, } = paging.review_detail || {};
+      return {
+        total: paging.total_item || 0,
+        stats: {
+          totalReviews,
+          reviewPoint: reviewPoint ? Math.ceil(reviewPoint) : 0,
+          '1': onestar ? Math.ceil(onestar) : 0,
+          '2': twoStar ? Math.ceil(twoStar) : 0,
+          '3': threeStar ? Math.ceil(threeStar) : 0,
+          '4': fourStar ? Math.ceil(fourStar) : 0,
+          '5': fiveStar ? Math.ceil(fiveStar) : 0,
+        },
+        data: data.map(createReview),
+      };
     })
-      .catch(() => []);
+      .catch(() => ({ total: 0, stats: {}, data: [] }));
   }
   fetchSalonCategories() {
-    return this.http.post('api/home/get-service', { limit: 50 })
+    return this.http.post(`${apiV2Prefix}/search/get-services`, { limit: 50 })
       .then((response) => {
       const { status, data } = response.data;
       if (status) {
@@ -11017,178 +10953,42 @@ class HttpService {
   }
   fetchSalonLookbooks(salonId, options) {
     const noResult = { total: 0, allLookbooks: [] };
-    return this.http.post('api/style/filter', Object.assign({ page: 1, limit: 20, salon_id: salonId }, options))
-      .then((response) => {
+    const url = `${apiV2Prefix}/salon/${salonId}/styles`;
+    const postData = Object.assign({ page: 1, limit: 20 }, options);
+    return this.http.post(url, postData)
+      .then(response => {
       const { status, data, paging } = response.data;
       if (status) {
         return {
           total: paging.total_item || 0,
-          allLookbooks: (data || []).map(createFavesalonStyle),
+          allLookbooks: (data || []).map(createFaveStyle),
         };
       }
       return noResult;
     })
       .catch(() => (noResult));
   }
-  fetchSalonPhotos(salonId) {
-    return this.http
-      .post('api/style/filter', {
-      page: 1,
-      limit: 20,
-      salon_id: salonId,
-    })
-      .then((response) => {
-      const { status, data } = response.data;
-      if (status) {
-        return (data || []).map(createFavesalonStyle);
-      }
-      return [];
-    })
-      .catch(() => {
-      return [];
-    });
-  }
-  fetchAllStyles(url, options, allStyles) {
-    return this.http.post(url, options)
-      .then((response) => {
-      const { status, data } = response.data;
-      if (status) {
-        const styles = (data || []).map(createFavesalonStyle);
-        // fetch next page styles
-        if (styles.length >= options.limit) {
-          return this.fetchAllStyles(url, Object.assign(Object.assign({}, options), { page: options.page + 1 }), allStyles.concat(styles));
-        }
-        return options.page === 1 ? styles : allStyles;
-      }
-      return allStyles;
-    });
-  }
-  fetchAllSalonPhotos(salonId, options) {
-    return this.fetchAllStyles('api/style/filter', Object.assign({ page: 1, limit: 20, salon_id: salonId }, options), []).catch(() => {
-      return [];
-    });
-  }
-  fetchStyleDetail(styleId) {
-    return this.http.post('api/home/style-info', { photo_id: styleId })
-      .then((response) => {
-      const { status, data } = response.data;
-      if (status) {
-        return createFavesalonLookbook(data);
-      }
-      return null;
-    })
-      .catch(() => (null));
-  }
-  fetchStyleComments(options) {
-    return this.http.post('api/comment/filter', options)
+  fetchStyleComments(styleId) {
+    const url = `${apiV2Prefix}/style/comment?photo_id=${styleId}`;
+    return this.http.get(url)
       .then(response => {
-      const { status, data } = response.data;
-      if (status) {
-        return (data || []).map(createFaveStyleComent);
-      }
-      return [];
+      const { paging, data } = response.data;
+      return {
+        total: paging.total_item || 0,
+        data: data.map(createFaveStyleComment),
+      };
     })
-      .catch(() => ([]));
+      .catch(() => ({ total: 0, data: [] }));
   }
 }
 const HttpService$1 = () => new HttpService();
 
-const indexCss$d = "@media (min-width: 768px){.salon-contact--links{overflow:hidden;margin-left:-32px}.salon-contact--links .salon-contact--links-item{float:left;display:flex;flex-direction:row;align-items:center;font-size:16px;min-width:300px;padding-left:32px;margin-top:8px}.salon-contact--links .salon-contact--links-item:nth-child(2n+1){clear:left}}";
-
-let SalonContact$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  componentWillLoad() {
-    if (this.salonInfo) {
-      this.salonInfoState = JSON.parse(this.salonInfo);
-    }
-    else {
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      HttpService$1().fetchSalonInfo(this.salonId)
-        .then(salonInfo => this.salonInfoState = salonInfo);
-    }
-    catch (e) { }
-  }
-  render() {
-    const { about, email, website, businessPhone, } = (this.salonInfoState || {});
-    const websiteUrl = formatWebsiteUrl(website);
-    return (h("div", { class: "view view--salon-contact" }, h("div", { class: "view-content" }, h("div", { style: { fontSize: '16px', fontWeight: 'bold' } }, "Contact info"), h("div", { class: "salon-contact--links" }, businessPhone && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-phone-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }), " ", businessPhone)), websiteUrl && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-links-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }), " ", h("a", { target: websiteUrl && websiteUrl.indexOf(window.location.hostname) === -1 ? '_blank' : undefined, href: websiteUrl, style: { color: Colors.Gray01, textDecoration: 'none' } }, websiteUrl))), email && (h("div", { class: "salon-contact--links-item" }, h("i", { class: "ri-mail-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }), " ", h("a", { href: `mailto:${email}`, style: { color: Colors.Gray01, textDecoration: 'none' } }, email)))), h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about }))));
-  }
-  static get style() { return indexCss$d; }
-};
-
-const indexCss$c = ".salon-modal.salon-modal--gift-card .salon-modal--title{margin:0}.salon-modal.salon-modal--gift-card .salon-modal--close{width:40px;height:40px;right:16px;top:16px}.salon-modal.salon-modal--gift-card .salon-modal--header{height:72px;padding:16px}.salon-modal.salon-modal--gift-card .salon-modal--inner{height:90vh}.salon-modal.salon-modal--gift-card .salon-modal--content{height:90vh;padding:0 16px;overflow-y:auto}";
-
-let SalonGiftCard$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.buttonClass = '';
-    this.buttonText = 'Buy Gift card';
-    this.primaryColor = Colors.Coral03;
-  }
-  openModal() {
-    const elBookingModal = document.createElement('div');
-    elBookingModal.innerHTML = `
-      <salon-gift-card-modal
-        salon-id=${this.salonId}
-      ></salon-gift-card-modal>
-    `;
-    document.body.appendChild(elBookingModal);
-  }
-  render() {
-    const buttonClass = this.buttonClass || 'btn btn-primary';
-    let buttonStyle = {};
-    if (!this.buttonClass) {
-      const primaryColor = color(this.primaryColor);
-      const primaryColorHover = primaryColor.darken(0.05);
-      buttonStyle = lib.css({
-        backgroundColor: this.primaryColor,
-        borderColor: this.primaryColor,
-        color: primaryColor.isLight() ? Colors.Black01 : Colors.White,
-        ':hover': {
-          backgroundColor: primaryColorHover,
-          borderColor: primaryColorHover,
-        },
-      });
-    }
-    return (h("div", { class: "salon-gift-card" }, h("div", { class: "salon-gift-card--button" }, h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
-  }
-  static get style() { return indexCss$c; }
-};
-
-const indexCss$b = ".salon-modal.salon-modal--gift-card .salon-modal--title{margin:0}.salon-modal.salon-modal--gift-card .salon-modal--close{width:40px;height:40px;right:16px;top:16px}.salon-modal.salon-modal--gift-card .salon-modal--header{height:72px;padding:16px}.salon-modal.salon-modal--gift-card .salon-modal--inner{height:90vh}.salon-modal.salon-modal--gift-card .salon-modal--content{height:90vh;padding:0 16px;overflow-y:auto}";
-
-let SalonGiftCardModal$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.isModalOpen = true;
-  }
-  closeModal() {
-    this.isModalOpen = false;
-    const el = document.querySelector('salon-gift-card-modal');
-    el.remove();
-  }
-  render() {
-    return (h("div", { class: "salon-gift-card--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--gift-card" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--content" }, h("iframe", { height: "100%", width: "100%", style: { border: 'none', display: 'block', height: '100%' }, src: `https://www.favesalon.com/salon/detail/${this.salonId}/gift-cards.html` })))))));
-  }
-  static get style() { return indexCss$b; }
-};
-
-const indexCss$a = ".salon-info .view--salon-styles .view-content{padding:0}";
+const indexCss$b = "";
 
 let SalonInfo$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.backgroundColor = Colors.Gray06;
   }
   componentWillLoad() {
     this.fetchData();
@@ -11200,40 +11000,92 @@ let SalonInfo$1 = class extends HTMLElement {
     catch (e) { }
   }
   render() {
-    if (this.salonInfo) {
-      return (h("div", { class: "salon-info", style: { background: this.backgroundColor } }, h("div", { class: "row" }, h("div", { class: "col-md-5", style: { marginBottom: '24px' } }, h("salon-locations", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "col-md-7", style: { marginBottom: '24px' } }, h("salon-styles", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))), h("div", { class: "salon-info--schedules", style: { marginBottom: '24px' } }, h("salon-schedules", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) })), h("div", { class: "salon-info--contact" }, h("salon-contact", { "salon-id": 49989, "salon-info": JSON.stringify(this.salonInfo) }))));
-    }
-    return (h("div", { class: "salon-info", style: { padding: '24px', textAlign: 'center' } }, "Loading..."));
+    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) }))))));
   }
-  static get style() { return indexCss$a; }
+  static get style() { return indexCss$b; }
 };
 
-const indexCss$9 = ".salon-latest-reviews .salon-review{min-width:280px}@media (min-width: 768px){.salon-latest-reviews .salon-review{min-width:300px}}";
+function formatWebsiteUrl(website) {
+  return !!website ? website.indexOf('http') > -1 ? website : `http://${website}` : null;
+}
+function formatFullAddress(salon) {
+  const { businessAddress, city, state, zipcode, } = salon || {};
+  const stateFields = [state, zipcode].filter(field => !!field);
+  if (businessAddress) {
+    return [businessAddress, city]
+      .filter(field => !!field)
+      .concat(stateFields.length > 0 ? [stateFields.join(' ')] : [])
+      .join(', ');
+  }
+  return null;
+}
+function getRatingText() {
+  return ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
+}
+
+const indexCss$a = ".salon-latest-reviews .salon-review{min-width:280px}@media (min-width: 768px){.salon-latest-reviews .salon-review{min-width:300px}}";
 
 let SalonLatestReviews$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.primaryColor = Colors.Primary;
     this.salonReviews = [];
   }
   componentWillLoad() {
     this.fetchData();
   }
   async fetchData() {
+    this.isLoading = true;
     try {
-      const { allItems } = await HttpService$1().fetchSalonReviews(this.salonId, { noLoop: true });
-      this.salonReviews = [...allItems];
+      const { data: allReviews } = await HttpService$1().fetchSalonReviews(this.salonId, { limit: 5 });
+      this.salonReviews = [...allReviews];
     }
     catch (e) { }
+    this.isLoading = false;
   }
   render() {
+    if (this.isLoading) {
+      return (h("div", { class: "salon-latest-reviews", style: { overflow: 'hidden' } }, h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, [1, 2, 3, 4, 5].map((fakeId, index) => {
+        return (h("div", { key: `salon-latest-review--${fakeId}`, class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray02}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) }, h("div", { class: "card", style: { border: 'none' } }, h("div", { class: "card-body" }, h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, h("div", { style: {
+            backgroundColor: Colors.Gray02,
+            borderRadius: '50px',
+            height: '48px',
+            width: '48px',
+            float: 'left',
+          } }), h("div", { style: {
+            backgroundColor: Colors.Gray01,
+            height: '16px',
+            width: '120px',
+            marginLeft: '16px',
+            marginTop: '14px',
+            float: 'left',
+          } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(() => (h("div", { style: {
+            backgroundColor: Colors.Gray01,
+            height: '20px',
+            width: '20px',
+            marginRight: '8px',
+            float: 'left',
+          } })))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold', marginTop: '16px' } }, h("div", { style: {
+            backgroundColor: Colors.Gray01,
+            height: '16px',
+            width: '132px',
+          } })), h("div", { class: "salon-review--detail", style: { marginTop: '8px' } }, h("div", { class: "salon-review--description", style: {
+            fontSize: '16px',
+            lineHeight: '26px',
+            overflow: 'hidden',
+          } }, h("div", { style: {
+            backgroundColor: Colors.Gray01,
+            height: '16px',
+            width: '240px',
+            float: 'left',
+          } })))))));
+      }))));
+    }
     const ratingTexts = getRatingText();
     return (h("div", { class: "salon-latest-reviews", style: { overflowX: 'auto' } }, h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, (this.salonReviews || []).map((review, index) => {
       const { user } = review;
-      return (h("div", { class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray05}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) }, h("div", { class: "card", style: { border: 'none' } }, h("div", { class: "card-body" }, h("div", { class: "salon-review--user", style: { marginBottom: '16px' } }, h("user-avatar", { size: 48, name: user.name, shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, avatar: user.avatar, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
-          fontSize: '16px',
-          marginRight: '4px',
-        } }))), h("div", { class: "salon-review--rating--date", style: { color: Colors.Gray03, marginLeft: '16px' } }, dayjs_min(review.createdDate).format(shortDate))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--description", style: {
+      return (h("div", { class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray02}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) }, h("div", { class: "card", style: { border: 'none' } }, h("div", { class: "card-body" }, h("div", { class: "salon-review--user", style: { marginBottom: '16px' } }, h("user-avatar", { size: 48, name: h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, avatar: user.avatar, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '16px', marginRight: '4px' }, score <= review.point ? { color: this.primaryColor } : { color: Colors.Gray04 }) }))), h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, dayjs_min(review.createdDate).format(shortDateYearFormat))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--description", style: {
           fontSize: '16px',
           lineHeight: '26px',
           overflow: 'hidden',
@@ -11248,15 +11100,103 @@ let SalonLatestReviews$1 = class extends HTMLElement {
           cursor: 'pointer',
           borderRadius: '2px',
           height: '66px',
-          marginTop: '16px',
-          marginRight: '16px',
+          marginTop: '12px',
+          marginRight: '12px',
         } }, h("img", { alt: "", src: photo.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))))));
     }))));
   }
+  static get style() { return indexCss$a; }
+};
+
+const indexCss$9 = "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$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoadingState = true;
+    try {
+      const promises = [
+        HttpService$1().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%)',
+        } }))))));
+    })))));
+  }
   static get style() { return indexCss$9; }
 };
 
-const indexCss$8 = "";
+const indexCss$8 = "@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$1 = class extends HTMLElement {
   constructor() {
@@ -11279,20 +11219,36 @@ let SalonLocations$1 = class extends HTMLElement {
     catch (e) { }
   }
   render() {
-    const { businessLocationLat: lat, businessLocationLng: lng } = this.salonInfoState || {};
-    return (h("div", { class: "view view--salon-locations" }, h("div", { class: "view-content", style: { height: '380px' } }, h("div", { style: {
-        fontSize: '16px',
-        lineHeight: '26px',
-        maxHeight: '52px',
-        marginBottom: '16px',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      } }, formatFullAddress(this.salonInfoState)), h("div", { class: "view--salon-info--map", style: { height: '264px' } }, lat && lng && h("google-map", { lat: lat, lng: lng })))));
+    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 })))));
   }
   static get style() { return indexCss$8; }
 };
 
-const indexCss$7 = ".salon-loobooks--grid-item{float:left;max-width:150px}@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}}@media (min-width: 768px){.salon-loobooks--grid-item{max-width:200px}}";
+const indexCss$7 = "@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}}";
 
 const lookbookSortOptions = [{
     value: 'like',
@@ -11344,19 +11300,13 @@ let SalonLookbook$1 = class extends HTMLElement {
         var masonry = new Macy({
           container: '#salon-loobooks--grid',
           useContainerForBreakpoints: true,
-          margin: 12,
-          columns: 7,
+          margin: 16,
+          columns: 5,
           breakAt: {
-            1200: {
-              margin: 16,
-              columns: 6,
-            },
-            992: {
-              margin: 16,
-              columns: 5,
+            1024: {
+              columns: 4,
             },
             768: {
-              margin: 16,
               columns: 3,
             },
             576: {
@@ -11408,7 +11358,7 @@ let SalonLookbook$1 = class extends HTMLElement {
       this.salonLookbooks = [];
       this.hideLoadMore = true;
       this.filterBy = filterBy;
-      await this.fetchLookbooks(Object.assign({ page: this.currentPage, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [this.filterBy] } : {}));
+      await this.fetchLookbooks(Object.assign({ page: this.currentPage, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [Number(this.filterBy)] } : {}));
       if (window.masonry) {
         this.isLayoutSetup = false;
       }
@@ -11448,10 +11398,10 @@ let SalonLookbook$1 = class extends HTMLElement {
   onClickLookbook(style) {
     const elLookbookModal = document.createElement('div');
     elLookbookModal.innerHTML = `
-      <salon-lookbook-modal
+      <style-detail
         salon-id=${this.salonId}
         salon-lookbook='${JSON.stringify(style)}'
-      ></salon-lookbook-modal>
+      ></style-detail>
     `;
     document.body.appendChild(elLookbookModal);
   }
@@ -11485,154 +11435,28 @@ let SalonLookbook$1 = class extends HTMLElement {
   }
   render() {
     return (h("div", { class: "salon-loobooks" }, h("div", null, h("div", { class: "view-content" }, this.renderHeader(), this.salonLookbooks.length > 0 && (h("div", { class: "salon-loobooks--grid", id: "salon-loobooks--grid" }, this.salonLookbooks.map(style => {
-      const { caption, fullImageUrlThumb, owner } = style;
+      const { caption, imageThumbMedium, owner } = style;
       return (h("div", { class: "salon-lookbook salon-loobooks--grid-item", onClick: () => this.onClickLookbook(style) }, h("div", { class: "card", style: {
           background: 'none',
           border: 'none',
-          maxWidth: '200px',
+          // maxWidth: '200px',
         } }, h("div", { class: "salon-lookbook--image", style: {
           borderRadius: '8px',
           overflow: 'hidden',
           minHeight: '80px',
-          background: Colors.Gray06,
-        } }, h("img", { src: fullImageUrlThumb, alt: caption })), owner && (h("div", { class: "card-body", style: { paddingLeft: '0' } }, h("user-avatar", { name: owner.name, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
-    })))), this.salonLookbooks.length > 0 && !this.hideLoadMore && (h("div", { class: "view-footer", style: { paddingTop: '16px', textAlign: 'center' } }, h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
+          background: Colors.Gray01,
+        } }, h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (h("div", { class: "card-body", style: { paddingLeft: '0' } }, h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
+    })))), this.salonLookbooks.length > 0 && !this.hideLoadMore && (h("div", { class: "view-footer", style: { paddingTop: '16px', textAlign: 'center' } }, h("button", { type: "button", class: "btn btn-light btn-lg", onClick: () => this.onLoadMore(), style: {
+        background: Colors.White,
+        border: `1px solid ${Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      } }, this.isLoadingMore ? 'Loading' : 'Load more'))))));
   }
   static get style() { return indexCss$7; }
 };
 
-var relativeTime = createCommonjsModule(function (module, exports) {
-!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
-});
-
-const lookbookModalCss = "salon-lookbook-modal .salon-modal--close{right:8px;top:8px}salon-lookbook-modal .salon-modal--inner{height:100%;width:100%;max-width:none}salon-lookbook-modal .salon-styles--item-background{-moz-filter:blur(32px);-webkit-filter:blur(32px);filter:blur(32px)}salon-lookbook-modal .salon-styles--item .salon-styles--item-background{z-index:1}salon-lookbook-modal .salon-styles--item .salon-styles--item-image{position:relative;z-index:2}salon-lookbook-modal .salon-styles--item .carousel-caption{padding-bottom:0;z-index:2}salon-lookbook-modal .salon-styles--slides .carousel-control-prev{z-index:2}@media (min-width: 576px){salon-lookbook-modal .salon-styles--item{height:380px !important}}@media (min-width: 992px){salon-lookbook-modal .salon-modal--inner{height:90%;width:90%;max-width:900px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;overflow:hidden !important}salon-lookbook-modal .carousel,salon-lookbook-modal .carousel-inner,salon-lookbook-modal .carousel-item,salon-lookbook-modal .salon-styles--item,salon-lookbook-modal .salon-modal--content,salon-lookbook-modal .style-detail--metadata-detail,salon-lookbook-modal .style-detail--container{height:100% !important}salon-lookbook-modal .style-detail--container{display:flex}salon-lookbook-modal .carousel-inner{z-index:1 !important}salon-lookbook-modal .carousel-control-next,salon-lookbook-modal .carousel-control-prev{z-index:2 !important}salon-lookbook-modal .style-detail--photos,salon-lookbook-modal .style-detail--metadata{width:50%}salon-lookbook-modal .salon-styles--item{-moz-border-radius:0 !important;-webkit-border-radius:0 !important;border-radius:0 !important}}";
-
-dayjs_min.extend(relativeTime);
-let SalonBookingModal$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.salonLookbook = '';
-    this.lookbookComments = [];
-    this.isModalOpen = true;
-  }
-  componentWillLoad() {
-    if (!!this.salonLookbook) {
-      this.lookbookInfo = JSON.parse(this.salonLookbook);
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      const promises = [
-        HttpService$1().fetchStyleDetail(this.lookbookInfo.id).then(lookbookInfo => {
-          if (lookbookInfo) {
-            this.lookbookInfo = lookbookInfo;
-          }
-        }),
-        HttpService$1().fetchStyleComments({ photo_id: [this.lookbookInfo.id] }).then(lookbookComments => this.lookbookComments = lookbookComments),
-      ];
-      return Promise.all(promises);
-    }
-    catch (e) { }
-  }
-  orderedStylePhotos(albumPhotos, activeId) {
-    let selectedStyles = [];
-    let restStyles = [];
-    (albumPhotos || []).forEach(s => {
-      if (s.id === activeId) {
-        selectedStyles = selectedStyles.concat(s);
-      }
-      else {
-        restStyles = restStyles.concat(s);
-      }
-    });
-    return selectedStyles.concat(restStyles);
-  }
-  closeModal() {
-    this.isModalOpen = false;
-    const el = document.querySelector('salon-lookbook-modal');
-    el.remove();
-  }
-  render() {
-    const { id, caption, createdDate, albumPhotos, totalView, totalLike, totalBooking, owner, stylist, album, } = this.lookbookInfo;
-    const oderedStyles = albumPhotos ? this.orderedStylePhotos(albumPhotos, id) : [];
-    return (h("div", { class: "salon-lookbook--modal" }, this.isModalOpen && (h("div", { class: "salon-modal salon-modal--lookbook-detail" }, h("div", { class: "salon-modal--backdrop", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--close", onClick: () => this.closeModal() }), h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("div", { class: "style-detail--container", style: {
-        backgroundColor: Colors.White,
-        marginRight: 'auto',
-        marginLeft: 'auto',
-        maxWidth: '990',
-      } }, oderedStyles.length > 0 && (h("div", { class: "style-detail--photos" }, h("div", { id: "style-detail-carousel", class: "carousel slide", "data-bs-ride": "carousel" }, h("div", { class: "carousel-inner" }, oderedStyles.map((photo, index) => {
-      const { caption, description, 
-      // mediaType,
-      fullImageUrl, fullImageUrlThumb, fullImageUrlMedium, imgWidth, imgHeight, } = photo;
-      const isLandscape = imgWidth >= imgHeight;
-      return (h("div", { class: `carousel-item ${index === 0 ? 'active' : ''}` }, h("div", { class: "salon-styles--item", style: {
-          flexDirection: isLandscape ? 'column' : 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-          overflow: 'hidden',
-          position: 'relative',
-          display: 'flex',
-          height: '240px',
-          borderRadius: '8px 8px 0 0',
-        } }, h("div", { class: "salon-styles--item-background", style: Object.assign(Object.assign({}, fullImageUrlThumb ? { backgroundImage: `url(${fullImageUrlThumb})` } : {}), { backgroundColor: Colors.Gray06, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', position: 'absolute', bottom: '0px', right: '0px', left: '0px', top: '0px', zIndex: '1' }) }), h("img", { alt: caption, class: "salon-styles--item-image", src: fullImageUrlThumb || fullImageUrlMedium || fullImageUrl, style: Object.assign({ display: 'inline-block', position: 'relative', zIndex: '2' }, isLandscape ? { width: '100%' } : { height: '100%' }) }), h("div", { class: "carousel-caption d-none d-md-block" }, caption && h("h5", null, caption), description && h("p", null, description)))));
-    })), h("button", { type: "button", "data-bs-slide": "prev", class: "carousel-control-prev", "data-bs-target": "#style-detail-carousel" }, h("span", { class: "carousel-control-prev-icon", "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, "Previous")), h("button", { type: "button", "data-bs-slide": "next", class: "carousel-control-next", "data-bs-target": "#style-detail-carousel" }, h("span", { class: "carousel-control-next-icon", "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, "Next"))))), h("div", { class: "style-detail--metadata" }, h("div", { class: "style-detail--metadata-detail", style: {
-        position: 'relative',
-        overflowY: 'auto',
-        padding: '16px 24px',
-        height: '100%',
-      } }, h("div", { class: "style-detail--info--field style-detail--metadata-stats", style: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        marginBottom: '16px',
-      } }, h("div", { style: { display: 'flex', alignItems: 'center' } }, h("i", { class: "ri-eye-line", style: {
-        color: Colors.Gray03,
-        fontSize: '16px',
-        marginRight: '4px',
-        position: 'relative',
-        top: '1px',
-      } }), " ", totalView, " ", totalView === 1 ? 'view' : 'views'), h("div", { style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } }, h("i", { class: "ri-heart-fill", style: {
-        color: Colors.Gray03,
-        fontSize: '16px',
-        marginRight: '4px',
-        position: 'relative',
-        top: '1px',
-      } }), " ", totalLike, " ", totalLike === 1 ? 'fave' : 'faves'), h("div", { style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } }, h("i", { class: "ri-calendar-check-line", style: {
-        color: Colors.Gray03,
-        fontSize: '16px',
-        marginRight: '4px',
-        position: 'relative',
-        top: '1px',
-      } }), " ", totalBooking, " booked")), h("div", { style: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-      } }, owner && (h("div", { class: "style-detail--info--field" }, h("span", { style: {
-        fontSize: '14px',
-        color: Colors.Gray03,
-      } }, "Posted by"), " ", h("span", { style: {
-        fontSize: '16px',
-        fontWeight: 'bold',
-        color: Colors.Gray01,
-      } }, owner.name))), h("div", { class: "style-detail--info--field", style: {
-        fontSize: '14px',
-        color: Colors.Gray03,
-      } }, dayjs_min(createdDate).fromNow())), caption && (h("div", { class: "style-detail--info--field", style: {
-        color: Colors.Gray01,
-        marginTop: '12px',
-        fontSize: '24px',
-      } }, caption)), stylist && (h("div", { class: "style-detail--info--field", style: { marginTop: '24px' } }, h("div", { style: { fontSize: '14px', color: Colors.Gray03, marginBottom: '8px' } }, "Stylist"), h("div", { style: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      } }, h("user-avatar", { size: 32, name: stylist.name, shortName: `${(stylist.firstName || '').charAt(0)}${(stylist.lastName || '').charAt(0)}`, avatar: stylist.avatar, nameStyle: { fontSize: 16, fontWeight: 'bold' } })))), album && album.service && (h("div", { class: "style-detail--info--field", style: { marginTop: '24px' } }, h("div", { style: { fontSize: '14px', color: Colors.Gray03, marginBottom: '8px' } }, "Services"), h("div", { style: { fontSize: '16px', color: Colors.Gray01 } }, album.service.name))))))))))));
-  }
-  static get style() { return lookbookModalCss; }
-};
-
 const indexCss$6 = "salon-ranking{display:block}";
 
 let SalonRanking$1 = class extends HTMLElement {
@@ -11645,30 +11469,30 @@ let SalonRanking$1 = class extends HTMLElement {
   getRankingData(ranking) {
     if (ranking === 5) {
       return {
-        color: Colors.Danger,
+        color: Colors.Primary,
         text: 'Viral',
       };
     }
     if (ranking === 4) {
       return {
-        color: Colors.Pink03,
+        color: Colors.Orange03,
         text: 'Advancing',
       };
     }
     if (ranking === 3) {
       return {
-        color: Colors.Orange03,
+        color: Colors.Lilac03,
         text: 'Progressing',
       };
     }
     if (ranking === 2) {
       return {
-        color: Colors.DarkBlue03,
+        color: Colors.Blue03,
         text: 'Building',
       };
     }
     return {
-      color: Colors.Gray01,
+      color: Colors.Gray05,
       text: 'Starting',
     };
   }
@@ -11701,185 +11525,168 @@ const sortOptions = [{
     value: 'rating_asc',
     label: 'Low rating first',
   }];
-const scoreValuesMapping = {
-  all: 'all',
-  star1: 1,
-  star2: 2,
-  star3: 3,
-  star4: 4,
-  star5: 5,
-};
 let SalonReviews$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.primaryColor = Colors.Coral03;
+    this.primaryColor = Colors.Primary;
+    this.stats = {};
     this.totalReviews = 0;
-    this.salonReviews = [];
-    this.pageOffset = pageLimited;
-    this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
-    this.sorting = sortOptions[0].value;
-    this.renderReviewsList = () => {
-      const ratingTexts = getRatingText();
-      const filteredReviews = this.getFilteredReviews(this.pageOffset);
-      const filteredReviewsCount = this.ratings.indexOf(scoreValuesMapping.all) > -1
-        ? this.totalReviews : filteredReviews.length;
-      return (h("div", { class: "reviews-list" }, h("div", { class: "reviews-list--header", style: {
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: '24px',
-        } }, h("div", { class: "reviews-list--couter", style: { fontWeight: 'bold' } }, filteredReviewsCount, " ", filteredReviewsCount === 1 ? `review` : `reviews`), h("div", { class: "reviews-list--sorting", style: {
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-        } }, h("label", { style: { marginRight: '8px', marginBottom: '0' } }, "Sort by"), h("select", { class: "form-select", style: { width: '160px' }, onChange: (evt) => this.onChangeSorting(evt.target.value) }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sorting }, sortOption.label)))))), h("div", { class: "view-content" }, filteredReviewsCount > 0 && filteredReviews.map(review => {
-        const { user } = review;
-        return (h("div", { class: "salon-review", style: {
-            marginBottom: '24px',
-            paddingBottom: '24px',
-            borderBottom: `1px solid ${Colors.Gray05}`,
-          } }, h("div", { class: "salon-review--user", style: { marginBottom: '24px' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: user.name, shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => {
-          const isHightlight = score <= review.point;
-          return (h("i", { class: isHightlight ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '16px', marginRight: '4px' }, isHightlight ? { color: this.primaryColor } : { color: Colors.Gray03 }) }));
-        }), review.createdDate && (h("div", { class: "salon-review--rating--date", style: { color: Colors.Gray03, marginLeft: '16px' } }, dayjs_min(review.createdDate).format(shortDate)))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '24px' } }, h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }), h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))), review.photos.length > 0 && (h("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            overflowX: 'auto',
-          } }, review.photos.map(fileObj => (h("div", { style: {
-            border: '1px solid #d9d9d9',
-            position: 'relative',
-            cursor: 'pointer',
-            borderRadius: '2px',
-            height: '66px',
-            marginTop: '16px',
-            marginRight: '16px',
-          } }, h("img", { alt: "", src: fileObj.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))));
-      })), this.canLoadMore && (h("div", { class: "view-footer", style: { textAlign: 'center' } }, h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more')))));
-    };
+    this.allReviews = [];
+    this.page = 1;
+    this.filterBy = [];
+    this.sortBy = sortOptions[0].value;
   }
   componentWillLoad() {
     this.fetchData();
   }
   fetchData() {
+    this.isLoading = true;
     try {
-      const promises = [
-        HttpService$1().fetchSalonInfo(this.salonId).then(salonInfo => this.salonInfo = salonInfo),
-        HttpService$1().fetchSalonReviews(this.salonId, { limit: pageLimited }).then(response => {
-          const { total, allItems } = response;
-          this.totalReviews = total;
-          this.salonReviews = allItems;
-          if (total > pageLimited) {
-            this.canLoadMore = true;
-          }
-        }),
-      ];
-      return Promise.all(promises);
+      HttpService$1().fetchSalonReviews(this.salonId, {
+        page: 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, stats, data: allReviews } = response;
+        this.stats = stats;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = total > pageLimited;
+      });
     }
     catch (e) { }
-  }
-  sortReviews(filteredReviews) {
-    return sortBy_1(filteredReviews, [review => {
-        if (this.sorting === 'rating_desc') {
-          return -review.point;
-        }
-        if (this.sorting === 'rating_asc') {
-          return review.point;
-        }
-        const createdTime = dayjs_min(review.createdDate).unix();
-        return this.sorting === 'oldest' ? createdTime : -createdTime;
-      }]);
-  }
-  getFilteredReviews(pageOffset) {
-    let filteredReviews = [...this.salonReviews];
-    if (this.ratings.indexOf(scoreValuesMapping.all) === -1) {
-      const reviewRatingScores = this.ratings.map(r => scoreValuesMapping[r]);
-      filteredReviews = [...filteredReviews].filter(review => reviewRatingScores.indexOf(review.point) > -1);
-    }
-    const sortedReviews = this.sortReviews(filteredReviews);
-    return pageOffset ? sortedReviews.slice(0, pageOffset) : sortedReviews;
+    this.isLoading = false;
   }
   onLoadMore() {
     this.isLoadingMore = true;
     try {
-      this.pageOffset += pageLimited;
-      const totalResults = this.getFilteredReviews(this.pageOffset).length;
-      if (this.pageOffset > totalResults) {
-        this.canLoadMore = false;
-      }
+      HttpService$1().fetchSalonReviews(this.salonId, {
+        page: this.page + 1,
+        sort: this.sortBy,
+        limit: pageLimited,
+      }).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = this.page + 1;
+        this.totalReviews = total;
+        this.allReviews = this.allReviews.concat(allReviews);
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
     }
-    catch (error) { }
+    catch (e) { }
     this.isLoadingMore = false;
   }
-  onChangeSorting(sorting) {
-    this.sorting = sorting;
-    this.pageOffset = pageLimited;
-    this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
-  }
-  ;
-  onChangeFilterRating(rating) {
-    if (rating === scoreValuesMapping.all) {
-      this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
+  onChangeFilter(filterBy) {
+    this.isFiltering = true;
+    try {
+      HttpService$1().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: this.sortBy, limit: pageLimited }, filterBy.length > 0 ? { avg_point: filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
     }
-    else if (this.ratings.indexOf(rating) > -1) {
-      this.ratings = this.ratings.filter(r => r !== scoreValuesMapping.all && r !== rating);
+    catch (e) { }
+    this.isFiltering = false;
+  }
+  onChangeSorting(sortBy) {
+    this.isSorting = true;
+    try {
+      HttpService$1().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: sortBy, limit: pageLimited }, this.filterBy.length > 0 ? { avg_point: this.filterBy } : {})).then(response => {
+        const { total, data: allReviews } = response;
+        this.page = 1;
+        this.totalReviews = total;
+        this.allReviews = allReviews;
+        this.canLoadMore = (allReviews || []).length === pageLimited;
+      });
     }
-    else {
-      const needFilterByAll = this.ratings.concat([rating]).filter(r => r !== scoreValuesMapping.all).length === 5;
-      this.ratings = needFilterByAll
-        ? [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5']
-        : this.ratings.concat([rating]);
-    }
-    this.pageOffset = pageLimited;
-    this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
-  }
-  ;
-  renderReviewsFilters() {
-    const reviewsByScore = groupBy_1(this.salonReviews, review => review.point);
-    const isAllChecked = this.ratings.indexOf(scoreValuesMapping.all) > -1;
-    const inputCheckedStyle = lib.css({
-      outline: 'none !important',
-      backgroundColor: `${this.primaryColor} !important`,
-      borderColor: `${this.primaryColor} !important`,
-    });
-    return (h("div", { class: "salon-reviews--filters-by-ratings" }, h("div", { style: {
-        fontWeight: 'bold',
-        marginBottom: '12px',
-        marginTop: '32px',
-      } }, "Filter by ratings"), h("div", { class: "salon-reviews--filters-by-ratings--options" }, h("div", { class: "checkbox--wrapper", style: { marginBottom: '12px' } }, h("div", { class: "checkbox--box" }, h("div", { class: "form-check" }, h("input", Object.assign({ type: "checkbox", class: "form-check-input", value: scoreValuesMapping.all, onChange: () => this.onChangeFilterRating(scoreValuesMapping.all), checked: isAllChecked }, isAllChecked ? inputCheckedStyle : {})), h("label", { class: "form-check-label" }, "All ratings")))), [5, 4, 3, 2, 1].filter(score => reviewsByScore[score]).map(score => {
-      const scoreReviewCount = reviewsByScore[score].length;
-      const isChecked = this.ratings.indexOf(scoreValuesMapping.all) > -1 || this.ratings.indexOf(`star${score}`) > -1;
-      return (h("div", { style: {
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginBottom: '12px',
-        } }, h("div", { class: "form-check" }, h("input", Object.assign({ value: "", type: "checkbox", class: "form-check-input", onChange: () => this.onChangeFilterRating(`star${score}`), checked: isChecked }, isChecked ? inputCheckedStyle : {})), h("label", { class: "form-check-label" }, [1, 2, 3, 4, 5].map(point => {
-        const isHightlight = point <= score;
-        return (h("i", { class: isHightlight ? 'ri-heart-fill' : 'ri-heart-line', style: { fontSize: '16px', marginRight: '4px' } }));
-      }))), h("div", { style: { color: Colors.Gray01 } }, scoreReviewCount)));
-    }))));
+    catch (e) { }
+    this.isSorting = false;
   }
   render() {
-    const { rating } = this.salonInfo || {};
-    return (h("div", { class: "salon-reviews", style: { display: 'flex', flexDirection: 'row' } }, h("div", { class: "salon-reviews--filters", style: { width: '264px' } }, h("div", { class: "salon-reviews--score" }, h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
-      return (h("i", { class: score <= rating ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= rating ? { color: this.primaryColor } : { color: Colors.Gray03 }) }));
+    const ratingTexts = ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
+    return (h("div", { class: "view view--salon-reviews" }, h("div", { class: "salon-reviews--filters" }, h("div", { class: "salon-reviews--score" }, h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
+      return (h("i", { class: score <= this.stats.reviewPoint ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= this.stats.reviewPoint ? { color: this.primaryColor } : { color: Colors.Gray04 }) }));
     })), h("div", { class: "salon-review--rating--date", style: {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
         marginTop: '-8px',
-      } }, h("span", { style: { fontSize: '24px' } }, rating, "/5"), " ", h("span", { style: { color: Colors.Gray02, marginLeft: '8px' } }, "(", this.totalReviews, " reviews)"))), h("div", { class: "salon-reviews--filters--options" }, this.renderReviewsFilters())), h("div", { class: "salon-reviews--list", style: {
-        flexGrow: '1',
-        flexShrink: '1',
-        paddingLeft: '64px',
-      } }, this.renderReviewsList())));
+      } }, h("span", { style: { fontSize: '24px' } }, this.stats.reviewPoint, "/5"), " ", h("span", { style: { color: Colors.Gray04, marginLeft: '8px' } }, "(", this.stats.totalReviews, " reviews)"))), h("div", { class: "salon-reviews--filters--options", style: { marginTop: '24px' } }, h("div", { style: {
+        background: Colors.Gray01,
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: '4px',
+        padding: '16px',
+      } }, h("div", null, h("input", { type: "checkbox", checked: this.filterBy.length === 0, onChange: () => {
+        this.filterBy = [];
+        this.onChangeFilter([]);
+      } }), " ", h("span", { style: { marginLeft: '4px' } }, "All reviews")), [5, 4, 3, 2, 1].map(score => {
+      const isChecked = this.filterBy.indexOf(score) > -1;
+      return (h("div", { key: `salon-reviews--filters-score--${score}`, style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } }, h("input", { type: "checkbox", checked: isChecked, onChange: () => {
+          const newFilter = isChecked ? this.filterBy.filter(fs => fs !== score) : this.filterBy.concat([score]);
+          this.filterBy = newFilter;
+          this.onChangeFilter(newFilter);
+        } }), " ", h("span", { style: { display: 'flex', alignItems: 'center', marginLeft: '4px' } }, score, " ", h("i", { class: "ri-heart-line", style: {
+          fontSize: '16px',
+          marginLeft: '4px',
+          marginRight: '4px',
+          lineHeight: '1',
+        } }), " ", h("span", { style: { color: Colors.Gray04, fontSize: '12px' } }, "(", this.stats[String(score)] || 0, ")"))));
+    })))), h("div", { class: "salon-reviews--list-header", style: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: '24px',
+      } }, h("div", { class: "view--salon-reviews--counter" }, this.totalReviews, " ", this.totalReviews === 1 ? `review` : `reviews`), h("div", { style: { display: 'flex', alignItems: 'center' } }, h("label", { style: { marginRight: '8px', color: Colors.Gray04 } }, "Sort by"), h("select", { class: "search-filter--select", "place-holder": "Most popular", disabled: this.isLoading, onChange: (evt) => {
+        this.sortBy = evt.target.value;
+        this.onChangeSorting(evt.target.value);
+      }, style: {
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: Colors.Gray01,
+        borderColor: Colors.Gray01,
+        borderRadius: '4px',
+        height: '40px',
+        width: '130px',
+      } }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy, key: `search-filter--select-option--${sortOption.value}` }, sortOption.label)))))), h("div", { class: "salon-reviews--list-content", style: { marginTop: '24px' } }, this.allReviews.map((review, idx) => {
+      const user = review.user || {};
+      return (h("div", { class: "salon-review", key: `salon-review--${idx}`, style: {
+          borderBottom: `1px solid ${Colors.Gray02}`,
+          marginBottom: '24px',
+          paddingBottom: '24px',
+        } }, h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: h("span", { style: { fontSize: '18px', fontWeight: '600', color: Colors.TextColor } }, (user.firstName || user.lastName) ? `${user.firstName || ''} ${user.lastName || ''}` : ''), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (h("i", { key: `salon-review--rating--item--score--${score}`, class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
+          color: score <= review.point ? this.primaryColor : Colors.Gray04,
+          fontSize: '16px',
+          marginRight: '4px',
+        } }))), review.createdDate && (h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, dayjs_min(review.createdDate).format(shortDateYearFormat)))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: '600' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }), h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))), review.photos.length > 0 && (h("div", { style: {
+          display: 'flex',
+          flexDirection: 'row',
+          overflowX: 'auto',
+        } }, review.photos.map(fileObj => (h("div", { key: `upload-file--${fileObj.id}`, class: "review--photo", style: {
+          position: 'relative',
+          cursor: 'pointer',
+          marginTop: '16px',
+          marginRight: '12px',
+        } }, h("img", { width: 72, src: fileObj.imageUrlThumb, style: { display: 'block' } }))))))));
+    })), h("div", { class: "salon-reviews--list-footer", style: {
+        textAlign: 'center',
+        paddingTop: '16px',
+        paddingBottom: '16px',
+      } }, h("button", { class: "btn btn-light btn-lg", style: {
+        background: Colors.White,
+        border: `1px solid ${Colors.Gray02}`,
+        borderRadius: '4px',
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      }, onClick: () => this.onLoadMore() }, "Load more"))));
   }
   static get style() { return indexCss$5; }
 };
 
-const indexCss$4 = "@media (min-width: 768px){.salon-schedules--dates{overflow:hidden;margin-left:-32px}.salon-schedules--dates .salon-schedules--day{float:left;display:flex;flex-direction:row;min-width:240px;padding-left:32px}}";
+const indexCss$4 = "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$1 = class extends HTMLElement {
   constructor() {
@@ -11911,8 +11718,46 @@ let SalonSchedules$1 = class extends HTMLElement {
     return `${businessHour.openTime} - ${businessHour.closeTime}`;
   }
   render() {
-    const businessHours = (this.salonInfoState && this.salonInfoState.businessHours) || [];
-    return (h("div", { class: "view view--salon-schedules" }, h("div", { class: "view-content" }, businessHours.length > 0 && (h("div", { class: "salon-schedules" }, 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])))))))));
+    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])))))))));
   }
   static get style() { return indexCss$4; }
 };
@@ -11929,23 +11774,54 @@ let SalonServices$1 = class extends HTMLElement {
     this.fetchData();
   }
   async fetchData() {
+    this.isLoading = true;
     try {
       this.salonServices = await HttpService$1().fetchSalonServices(this.salonId);
     }
-    catch (e) { }
+    catch (e) {
+      this.salonServices = [];
+    }
+    this.isLoading = false;
   }
   render() {
-    return (h("div", { class: "salon-services--container" }, h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray05}` } }, 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 => {
+    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.Gray05}` } }, 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.Gray06}` }, 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 ? {
+      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.Gray06}`,
+          borderTop: `1px solid ${Colors.Gray01}`,
         } : {}) }, service.name), (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
           display: 'block',
           marginTop: '4px',
           fontSize: '90%',
-          color: Colors.Gray03,
+          color: Colors.Gray05,
         } }, [
         !service.hideDuration ? `${service.duration} mins` : '',
         !service.hidePrice ? `$${service.price}` : '',
@@ -11955,74 +11831,81 @@ let SalonServices$1 = class extends HTMLElement {
   static get style() { return indexCss$3; }
 };
 
-const indexCss$2 = ".salon-styles--item-background{-moz-filter:blur(32px);-webkit-filter:blur(32px);filter:blur(32px)}.salon-styles--item .salon-styles--item-background{z-index:1}.salon-styles--item .salon-styles--item-image{position:relative;z-index:2}.salon-styles--item .carousel-caption{padding-bottom:0;z-index:2}.salon-styles--slides .carousel-control-prev{z-index:2}";
+const indexCss$2 = ".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}}";
 
-let SalonStyles$1 = class extends HTMLElement {
+const pageLimit = 20;
+let SalonStylists$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.page = 1;
   }
-  componentDidLoad() {
+  componentWillLoad() {
     this.fetchData();
   }
   async fetchData() {
+    this.isLoading = true;
     try {
-      const promises = [
-        HttpService$1().fetchSalonPhotos(this.salonId).then(salonStyles => this.firstPageStyles = salonStyles),
-        HttpService$1().fetchAllSalonPhotos(this.salonId, { page: 2 }).then(nestPageStyles => this.nestPageStyles = nestPageStyles),
-      ];
-      return Promise.all(promises);
+      const { total, data } = await HttpService$1().fetchSalonStylists(this.salonId, { page: 1, limit: pageLimit });
+      this.totalStylists = total;
+      this.salonStylists = data;
+      this.canLoadMore = data.length === pageLimit;
     }
-    catch (e) { }
-  }
-  render() {
-    return (h("div", { class: "view view--salon-styles" }, h("div", { class: "view-content" }, h("div", { class: "salon-styles--slides" }, h("div", { id: "salon-styles-carousel", class: "carousel slide", "data-bs-ride": "carousel" }, h("div", { class: "carousel-inner" }, (this.firstPageStyles || []).concat(this.nestPageStyles || []).map((photo, index) => {
-      const { caption, description, 
-      // mediaType,
-      fullImageUrl, fullImageUrlThumb, fullImageUrlMedium, imgWidth, imgHeight, } = photo;
-      const isLandscape = imgWidth >= imgHeight;
-      return (h("div", { class: `carousel-item ${index === 0 ? 'active' : ''}` }, h("div", { class: "salon-styles--item", style: {
-          flexDirection: isLandscape ? 'column' : 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-          overflow: 'hidden',
-          position: 'relative',
-          display: 'flex',
-          height: '380px',
-          borderRadius: '8px',
-        } }, h("div", { class: "salon-styles--item-background", style: Object.assign(Object.assign({}, fullImageUrlThumb ? { backgroundImage: `url(${fullImageUrlThumb})` } : {}), { backgroundColor: Colors.Gray06, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', position: 'absolute', bottom: '0px', right: '0px', left: '0px', top: '0px' }) }), h("img", { alt: caption, class: "salon-styles--item-image", src: fullImageUrlMedium || fullImageUrl, style: Object.assign({ display: 'inline-block' }, isLandscape ? { width: '100%' } : { height: '100%' }) }), h("div", { class: "carousel-caption d-none d-md-block" }, caption && h("h5", null, caption), description && h("p", null, description)))));
-    })), h("button", { type: "button", "data-bs-slide": "prev", class: "carousel-control-prev", "data-bs-target": "#salon-styles-carousel" }, h("span", { class: "carousel-control-prev-icon", "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, "Previous")), h("button", { type: "button", "data-bs-slide": "next", class: "carousel-control-next", "data-bs-target": "#salon-styles-carousel" }, h("span", { class: "carousel-control-next-icon", "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, "Next")))))));
-  }
-  static get style() { return indexCss$2; }
-};
-
-const indexCss$1 = ".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}}";
-
-let SalonStylists$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  componentWillLoad() {
-    this.fetchData();
+    catch (e) {
+      this.totalStylists = 0;
+      this.salonStylists = [];
+      this.canLoadMore = false;
+    }
+    this.isLoading = false;
   }
-  async fetchData() {
+  async onLoadMore() {
+    this.isLoadingMore = true;
     try {
-      this.salonStylists = await HttpService$1().fetchSalonStylists(this.salonId);
+      const { data } = await HttpService$1().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() {
-    return (h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
-        border: `1px solid ${Colors.Gray05}`,
-        borderRadius: '8px',
+    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.Gray06,
+        backgroundColor: Colors.Gray01,
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center top',
         backgroundSize: 'cover',
+        border: `1px solid ${Colors.Gray01}`,
+        borderRadius: '8px',
         position: 'relative',
         display: 'flex',
         width: '100%',
@@ -12033,10 +11916,321 @@ let SalonStylists$1 = class extends HTMLElement {
         fontWeight: 'bold',
         textTransform: 'uppercase',
       } }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), h("div", { class: "card-body" }, h("div", { style: {
-        fontSize: '16px',
-        fontWeight: 'bold',
+        fontSize: '18px',
+        fontWeight: '600',
         textAlign: 'center',
-      } }, stylist.name), h("div", { style: { marginTop: '4px' } }, h("salon-ranking", { ranking: stylist.rating })))))))));
+      } }, 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")))));
+  }
+  static get style() { return indexCss$2; }
+};
+
+var relativeTime = createCommonjsModule(function (module, exports) {
+!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+});
+
+const indexCss$1 = ".salon-modal.salon-modal--lookbook-detail .salon-modal--close{display:none !important}.salon-modal.salon-modal--lookbook-detail .salon-modal--content{background-color:#fff;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1000;overflow-y:auto}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:240px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnails{text-align:center}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{display:inline-block;margin-top:12px;margin-right:12px;height:40px;width:60px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--button{border:none;position:absolute;top:50%;z-index:20;height:40px;width:40px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--prev{left:24px}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--next{right:24px}@media (min-width: 768px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:360px !important}}@media (min-width: 992px){.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image{height:480px !important}.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail{height:56px;width:72px}}";
+
+dayjs_min.extend(relativeTime);
+let StyleDetail$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.isModalOpen = true;
+    this.currentMediaIdx = 0;
+    this.albumMedias = [];
+    this.similarStyles = [];
+    this.totalComments = 0;
+    this.lookbookComments = [];
+  }
+  componentWillLoad() {
+    this.injectSDK();
+    if (!!this.salonLookbook) {
+      this.lookbookInfo = JSON.parse(this.salonLookbook);
+      this.fetchData();
+    }
+  }
+  componentDidRender() {
+    this.setupGridLayout();
+  }
+  injectSDK() {
+    return new Promise((resolve) => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = 'https://cdn.jsdelivr.net/npm/macy@2';
+      document.body.appendChild(script);
+      return resolve(true);
+    });
+  }
+  setupGridLayout() {
+    if (!this.isLayoutSetup && this.similarStyles.length > 0 && document.querySelector('#similar-styles--grid')) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.innerHTML = `
+        var masonry = new Macy({
+          container: '#similar-styles--grid',
+          useContainerForBreakpoints: true,
+          margin: 16,
+          columns: 2,
+        });
+      `;
+      document.body.appendChild(script);
+      this.isLayoutSetup = true;
+    }
+  }
+  fetchData() {
+    try {
+      const promises = [
+        HttpService$1().fetchStyleDetail(this.lookbookInfo.id).then(response => {
+          const { styleInfo, similarStyles } = response;
+          this.similarStyles = similarStyles;
+          if (styleInfo) {
+            this.lookbookInfo = styleInfo;
+            this.albumMedias = styleInfo.albumMedias || [];
+            this.currentMedia = (styleInfo.albumMedias || [])[0];
+          }
+        }),
+        HttpService$1().fetchStyleComments(this.lookbookInfo.id).then(response => {
+          this.totalComments = response.total;
+          this.lookbookComments = response.data;
+        }),
+      ];
+      return Promise.all(promises);
+    }
+    catch (e) { }
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('style-detail');
+    el.remove();
+  }
+  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);
+  }
+  onClickPrev() {
+    if (this.currentMediaIdx === 0) {
+      this.currentMediaIdx = this.albumMedias.length - 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+    else {
+      this.currentMediaIdx = this.currentMediaIdx - 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+  }
+  onClickNext() {
+    if (this.currentMediaIdx === this.albumMedias.length - 1) {
+      this.currentMediaIdx = 0;
+      this.currentMedia = this.albumMedias[0];
+    }
+    else {
+      this.currentMediaIdx = this.currentMediaIdx + 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+  }
+  render() {
+    const { createdDate, totalView, totalLike, totalBooking, album, salon, stylist, } = this.lookbookInfo;
+    if (this.isModalOpen) {
+      const { caption, description, mediaUrl } = this.currentMedia || {};
+      const isVideo = isVideoMedia((this.currentMedia || {}));
+      return (h("div", { class: "salon-modal salon-modal--lookbook-detail" }, h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("div", { class: "style-detail" }, h("div", { class: "style-detail--header" }, h("div", { style: {
+          position: 'relative',
+          overflow: 'hidden',
+        } }, h("div", { style: Object.assign({ backgroundColor: Colors.Gray01, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0', filter: 'blur(30px)', position: 'absolute', inset: '0', zIndex: '1' }, this.currentMedia && !isVideoMedia(this.currentMedia) ? { backgroundImage: `url("${this.currentMedia.imageThumb}")` } : {}) }), h("div", { style: {
+          zIndex: '2',
+          position: 'relative',
+          width: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.25)',
+          padding: '12px 16px',
+          overflow: 'hidden',
+        } }, h("span", { style: {
+          color: Colors.White,
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '32px',
+        } }, h("span", null, this.currentMediaIdx + 1, " / ", this.albumMedias.length)), h("div", { style: {
+          display: 'flex',
+          alignItems: 'center',
+          position: 'absolute',
+          right: '16px',
+          top: '50%',
+          transform: 'translate(0, -50%)',
+        } }, h("button", { type: "text", class: "btn btn-light", style: {
+          backgroundColor: Colors.White,
+          borderColor: Colors.White,
+          border: 'none',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '32px',
+          width: '32px',
+          marginLeft: '12px',
+        }, onClick: () => this.closeModal() }, h("i", { class: "ri-close-fill", style: { fontSize: '16px', lineHeight: '1' } })))), h("div", { style: { position: 'relative', zIndex: "3" } }, h("div", { class: "style-detail--slides", style: {
+          marginTop: '16px',
+          marginBottom: '12px',
+        } }, h("div", { class: "style-detail--slides--image", style: {
+          width: '100%',
+          position: 'relative',
+          height: '360px',
+        } }, isVideo && (h("video", { muted: true, controls: true, width: "100%", height: "100%" }, h("source", { src: mediaUrl, type: "video/mp4" }))), !isVideo && (h("div", { style: {
+          position: 'absolute',
+          inset: '0',
+          zIndex: '2',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        } }, h("img", { src: mediaUrl, alt: caption, style: {
+          objectFit: 'contain',
+          maxHeight: '100%',
+          maxWidth: '100%',
+        } })))), h("div", { class: "style-detail--slides--thumbnails", style: {
+          width: '100%',
+          position: 'relative',
+        } }, this.albumMedias.map((media, idx) => {
+        const isStyleVideo = isVideoMedia(media);
+        return (h("div", { class: "style-detail--slides--thumbnail", style: Object.assign(Object.assign({ backgroundColor: Colors.Gray01, borderRadius: '4px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, this.currentMediaIdx !== idx ? { opacity: '0.75' } : {}), !isStyleVideo ? {
+            backgroundImage: `url("${media.imageThumb || media.imageThumbMedium}")`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center center',
+            backgroundSize: 'cover',
+          } : {}), onClick: () => {
+            this.currentMedia = media;
+            this.currentMediaIdx = idx;
+          } }, isStyleVideo && (h("div", null, h("video", { muted: true, width: "100%", height: "100%", poster: media.imageThumb }, h("source", { src: media.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%)',
+          } })))));
+      }))), this.albumMedias.length > 1 && (h("div", null, h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--prev", onClick: () => this.onClickPrev() }, h("i", { class: "ri-arrow-left-line", style: { color: Colors.TextColor, fontSize: '18px' } })), h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--next", onClick: () => this.onClickNext() }, h("i", { class: "ri-arrow-right-line", style: { color: Colors.TextColor, fontSize: '18px' } }))))))), h("div", { class: "style-detail--content" }, h("div", { class: "container" }, h("div", { style: {
+          paddingBottom: '24px',
+          paddingTop: '24px',
+        } }, h("div", { class: "row" }, h("div", { class: this.similarStyles.length > 0 ? 'col-md-8' : 'col-md-12', style: { marginBottom: '24px' } }, h("div", { class: "row" }, salon && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, h("div", { style: {
+          backgroundColor: Colors.Red01,
+          borderRadius: '4px',
+          padding: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        } }, h("div", { style: { paddingLeft: '8px' } }, h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "At salon"), h("div", { style: {
+          color: Colors.Secondary,
+          fontSize: '20px',
+          lineHeight: '24px',
+        } }, salon.businessName)), h("div", { style: {
+          backgroundImage: `url("${getSalonImage(salon)}")`,
+          backgroundColor: Colors.Red02,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '0 0',
+          borderRadius: '4px',
+          height: '48px',
+          width: '48px',
+        } })))), stylist && stylist.id && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, h("div", { style: {
+          backgroundColor: Colors.Yellow01,
+          borderRadius: '4px',
+          padding: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        } }, h("div", { style: { paddingLeft: '8px' } }, h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "By stylist"), h("div", { style: {
+          color: Colors.Secondary,
+          fontSize: '20px',
+          lineHeight: '24px',
+        } }, stylist.fullName)), h("div", { style: {
+          backgroundImage: `url("${stylist.avatar}")`,
+          backgroundColor: Colors.Yellow02,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '0 0',
+          borderRadius: '4px',
+          height: '48px',
+          width: '48px',
+        } }))))), h("div", { style: {
+          borderBottom: `1px solid ${Colors.Gray02}`,
+          borderTop: `1px solid ${Colors.Gray02}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingBottom: '16px',
+          paddingTop: '16px',
+        } }, h("div", { style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          flexShrink: '1',
+          flexGrow: '1',
+        } }, h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalLike), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "faves")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalBooking), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "booked")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalView), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "views")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, this.totalComments), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "comments")))), (caption || description) && (h("div", { style: { paddingTop: '24px' } }, h("div", { style: { color: Colors.Gray04, fontSize: '14px' } }, createdDate && dayjs_min(createdDate).format(shortDateYearFormat)), h("div", { style: { fontSize: '24px' } }, caption), h("div", { style: {
+          fontSize: '16px',
+          paddingTop: caption ? '16px' : '0',
+        } }, description))), album && album.tags.length > 0 && (h("div", { style: {
+          paddingTop: '24px',
+          marginBottom: '-12px',
+        } }, album.tags.map((tag, idx) => (h("button", { class: "btn btn-light", key: `album--tag-${idx}`, style: {
+          backgroundColor: Colors.Gray01,
+          borderColor: Colors.Gray01,
+          borderRadius: '4px',
+          marginRight: '12px',
+          marginBottom: '12px',
+        } }, tag))))), h("div", { style: { marginTop: '32px' } }, this.lookbookComments && this.lookbookComments.length > 0 && (h("div", null, h("div", { style: { fontWeight: '600', marginBottom: '8px' } }, this.totalComments, " ", this.totalComments === 1 ? 'comment' : 'comments'), h("div", { class: "view view--style-comments", style: {
+          borderTop: `1px solid ${Colors.Gray02}`,
+          paddingTop: '24px',
+          paddingBottom: '24px',
+        } }, this.lookbookComments.map((comment, idx) => {
+        const { user, title, description, createdDate } = comment;
+        return (h("div", { key: `style-info--comment-${idx}`, style: idx > 0 ? {
+            borderTop: `1px solid ${Colors.Gray02}`,
+            marginTop: '24px',
+            paddingTop: '24px',
+          } : {} }, h("div", { style: { overflow: 'hidden' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: h("div", null, h("div", { style: { color: Colors.Gray04, lineHeight: '1', fontSize: '12px', fontWeight: '400' } }, dayjs_min(createdDate).fromNow()), h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName)), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), h("div", { style: {
+            color: Colors.Black,
+            fontSize: '16px',
+            paddingTop: '16px',
+          } }, title), description && (h("div", { style: {
+            color: Colors.Gray05,
+            paddingTop: '8px',
+          } }, description))));
+      })))))), h("div", { class: "col-md-4", style: { marginBottom: '24px' } }, h("div", { class: "block block--similar-styles" }, this.similarStyles.length > 0 && (h("div", { class: "block--content" }, h("h3", { style: {
+          lineHeight: '1.2',
+          fontSize: '24px',
+          color: Colors.Secondary,
+        } }, "More like this"), h("div", { style: { marginTop: '16px' } }, h("div", { class: "similar-styles--grid", id: "similar-styles--grid" }, this.similarStyles.slice(0, 6).map(style => {
+        const { caption, imageThumbMedium, owner } = style;
+        return (h("div", { class: "similar-styles--grid-item", onClick: () => {
+            this.closeModal();
+            this.onClickLookbook(style);
+          } }, h("div", { class: "card", style: {
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+          } }, h("div", { class: "similar-styles--grid-item--image", style: {
+            borderRadius: '8px',
+            overflow: 'hidden',
+            minHeight: '80px',
+            background: Colors.Gray01,
+          } }, h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (h("div", { class: "card-body", style: { paddingLeft: '0' } }, h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
+      }))))))))))))))));
+    }
+    return null;
   }
   static get style() { return indexCss$1; }
 };
@@ -12052,7 +12246,7 @@ let UserAvatar$1 = class extends HTMLElement {
   render() {
     return (h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (h("div", { style: {
         backgroundImage: `url("${this.avatar}")`,
-        backgroundColor: Colors.Gray06,
+        backgroundColor: Colors.Gray01,
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
         borderRadius: '50%',
@@ -12060,7 +12254,7 @@ let UserAvatar$1 = class extends HTMLElement {
         width: `${this.size}px`,
         minWidth: `${this.size}px`,
       } })), !this.avatar && (h("div", { style: {
-        backgroundColor: Colors.Gray06,
+        backgroundColor: Colors.Gray01,
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
         borderRadius: '50%',
@@ -12075,23 +12269,22 @@ let UserAvatar$1 = class extends HTMLElement {
   static get style() { return indexCss; }
 };
 
-const GoogleMap = /*@__PURE__*/proxyCustomElement(GoogleMap$1, [0,"google-map",{"apiKey":[1,"api-key"],"lat":[2],"lng":[2]}]);
+const GoogleMap = /*@__PURE__*/proxyCustomElement(GoogleMap$1, [0,"google-map",{"locationName":[1,"location-name"],"locationAddress":[1,"location-address"]}]);
 const SalonBooking = /*@__PURE__*/proxyCustomElement(SalonBooking$1, [0,"salon-booking",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]);
-const SalonBookingModal = /*@__PURE__*/proxyCustomElement(SalonBookingModal$2, [0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]);
-const SalonContact = /*@__PURE__*/proxyCustomElement(SalonContact$1, [0,"salon-contact",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"salonInfoState":[32]}]);
+const SalonBookingModal = /*@__PURE__*/proxyCustomElement(SalonBookingModal$1, [0,"salon-booking-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"redirectUrl":[1,"redirect-url"],"isModalOpen":[32]}]);
 const SalonGiftCard = /*@__PURE__*/proxyCustomElement(SalonGiftCard$1, [0,"salon-gift-card",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"buttonText":[1,"button-text"],"primaryColor":[1,"primary-color"]}]);
-const SalonGiftCardModal = /*@__PURE__*/proxyCustomElement(SalonGiftCardModal$1, [0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"isModalOpen":[32]}]);
-const SalonInfo = /*@__PURE__*/proxyCustomElement(SalonInfo$1, [0,"salon-info",{"salonId":[2,"salon-id"],"backgroundColor":[1,"background-color"],"salonInfo":[32]}]);
-const SalonLatestReviews = /*@__PURE__*/proxyCustomElement(SalonLatestReviews$1, [0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"salonReviews":[32]}]);
-const SalonLocations = /*@__PURE__*/proxyCustomElement(SalonLocations$1, [0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"salonInfoState":[32]}]);
+const SalonGiftCardModal = /*@__PURE__*/proxyCustomElement(SalonGiftCardModal$1, [0,"salon-gift-card-modal",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"isModalOpen":[32]}]);
+const SalonInfo = /*@__PURE__*/proxyCustomElement(SalonInfo$1, [0,"salon-info",{"salonId":[2,"salon-id"],"salonInfo":[32]}]);
+const SalonLatestReviews = /*@__PURE__*/proxyCustomElement(SalonLatestReviews$1, [0,"salon-latest-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonReviews":[32],"isLoading":[32]}]);
+const SalonLatestStyles = /*@__PURE__*/proxyCustomElement(SalonLatestStyles$1, [0,"salon-latest-styles",{"salonId":[2,"salon-id"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"isLoadingState":[32],"latestStyles":[32]}]);
+const SalonLocations = /*@__PURE__*/proxyCustomElement(SalonLocations$1, [0,"salon-locations",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]);
 const SalonLookbook = /*@__PURE__*/proxyCustomElement(SalonLookbook$1, [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]}]);
-const SalonLookbookModal = /*@__PURE__*/proxyCustomElement(SalonBookingModal$1, [0,"salon-lookbook-modal",{"salonId":[2,"salon-id"],"salonLookbook":[1,"salon-lookbook"],"lookbookInfo":[32],"lookbookComments":[32],"isModalOpen":[32]}]);
 const SalonRanking = /*@__PURE__*/proxyCustomElement(SalonRanking$1, [0,"salon-ranking",{"ranking":[2],"height":[2],"width":[2]}]);
-const SalonReviews = /*@__PURE__*/proxyCustomElement(SalonReviews$1, [0,"salon-reviews",{"salonId":[2,"salon-id"],"primaryColor":[1,"primary-color"],"salonInfo":[32],"totalReviews":[32],"salonReviews":[32],"canLoadMore":[32],"isLoadingMore":[32],"pageOffset":[32],"ratings":[32],"sorting":[32]}]);
-const SalonSchedules = /*@__PURE__*/proxyCustomElement(SalonSchedules$1, [0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"salonInfoState":[32]}]);
-const SalonServices = /*@__PURE__*/proxyCustomElement(SalonServices$1, [0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32]}]);
-const SalonStyles = /*@__PURE__*/proxyCustomElement(SalonStyles$1, [0,"salon-styles",{"salonId":[2,"salon-id"],"firstPageStyles":[32],"nestPageStyles":[32]}]);
-const SalonStylists = /*@__PURE__*/proxyCustomElement(SalonStylists$1, [0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32]}]);
+const SalonReviews = /*@__PURE__*/proxyCustomElement(SalonReviews$1, [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]}]);
+const SalonSchedules = /*@__PURE__*/proxyCustomElement(SalonSchedules$1, [0,"salon-schedules",{"salonId":[2,"salon-id"],"salonInfo":[1,"salon-info"],"isLoading":[4,"is-loading"],"withBorder":[4,"with-border"],"salonInfoState":[32]}]);
+const SalonServices = /*@__PURE__*/proxyCustomElement(SalonServices$1, [0,"salon-services",{"salonId":[2,"salon-id"],"buttonClass":[1,"button-class"],"salonServices":[32],"isLoading":[32]}]);
+const SalonStylists = /*@__PURE__*/proxyCustomElement(SalonStylists$1, [0,"salon-stylists",{"salonId":[2,"salon-id"],"salonStylists":[32],"totalStylists":[32],"page":[32],"isLoading":[32],"isLoadingMore":[32],"canLoadMore":[32]}]);
+const StyleDetail = /*@__PURE__*/proxyCustomElement(StyleDetail$1, [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]}]);
 const UserAvatar = /*@__PURE__*/proxyCustomElement(UserAvatar$1, [0,"user-avatar",{"size":[2],"name":[1],"nameStyle":[16],"shortName":[1,"short-name"],"avatar":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
@@ -12099,20 +12292,19 @@ const defineCustomElements = (opts) => {
       GoogleMap,
   SalonBooking,
   SalonBookingModal,
-  SalonContact,
   SalonGiftCard,
   SalonGiftCardModal,
   SalonInfo,
   SalonLatestReviews,
+  SalonLatestStyles,
   SalonLocations,
   SalonLookbook,
-  SalonLookbookModal,
   SalonRanking,
   SalonReviews,
   SalonSchedules,
   SalonServices,
-  SalonStyles,
   SalonStylists,
+  StyleDetail,
   UserAvatar
     ].forEach(cmp => {
       if (!customElements.get(cmp.is)) {
@@ -12122,4 +12314,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { GoogleMap, SalonBooking, SalonBookingModal, SalonContact, SalonGiftCard, SalonGiftCardModal, SalonInfo, SalonLatestReviews, SalonLocations, SalonLookbook, SalonLookbookModal, SalonRanking, SalonReviews, SalonSchedules, SalonServices, SalonStyles, SalonStylists, UserAvatar, defineCustomElements };
+export { GoogleMap, SalonBooking, SalonBookingModal, SalonGiftCard, SalonGiftCardModal, SalonInfo, SalonLatestReviews, SalonLatestStyles, SalonLocations, SalonLookbook, SalonRanking, SalonReviews, SalonSchedules, SalonServices, SalonStylists, StyleDetail, UserAvatar, defineCustomElements };