favesalon-embed 0.0.2 → 0.1.0

package/dist/cjs/style-detail.cjs.entry.js

@@ -0,0 +1,310 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6bea8f5.js');
+const services = require('./services-eee8f251.js');
+const _commonjsHelpers = require('./_commonjsHelpers-5cfcba41.js');
+const colors = require('./colors-38421769.js');
+
+var relativeTime = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+!function(r,e){module.exports=e();}(_commonjsHelpers.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 = ".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}}";
+
+services.dayjs_min.extend(relativeTime);
+let StyleDetail = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 = [
+        services.HttpService().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];
+          }
+        }),
+        services.HttpService().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 = services.isVideoMedia((this.currentMedia || {}));
+      return (index.h("div", { class: "salon-modal salon-modal--lookbook-detail" }, index.h("div", { class: "salon-modal--inner" }, index.h("div", { class: "salon-modal--content" }, index.h("div", { class: "style-detail" }, index.h("div", { class: "style-detail--header" }, index.h("div", { style: {
+          position: 'relative',
+          overflow: 'hidden',
+        } }, index.h("div", { style: Object.assign({ backgroundColor: colors.Colors.Gray01, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0', filter: 'blur(30px)', position: 'absolute', inset: '0', zIndex: '1' }, this.currentMedia && !services.isVideoMedia(this.currentMedia) ? { backgroundImage: `url("${this.currentMedia.imageThumb}")` } : {}) }), index.h("div", { style: {
+          zIndex: '2',
+          position: 'relative',
+          width: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.25)',
+          padding: '12px 16px',
+          overflow: 'hidden',
+        } }, index.h("span", { style: {
+          color: colors.Colors.White,
+          border: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '32px',
+        } }, index.h("span", null, this.currentMediaIdx + 1, " / ", this.albumMedias.length)), index.h("div", { style: {
+          display: 'flex',
+          alignItems: 'center',
+          position: 'absolute',
+          right: '16px',
+          top: '50%',
+          transform: 'translate(0, -50%)',
+        } }, index.h("button", { type: "text", class: "btn btn-light", style: {
+          backgroundColor: colors.Colors.White,
+          borderColor: colors.Colors.White,
+          border: 'none',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '32px',
+          width: '32px',
+          marginLeft: '12px',
+        }, onClick: () => this.closeModal() }, index.h("i", { class: "ri-close-fill", style: { fontSize: '16px', lineHeight: '1' } })))), index.h("div", { style: { position: 'relative', zIndex: "3" } }, index.h("div", { class: "style-detail--slides", style: {
+          marginTop: '16px',
+          marginBottom: '12px',
+        } }, index.h("div", { class: "style-detail--slides--image", style: {
+          width: '100%',
+          position: 'relative',
+          height: '360px',
+        } }, isVideo && (index.h("video", { muted: true, controls: true, width: "100%", height: "100%" }, index.h("source", { src: mediaUrl, type: "video/mp4" }))), !isVideo && (index.h("div", { style: {
+          position: 'absolute',
+          inset: '0',
+          zIndex: '2',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        } }, index.h("img", { src: mediaUrl, alt: caption, style: {
+          objectFit: 'contain',
+          maxHeight: '100%',
+          maxWidth: '100%',
+        } })))), index.h("div", { class: "style-detail--slides--thumbnails", style: {
+          width: '100%',
+          position: 'relative',
+        } }, this.albumMedias.map((media, idx) => {
+        const isStyleVideo = services.isVideoMedia(media);
+        return (index.h("div", { class: "style-detail--slides--thumbnail", style: Object.assign(Object.assign({ backgroundColor: colors.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 && (index.h("div", null, index.h("video", { muted: true, width: "100%", height: "100%", poster: media.imageThumb }, index.h("source", { src: media.mediaUrl, type: "video/mp4" })), index.h("i", { class: "ri-play-circle-fill", style: {
+            fontSize: '48px',
+            color: colors.Colors.TextColor,
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+          } })))));
+      }))), this.albumMedias.length > 1 && (index.h("div", null, index.h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--prev", onClick: () => this.onClickPrev() }, index.h("i", { class: "ri-arrow-left-line", style: { color: colors.Colors.TextColor, fontSize: '18px' } })), index.h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--next", onClick: () => this.onClickNext() }, index.h("i", { class: "ri-arrow-right-line", style: { color: colors.Colors.TextColor, fontSize: '18px' } }))))))), index.h("div", { class: "style-detail--content" }, index.h("div", { class: "container" }, index.h("div", { style: {
+          paddingBottom: '24px',
+          paddingTop: '24px',
+        } }, index.h("div", { class: "row" }, index.h("div", { class: this.similarStyles.length > 0 ? 'col-md-8' : 'col-md-12', style: { marginBottom: '24px' } }, index.h("div", { class: "row" }, salon && (index.h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Red01,
+          borderRadius: '4px',
+          padding: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        } }, index.h("div", { style: { paddingLeft: '8px' } }, index.h("div", { style: { color: colors.Colors.Gray05, fontSize: '12px' } }, "At salon"), index.h("div", { style: {
+          color: colors.Colors.Secondary,
+          fontSize: '20px',
+          lineHeight: '24px',
+        } }, salon.businessName)), index.h("div", { style: {
+          backgroundImage: `url("${services.getSalonImage(salon)}")`,
+          backgroundColor: colors.Colors.Red02,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '0 0',
+          borderRadius: '4px',
+          height: '48px',
+          width: '48px',
+        } })))), stylist && stylist.id && (index.h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, index.h("div", { style: {
+          backgroundColor: colors.Colors.Yellow01,
+          borderRadius: '4px',
+          padding: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        } }, index.h("div", { style: { paddingLeft: '8px' } }, index.h("div", { style: { color: colors.Colors.Gray05, fontSize: '12px' } }, "By stylist"), index.h("div", { style: {
+          color: colors.Colors.Secondary,
+          fontSize: '20px',
+          lineHeight: '24px',
+        } }, stylist.fullName)), index.h("div", { style: {
+          backgroundImage: `url("${stylist.avatar}")`,
+          backgroundColor: colors.Colors.Yellow02,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '0 0',
+          borderRadius: '4px',
+          height: '48px',
+          width: '48px',
+        } }))))), index.h("div", { style: {
+          borderBottom: `1px solid ${colors.Colors.Gray02}`,
+          borderTop: `1px solid ${colors.Colors.Gray02}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingBottom: '16px',
+          paddingTop: '16px',
+        } }, index.h("div", { style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          flexShrink: '1',
+          flexGrow: '1',
+        } }, index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalLike), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "faves")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalBooking), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "booked")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalView), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "views")), index.h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, index.h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, this.totalComments), index.h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "comments")))), (caption || description) && (index.h("div", { style: { paddingTop: '24px' } }, index.h("div", { style: { color: colors.Colors.Gray04, fontSize: '14px' } }, createdDate && services.dayjs_min(createdDate).format(services.shortDateYearFormat)), index.h("div", { style: { fontSize: '24px' } }, caption), index.h("div", { style: {
+          fontSize: '16px',
+          paddingTop: caption ? '16px' : '0',
+        } }, description))), album && album.tags.length > 0 && (index.h("div", { style: {
+          paddingTop: '24px',
+          marginBottom: '-12px',
+        } }, album.tags.map((tag, idx) => (index.h("button", { class: "btn btn-light", key: `album--tag-${idx}`, style: {
+          backgroundColor: colors.Colors.Gray01,
+          borderColor: colors.Colors.Gray01,
+          borderRadius: '4px',
+          marginRight: '12px',
+          marginBottom: '12px',
+        } }, tag))))), index.h("div", { style: { marginTop: '32px' } }, this.lookbookComments && this.lookbookComments.length > 0 && (index.h("div", null, index.h("div", { style: { fontWeight: '600', marginBottom: '8px' } }, this.totalComments, " ", this.totalComments === 1 ? 'comment' : 'comments'), index.h("div", { class: "view view--style-comments", style: {
+          borderTop: `1px solid ${colors.Colors.Gray02}`,
+          paddingTop: '24px',
+          paddingBottom: '24px',
+        } }, this.lookbookComments.map((comment, idx) => {
+        const { user, title, description, createdDate } = comment;
+        return (index.h("div", { key: `style-info--comment-${idx}`, style: idx > 0 ? {
+            borderTop: `1px solid ${colors.Colors.Gray02}`,
+            marginTop: '24px',
+            paddingTop: '24px',
+          } : {} }, index.h("div", { style: { overflow: 'hidden' } }, index.h("user-avatar", { size: 48, avatar: user.avatar, name: index.h("div", null, index.h("div", { style: { color: colors.Colors.Gray04, lineHeight: '1', fontSize: '12px', fontWeight: '400' } }, services.dayjs_min(createdDate).fromNow()), index.h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName)), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), index.h("div", { style: {
+            color: colors.Colors.Black,
+            fontSize: '16px',
+            paddingTop: '16px',
+          } }, title), description && (index.h("div", { style: {
+            color: colors.Colors.Gray05,
+            paddingTop: '8px',
+          } }, description))));
+      })))))), index.h("div", { class: "col-md-4", style: { marginBottom: '24px' } }, index.h("div", { class: "block block--similar-styles" }, this.similarStyles.length > 0 && (index.h("div", { class: "block--content" }, index.h("h3", { style: {
+          lineHeight: '1.2',
+          fontSize: '24px',
+          color: colors.Colors.Secondary,
+        } }, "More like this"), index.h("div", { style: { marginTop: '16px' } }, index.h("div", { class: "similar-styles--grid", id: "similar-styles--grid" }, this.similarStyles.slice(0, 6).map(style => {
+        const { caption, imageThumbMedium, owner } = style;
+        return (index.h("div", { class: "similar-styles--grid-item", onClick: () => {
+            this.closeModal();
+            this.onClickLookbook(style);
+          } }, index.h("div", { class: "card", style: {
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+          } }, index.h("div", { class: "similar-styles--grid-item--image", style: {
+            borderRadius: '8px',
+            overflow: 'hidden',
+            minHeight: '80px',
+            background: colors.Colors.Gray01,
+          } }, index.h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (index.h("div", { class: "card-body", style: { paddingLeft: '0' } }, index.h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
+      }))))))))))))))));
+    }
+    return null;
+  }
+};
+StyleDetail.style = indexCss;
+
+exports.style_detail = StyleDetail;

package/{cjs → dist/cjs}/user-avatar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7d179a70.js');
-const colors = require('./colors-7f354880.js');
+const index = require('./index-e6bea8f5.js');
+const colors = require('./colors-38421769.js');
 
 const indexCss = "";
 
@@ -15,7 +15,7 @@ let UserAvatar = class {
   render() {
     return (index.h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (index.h("div", { style: {
         backgroundImage: `url("${this.avatar}")`,
-        backgroundColor: colors.Colors.Gray06,
+        backgroundColor: colors.Colors.Gray01,
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
         borderRadius: '50%',
@@ -23,7 +23,7 @@ let UserAvatar = class {
         width: `${this.size}px`,
         minWidth: `${this.size}px`,
       } })), !this.avatar && (index.h("div", { style: {
-        backgroundColor: colors.Colors.Gray06,
+        backgroundColor: colors.Colors.Gray01,
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
         borderRadius: '50%',

package/{collection → dist/collection}/collection-manifest.json

@@ -3,19 +3,19 @@
     "./components/google-map/index.js",
     "./components/salon-booking/index.js",
     "./components/salon-booking/salon-booking-modal.js",
-    "./components/salon-contact/index.js",
     "./components/salon-gift-card/index.js",
     "./components/salon-gift-card/salon-gift-card-modal.js",
     "./components/salon-info/index.js",
     "./components/salon-latest-reviews/index.js",
+    "./components/salon-latest-styles/index.js",
     "./components/salon-locations/index.js",
     "./components/salon-lookbook/index.js",
     "./components/salon-ranking/index.js",
     "./components/salon-reviews/index.js",
     "./components/salon-schedules/index.js",
     "./components/salon-services/index.js",
-    "./components/salon-styles/index.js",
     "./components/salon-stylists/index.js",
+    "./components/style-detail/index.js",
     "./components/user-avatar/index.js"
   ],
   "compiler": {

package/{collection → dist/collection}/components/google-map/index.css

@@ -1,4 +1,3 @@
-#google-map-container,
 google-map {
   display: block;
   width: 100%;

package/dist/collection/components/google-map/index.js

@@ -0,0 +1,86 @@
+import { Component, getAssetPath, h, Prop } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+export class GoogleMap {
+  render() {
+    const mapPlaceholder = getAssetPath('./assets/map--placeholder.jpeg');
+    return (h("div", { style: {
+        backgroundImage: `url("${mapPlaceholder}")`,
+        backgroundColor: Colors.Gray01,
+        backgroundPosition: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        borderRadius: '8px',
+        position: 'relative',
+        height: '296px',
+      } },
+      h("div", { style: {
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        } },
+        h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.google.com/maps/search/?api=1&query=${this.locationAddress}`, style: {
+            backgroundColor: Colors.Red01,
+            border: `1px solid ${Colors.Red02}`,
+            borderRadius: '4px',
+            color: Colors.TextColor,
+            padding: '12px',
+            display: 'flex',
+            flexWrap: 'wrap',
+            height: 'auto',
+            width: 'auto',
+            whiteSpace: 'normal',
+            textAlign: 'left',
+            maxWidth: '320px',
+            textDecoration: 'none',
+          } },
+          this.locationName && h("span", { style: { fontSize: '16px', marginBottom: '4px' } }, this.locationName),
+          this.locationAddress && h("span", { style: { fontSize: '12px' } }, this.locationAddress)),
+        h("div", { style: { marginTop: '8px', textAlign: 'center' } },
+          h("i", { class: "ri-map-pin-fill", style: { fontSize: '24px' } })))));
+  }
+  static get is() { return "google-map"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "locationName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "location-name",
+      "reflect": false
+    },
+    "locationAddress": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "location-address",
+      "reflect": false
+    }
+  }; }
+}

package/{collection → dist/collection}/components/salon-booking/index.css

@@ -1,39 +1,25 @@
 .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;
+  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: 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;
+    right: 20px;
+    top: 20px;
   }
 }

package/{collection → dist/collection}/components/salon-booking/index.js

@@ -1,9 +1,12 @@
 import { Component, Prop, h } from '@stencil/core';
+import Color from 'color';
+import { css } from 'glamor';
+import { Colors } from '../../constants/colors';
 export class SalonBooking {
   constructor() {
+    this.buttonClass = '';
     this.buttonText = 'Book now';
-    this.buttonClass = 'btn btn-primary';
-    this.primaryColor = '#d47b99';
+    this.primaryColor = Colors.Primary;
   }
   openModal() {
     const elBookingModal = document.createElement('div');
@@ -16,13 +19,28 @@ export class SalonBooking {
     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 = css({
+        backgroundColor: this.primaryColor,
+        borderColor: this.primaryColor,
+        color: primaryColor.isLight() ? Colors.Black01 : Colors.White,
+        ':hover': {
+          backgroundColor: primaryColorHover,
+          borderColor: primaryColorHover,
+        },
+      });
+    }
     return (h("div", { class: "salon-booking" },
       h("div", { class: "salon-booking--button" },
-        h("button", { type: "button", class: this.buttonClass, onClick: () => this.openModal() }, this.buttonText))));
+        h("button", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
   }
   static get is() { return "salon-booking"; }
   static get originalStyleUrls() { return {
-    "$": ["index.css"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -45,7 +63,7 @@ export class SalonBooking {
       "attribute": "salon-id",
       "reflect": false
     },
-    "buttonText": {
+    "buttonClass": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -59,11 +77,11 @@ export class SalonBooking {
         "tags": [],
         "text": ""
       },
-      "attribute": "button-text",
+      "attribute": "button-class",
       "reflect": false,
-      "defaultValue": "'Book now'"
+      "defaultValue": "''"
     },
-    "buttonClass": {
+    "buttonText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -77,9 +95,9 @@ export class SalonBooking {
         "tags": [],
         "text": ""
       },
-      "attribute": "button-class",
+      "attribute": "button-text",
       "reflect": false,
-      "defaultValue": "'btn btn-primary'"
+      "defaultValue": "'Book now'"
     },
     "primaryColor": {
       "type": "string",
@@ -97,7 +115,7 @@ export class SalonBooking {
       },
       "attribute": "primary-color",
       "reflect": false,
-      "defaultValue": "'#d47b99'"
+      "defaultValue": "Colors.Primary"
     }
   }; }
 }

package/{collection → dist/collection}/components/salon-booking/salon-booking-modal.js

@@ -1,22 +1,28 @@
 import { Component, Prop, h, State } from '@stencil/core';
+import { Colors } from '../../constants/colors';
 export class SalonBookingModal {
   constructor() {
-    this.primaryColor = '#d47b99';
+    this.primaryColor = Colors.Primary;
     this.redirectUrl = window.btoa(window.location.href);
     this.isModalOpen = true;
   }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('salon-booking-modal');
+    el.remove();
+  }
   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.isModalOpen = false }),
-      h("div", { class: "salon-modal--close", onClick: () => this.isModalOpen = false }),
+      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}` })))))));
+          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 is() { return "salon-booking-modal"; }
   static get originalStyleUrls() { return {
-    "$": ["index.css"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -55,7 +61,7 @@ export class SalonBookingModal {
       },
       "attribute": "primary-color",
       "reflect": false,
-      "defaultValue": "'#d47b99'"
+      "defaultValue": "Colors.Primary"
     },
     "redirectUrl": {
       "type": "string",