favesalon-embed 0.0.4 → 0.1.0

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

@@ -10,14 +10,56 @@ export class SalonServices {
     this.fetchData();
   }
   async fetchData() {
+    this.isLoading = true;
     try {
       this.salonServices = await HttpService().fetchSalonServices(this.salonId);
     }
-    catch (e) { }
+    catch (e) {
+      this.salonServices = [];
+    }
+    this.isLoading = false;
   }
   render() {
+    if (this.isLoading) {
+      return (h("div", { class: "salon-services--container" },
+        h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray01}` } },
+          h("div", { class: "view-content", style: { overflowX: 'auto' } },
+            h("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden' } }, [1, 2, 3, 4, 5, 6].map((fakeId, index) => (h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                backgroundColor: Colors.Gray02,
+                float: 'left',
+                marginRight: '12px',
+                height: '30px',
+                width: '120px',
+              } })))))),
+        [1, 2, 3, 4, 5, 6].map((fakeId, index) => {
+          return (h("div", { id: `service-group--${fakeId}`, style: { marginTop: '32px' } },
+            h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                backgroundColor: Colors.Gray03,
+                height: '20px',
+                width: '120px',
+              } }),
+            h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray01}`, marginTop: '12px' } },
+              h("div", { class: "view-content" }, [1, 2, 3].map((fakeGroupId, fakeGroupIndex) => (h("div", { key: `service-group--${fakeId}--service-${fakeGroupId}--${fakeGroupIndex}`, class: "salon-service" },
+                h("div", { class: "salon-service--name", style: Object.assign({}, fakeGroupIndex > 0 ? {
+                    marginTop: '12px',
+                    paddingTop: '12px',
+                    borderTop: `1px solid ${Colors.Gray01}`,
+                  } : {}) },
+                  h("div", { key: `service-group--${fakeId}--${index}`, style: {
+                      backgroundColor: Colors.Gray01,
+                      height: '16px',
+                      width: '120px',
+                    } })),
+                h("div", { style: { marginTop: '4px' } },
+                  h("div", { style: {
+                      backgroundColor: Colors.Gray01,
+                      height: '16px',
+                      width: '240px',
+                    } })))))))));
+        })));
+    }
     return (h("div", { class: "salon-services--container" },
-      h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray05}` } },
+      h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray02}` } },
         h("div", { class: "view-content", style: { overflowX: 'auto' } },
           h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` },
             h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))),
@@ -25,20 +67,20 @@ export class SalonServices {
         const hasMultipleCates = (serviceGroup.data || []).length > 1;
         return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } },
           h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name),
-          h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray05}` } },
+          h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray02}` } },
             h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" },
-              hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray06}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)),
+              hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray02}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)),
               (subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" },
                 h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
                     marginTop: '12px',
                     paddingTop: '12px',
-                    borderTop: `1px solid ${Colors.Gray06}`,
+                    borderTop: `1px solid ${Colors.Gray01}`,
                   } : {}) }, service.name),
                 (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
                     display: 'block',
                     marginTop: '4px',
                     fontSize: '90%',
-                    color: Colors.Gray03,
+                    color: Colors.Gray05,
                   } }, [
                   !service.hideDuration ? `${service.duration} mins` : '',
                   !service.hidePrice ? `$${service.price}` : '',
@@ -47,7 +89,7 @@ export class SalonServices {
   }
   static get is() { return "salon-services"; }
   static get originalStyleUrls() { return {
-    "$": ["index.css"]
+    "$": ["index.less"]
   }; }
   static get styleUrls() { return {
     "$": ["index.css"]
@@ -90,7 +132,8 @@ export class SalonServices {
     }
   }; }
   static get states() { return {
-    "salonServices": {}
+    "salonServices": {},
+    "isLoading": {}
   }; }
   static get methods() { return {
     "fetchData": {

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;
+  }
+}