favesalon-embed 0.0.2 → 0.1.0

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

@@ -3,40 +3,32 @@
   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;
   }

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

@@ -0,0 +1,183 @@
+import { Component, Prop, h, Method, State } from '@stencil/core';
+import { Colors } from '../../constants/colors';
+import HttpService from '../../services/services';
+const pageLimit = 20;
+export class SalonStylists {
+  constructor() {
+    this.page = 1;
+  }
+  componentWillLoad() {
+    this.fetchData();
+  }
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      const { total, data } = await HttpService().fetchSalonStylists(this.salonId, { page: 1, limit: pageLimit });
+      this.totalStylists = total;
+      this.salonStylists = data;
+      this.canLoadMore = data.length === pageLimit;
+    }
+    catch (e) {
+      this.totalStylists = 0;
+      this.salonStylists = [];
+      this.canLoadMore = false;
+    }
+    this.isLoading = false;
+  }
+  async onLoadMore() {
+    this.isLoadingMore = true;
+    try {
+      const { data } = await HttpService().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() {
+    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.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',
+            } }, !stylist.avatar && (h("span", { style: {
+              fontSize: '32px',
+              fontWeight: 'bold',
+              textTransform: 'uppercase',
+            } },
+            (stylist.firstName || '').charAt(0),
+            " ",
+            (stylist.lastName || '').charAt(0)))),
+          h("div", { class: "card-body" },
+            h("div", { style: {
+                fontSize: '18px',
+                fontWeight: '600',
+                textAlign: 'center',
+              } }, 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 is() { return "salon-stylists"; }
+  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
+    }
+  }; }
+  static get states() { return {
+    "salonStylists": {},
+    "totalStylists": {},
+    "page": {},
+    "isLoading": {},
+    "isLoadingMore": {},
+    "canLoadMore": {}
+  }; }
+  static get methods() { return {
+    "fetchData": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "onLoadMore": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/style-detail/index.css

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