favesalon-embed 0.0.4 → 1.0.0

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

@@ -1,97 +0,0 @@
-import { Component, h, Prop } from '@stencil/core';
-export class GoogleMap {
-  constructor() {
-    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' });
-  }
-  static get is() { return "google-map"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "apiKey": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "api-key",
-      "reflect": false,
-      "defaultValue": "'AIzaSyBW4PbW9aM2FXZl83Gs7jeRmekEWSzC1sY'"
-    },
-    "lat": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "lat",
-      "reflect": false
-    },
-    "lng": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "lng",
-      "reflect": false
-    }
-  }; }
-}

package/collection/components/salon-booking/index.js

@@ -1,121 +0,0 @@
-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.primaryColor = Colors.Coral03;
-  }
-  openModal() {
-    const elBookingModal = document.createElement('div');
-    elBookingModal.innerHTML = `
-      <salon-booking-modal
-        salon-id=${this.salonId}
-        primary-color=${this.primaryColor}
-      ></salon-booking-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 = 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", Object.assign({ type: "button", class: buttonClass, onClick: () => this.openModal() }, buttonStyle), this.buttonText))));
-  }
-  static get is() { return "salon-booking"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    },
-    "buttonClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-class",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "'Book now'"
-    },
-    "primaryColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "primary-color",
-      "reflect": false,
-      "defaultValue": "Colors.Coral03"
-    }
-  }; }
-}

package/collection/components/salon-booking/salon-booking-modal.js

@@ -1,88 +0,0 @@
-import { Component, Prop, h, State } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class SalonBookingModal {
-  constructor() {
-    this.primaryColor = Colors.Coral03;
-    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.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}` })))))));
-  }
-  static get is() { return "salon-booking-modal"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    },
-    "primaryColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "primary-color",
-      "reflect": false,
-      "defaultValue": "Colors.Coral03"
-    },
-    "redirectUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "redirect-url",
-      "reflect": false,
-      "defaultValue": "window.btoa(window.location.href)"
-    }
-  }; }
-  static get states() { return {
-    "isModalOpen": {}
-  }; }
-}

package/collection/components/salon-contact/index.js

@@ -1,88 +0,0 @@
-import { Component, Prop, h, State } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-import { formatWebsiteUrl } from '../../utils/utils';
-import HttpService from '../../services/services';
-export class SalonContact {
-  componentWillLoad() {
-    if (this.salonInfo) {
-      this.salonInfoState = JSON.parse(this.salonInfo);
-    }
-    else {
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      HttpService().fetchSalonInfo(this.salonId)
-        .then(salonInfo => this.salonInfoState = salonInfo);
-    }
-    catch (e) { }
-  }
-  render() {
-    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 is() { return "salon-contact"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    },
-    "salonInfo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-info",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "salonInfoState": {}
-  }; }
-}

package/collection/components/salon-gift-card/index.css

@@ -1,25 +0,0 @@
-.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;
-}

package/collection/components/salon-gift-card/index.js

@@ -1,120 +0,0 @@
-import { Component, Prop, h } from '@stencil/core';
-import Color from 'color';
-import { css } from 'glamor';
-import { Colors } from '../../constants/colors';
-export class SalonGiftCard {
-  constructor() {
-    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 = 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 is() { return "salon-gift-card"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    },
-    "buttonClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-class",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false,
-      "defaultValue": "'Buy Gift card'"
-    },
-    "primaryColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "primary-color",
-      "reflect": false,
-      "defaultValue": "Colors.Coral03"
-    }
-  }; }
-}

package/collection/components/salon-gift-card/salon-gift-card-modal.js

@@ -1,48 +0,0 @@
-import { Component, Prop, h, State } from '@stencil/core';
-export class SalonGiftCardModal {
-  constructor() {
-    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 is() { return "salon-gift-card-modal"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isModalOpen": {}
-  }; }
-}

package/collection/components/salon-info/index.css

@@ -1,3 +0,0 @@
-.salon-info .view--salon-styles .view-content {
-  padding: 0;
-}

package/collection/components/salon-info/index.js

@@ -1,97 +0,0 @@
-import { Component, Prop, h, Method, State } from '@stencil/core';
-import HttpService from '../../services/services';
-import { Colors } from '../../constants/colors';
-export class SalonInfo {
-  constructor() {
-    this.backgroundColor = Colors.Gray06;
-  }
-  componentWillLoad() {
-    this.fetchData();
-  }
-  async fetchData() {
-    try {
-      this.salonInfo = await HttpService().fetchSalonInfo(this.salonId);
-    }
-    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..."));
-  }
-  static get is() { return "salon-info"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "salonId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-id",
-      "reflect": false
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "Colors.Gray06"
-    }
-  }; }
-  static get states() { return {
-    "salonInfo": {}
-  }; }
-  static get methods() { return {
-    "fetchData": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-}