favesalon-embed 0.0.4 → 0.1.0

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

@@ -1,80 +0,0 @@
-import { Component, Prop, h, State } from '@stencil/core';
-import { formatFullAddress } from '../../utils/utils';
-import HttpService from '../../services/services';
-export class SalonLocations {
-  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 { 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 })))));
-  }
-  static get is() { return "salon-locations"; }
-  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-lookbook/lookbook-modal.css

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

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

@@ -1,248 +0,0 @@
-import { Component, Prop, h, State, Method } from '@stencil/core';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { Colors } from '../../constants/colors';
-import HttpService from '../../services/services';
-dayjs.extend(relativeTime);
-export class SalonBookingModal {
-  constructor() {
-    this.salonLookbook = '';
-    this.lookbookComments = [];
-    this.isModalOpen = true;
-  }
-  componentWillLoad() {
-    if (!!this.salonLookbook) {
-      this.lookbookInfo = JSON.parse(this.salonLookbook);
-      this.fetchData();
-    }
-  }
-  fetchData() {
-    try {
-      const promises = [
-        HttpService().fetchStyleDetail(this.lookbookInfo.id).then(lookbookInfo => {
-          if (lookbookInfo) {
-            this.lookbookInfo = lookbookInfo;
-          }
-        }),
-        HttpService().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(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 is() { return "salon-lookbook-modal"; }
-  static get originalStyleUrls() { return {
-    "$": ["lookbook-modal.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["lookbook-modal.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
-    },
-    "salonLookbook": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "salon-lookbook",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "lookbookInfo": {},
-    "lookbookComments": {},
-    "isModalOpen": {}
-  }; }
-  static get methods() { return {
-    "fetchData": {
-      "complexType": {
-        "signature": "() => Promise<any[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any[]>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-}