favesalon-embed 0.0.2 → 0.1.0

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

@@ -0,0 +1,151 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import { formatFullAddress, formatWebsiteUrl } from '../../utils/utils';
+import { Colors } from '../../constants/colors';
+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() {
+    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 is() { return "salon-locations"; }
+  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
+    },
+    "salonInfo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-info",
+      "reflect": false
+    },
+    "isLoading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-loading",
+      "reflect": false
+    },
+    "withBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "with-border",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "salonInfoState": {}
+  }; }
+}

package/dist/collection/components/salon-lookbook/index.css

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

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

@@ -22,6 +22,8 @@ export class SalonLookbook {
     this.totalLookbooks = 0;
     this.salonCategories = [];
     this.salonLookbooks = [];
+    this.sortBy = lookbookSortOptions[1].value;
+    this.filterBy = lookbookFilterOptions[0].value;
   }
   componentWillLoad() {
     this.fetchData();
@@ -47,19 +49,13 @@ export class SalonLookbook {
         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: {
@@ -76,7 +72,7 @@ export class SalonLookbook {
   async fetchData() {
     try {
       const promises = [
-        this.fetchLookbooks({ page: 1 }),
+        this.fetchLookbooks(Object.assign({ page: 1, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [this.filterBy] } : {})),
         this.fetchCategories(),
       ];
       return Promise.all(promises);
@@ -104,6 +100,34 @@ export class SalonLookbook {
       this.isLoading = false;
     }
   }
+  async onChangeFiltering(filterBy) {
+    try {
+      this.currentPage = 1;
+      this.totalLookbooks = 0;
+      this.salonLookbooks = [];
+      this.hideLoadMore = true;
+      this.filterBy = 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;
+      }
+    }
+    catch (error) { }
+  }
+  async onChangeSorting(sortBy) {
+    try {
+      this.currentPage = 1;
+      this.totalLookbooks = 0;
+      this.salonLookbooks = [];
+      this.hideLoadMore = true;
+      this.sortBy = sortBy;
+      await this.fetchLookbooks(Object.assign({ page: this.currentPage, sort: this.sortBy }, this.filterBy !== 'all' ? { services: [this.filterBy] } : {}));
+      if (window.masonry) {
+        this.isLayoutSetup = false;
+      }
+    }
+    catch (error) { }
+  }
   async onLoadMore() {
     try {
       this.currentPage += 1;
@@ -120,6 +144,16 @@ export class SalonLookbook {
     }
     catch (error) { }
   }
+  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);
+  }
   renderHeader() {
     const allFilterOptions = lookbookFilterOptions.concat(([...this.salonCategories]).map(category => {
       return {
@@ -134,7 +168,7 @@ export class SalonLookbook {
         alignItems: 'center',
         marginBottom: '24px',
       } },
-      h("div", null,
+      h("div", { class: "salon-loobook--serch-result" },
         this.totalLookbooks,
         " ",
         this.totalLookbooks === 1 ? 'result' : 'results'),
@@ -143,58 +177,57 @@ export class SalonLookbook {
           flexDirection: 'row',
           alignItems: 'center',
         } },
-        h("div", { style: {
+        h("div", { class: "salon-loobook--filter-wrapper", style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
             marginRight: '16px',
           } },
-          h("label", { style: { marginRight: '8px' } }, "Filter by"),
-          h("select", { 
-            // placeholder="Filter by"
-            // value={filterBy}
-            // onChange={onChangeCategory}
-            class: "form-select", style: { width: '160px' } }, allFilterOptions.map(filterOption => (h("option", { value: filterOption.value }, filterOption.label))))),
-        h("div", { class: "search--header--sort-wrapper", style: {
+          h("label", { style: { marginRight: '8px', marginBottom: '0' } }, "Filter by"),
+          h("select", { class: "form-select", style: { width: '160px' }, onChange: (evt) => this.onChangeFiltering(evt.target.value) }, allFilterOptions.map(filterOption => (h("option", { value: filterOption.value, selected: String(filterOption.value) === String(this.filterBy) }, filterOption.label))))),
+        h("div", { class: "salon-loobook--sort-wrapper", style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
           } },
-          h("label", { style: { marginRight: '8px' } }, "Sort by"),
-          h("select", { 
-            // placeholder="Sort by"
-            // value={sortBy}
-            // onChange={onChangeSorting}
-            class: "form-select", style: { width: '160px' } }, lookbookSortOptions.map(sortOption => (h("option", { value: sortOption.value }, sortOption.label))))))));
+          h("label", { style: { marginRight: '8px', marginBottom: '0' } }, "Sort by"),
+          h("select", { class: "form-select", style: { width: '160px' }, onChange: (evt) => this.onChangeSorting(evt.target.value) }, lookbookSortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy }, sortOption.label))))))));
   }
   render() {
-    return (h("div", { class: "salon-loobooks" }, this.salonLookbooks.length > 0 && (h("div", null,
-      h("div", { class: "view-content" },
-        this.renderHeader(),
-        h("div", { class: "salon-loobooks--grid", id: "salon-loobooks--grid" }, this.salonLookbooks.map(style => {
-          const { caption, fullImageUrlThumb, owner } = style;
-          return (h("div", { class: "salon-lookbook salon-loobooks--grid-item" },
-            h("div", { class: "card", style: {
-                background: 'none',
-                border: 'none',
-                maxWidth: '200px',
-              } },
-              h("div", { class: "salon-lookbook--image", style: {
-                  borderRadius: '8px',
-                  overflow: 'hidden',
-                  minHeight: '80px',
-                  background: Colors.Gray06,
+    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, 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',
                 } },
-                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.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')))))));
+                h("div", { class: "salon-lookbook--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 }))))));
+          })))),
+        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 is() { return "salon-lookbook"; }
   static get originalStyleUrls() { return {
-    "$": ["index.css"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -226,6 +259,8 @@ export class SalonLookbook {
     "totalLookbooks": {},
     "salonCategories": {},
     "salonLookbooks": {},
+    "sortBy": {},
+    "filterBy": {},
     "isLayoutSetup": {}
   }; }
   static get methods() { return {
@@ -267,6 +302,44 @@ export class SalonLookbook {
         "tags": []
       }
     },
+    "onChangeFiltering": {
+      "complexType": {
+        "signature": "(filterBy: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "onChangeSorting": {
+      "complexType": {
+        "signature": "(sortBy: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "onLoadMore": {
       "complexType": {
         "signature": "() => Promise<void>",

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

@@ -8,30 +8,30 @@ export class SalonRanking {
   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',
     };
   }

package/dist/collection/components/salon-reviews/index.css

@@ -0,0 +1,15 @@
+@media (max-width: 768px) {
+  salon-reviews .salon-reviews {
+    flex-direction: column !important;
+  }
+  salon-reviews .salon-reviews--filters--options {
+    display: none !important;
+  }
+  salon-reviews .salon-reviews--list {
+    padding-top: 32px !important;
+    padding-left: 0px !important;
+  }
+  salon-reviews .reviews-list--sorting > label {
+    display: none !important;
+  }
+}