favesalon-embed 0.0.2 → 0.1.0

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

@@ -0,0 +1,461 @@
+import { Component, Prop, h, State, Method } from '@stencil/core';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { isVideoMedia } from '../../types/style';
+import { Colors } from '../../constants/colors';
+import HttpService from '../../services/services';
+import { getSalonImage } from '../../types/salon';
+import { shortDateYearFormat } from '../../types/common';
+dayjs.extend(relativeTime);
+export class StyleDetail {
+  constructor() {
+    this.isModalOpen = true;
+    this.currentMediaIdx = 0;
+    this.albumMedias = [];
+    this.similarStyles = [];
+    this.totalComments = 0;
+    this.lookbookComments = [];
+  }
+  componentWillLoad() {
+    this.injectSDK();
+    if (!!this.salonLookbook) {
+      this.lookbookInfo = JSON.parse(this.salonLookbook);
+      this.fetchData();
+    }
+  }
+  componentDidRender() {
+    this.setupGridLayout();
+  }
+  injectSDK() {
+    return new Promise((resolve) => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = 'https://cdn.jsdelivr.net/npm/macy@2';
+      document.body.appendChild(script);
+      return resolve(true);
+    });
+  }
+  setupGridLayout() {
+    if (!this.isLayoutSetup && this.similarStyles.length > 0 && document.querySelector('#similar-styles--grid')) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.innerHTML = `
+        var masonry = new Macy({
+          container: '#similar-styles--grid',
+          useContainerForBreakpoints: true,
+          margin: 16,
+          columns: 2,
+        });
+      `;
+      document.body.appendChild(script);
+      this.isLayoutSetup = true;
+    }
+  }
+  fetchData() {
+    try {
+      const promises = [
+        HttpService().fetchStyleDetail(this.lookbookInfo.id).then(response => {
+          const { styleInfo, similarStyles } = response;
+          this.similarStyles = similarStyles;
+          if (styleInfo) {
+            this.lookbookInfo = styleInfo;
+            this.albumMedias = styleInfo.albumMedias || [];
+            this.currentMedia = (styleInfo.albumMedias || [])[0];
+          }
+        }),
+        HttpService().fetchStyleComments(this.lookbookInfo.id).then(response => {
+          this.totalComments = response.total;
+          this.lookbookComments = response.data;
+        }),
+      ];
+      return Promise.all(promises);
+    }
+    catch (e) { }
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    const el = document.querySelector('style-detail');
+    el.remove();
+  }
+  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);
+  }
+  onClickPrev() {
+    if (this.currentMediaIdx === 0) {
+      this.currentMediaIdx = this.albumMedias.length - 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+    else {
+      this.currentMediaIdx = this.currentMediaIdx - 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+  }
+  onClickNext() {
+    if (this.currentMediaIdx === this.albumMedias.length - 1) {
+      this.currentMediaIdx = 0;
+      this.currentMedia = this.albumMedias[0];
+    }
+    else {
+      this.currentMediaIdx = this.currentMediaIdx + 1;
+      this.currentMedia = this.albumMedias[this.currentMediaIdx];
+    }
+  }
+  render() {
+    const { createdDate, totalView, totalLike, totalBooking, album, salon, stylist, } = this.lookbookInfo;
+    if (this.isModalOpen) {
+      const { caption, description, mediaUrl } = this.currentMedia || {};
+      const isVideo = isVideoMedia((this.currentMedia || {}));
+      return (h("div", { class: "salon-modal salon-modal--lookbook-detail" },
+        h("div", { class: "salon-modal--inner" },
+          h("div", { class: "salon-modal--content" },
+            h("div", { class: "style-detail" },
+              h("div", { class: "style-detail--header" },
+                h("div", { style: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                  } },
+                  h("div", { style: Object.assign({ backgroundColor: Colors.Gray01, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0', filter: 'blur(30px)', position: 'absolute', inset: '0', zIndex: '1' }, this.currentMedia && !isVideoMedia(this.currentMedia) ? { backgroundImage: `url("${this.currentMedia.imageThumb}")` } : {}) }),
+                  h("div", { style: {
+                      zIndex: '2',
+                      position: 'relative',
+                      width: '100%',
+                      backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                      padding: '12px 16px',
+                      overflow: 'hidden',
+                    } },
+                    h("span", { style: {
+                        color: Colors.White,
+                        border: 'none',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '32px',
+                      } },
+                      h("span", null,
+                        this.currentMediaIdx + 1,
+                        " / ",
+                        this.albumMedias.length)),
+                    h("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        position: 'absolute',
+                        right: '16px',
+                        top: '50%',
+                        transform: 'translate(0, -50%)',
+                      } },
+                      h("button", { type: "text", class: "btn btn-light", style: {
+                          backgroundColor: Colors.White,
+                          borderColor: Colors.White,
+                          border: 'none',
+                          borderRadius: '50px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          height: '32px',
+                          width: '32px',
+                          marginLeft: '12px',
+                        }, onClick: () => this.closeModal() },
+                        h("i", { class: "ri-close-fill", style: { fontSize: '16px', lineHeight: '1' } })))),
+                  h("div", { style: { position: 'relative', zIndex: "3" } },
+                    h("div", { class: "style-detail--slides", style: {
+                        marginTop: '16px',
+                        marginBottom: '12px',
+                      } },
+                      h("div", { class: "style-detail--slides--image", style: {
+                          width: '100%',
+                          position: 'relative',
+                          height: '360px',
+                        } },
+                        isVideo && (h("video", { muted: true, controls: true, width: "100%", height: "100%" },
+                          h("source", { src: mediaUrl, type: "video/mp4" }))),
+                        !isVideo && (h("div", { style: {
+                            position: 'absolute',
+                            inset: '0',
+                            zIndex: '2',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          } },
+                          h("img", { src: mediaUrl, alt: caption, style: {
+                              objectFit: 'contain',
+                              maxHeight: '100%',
+                              maxWidth: '100%',
+                            } })))),
+                      h("div", { class: "style-detail--slides--thumbnails", style: {
+                          width: '100%',
+                          position: 'relative',
+                        } }, this.albumMedias.map((media, idx) => {
+                        const isStyleVideo = isVideoMedia(media);
+                        return (h("div", { class: "style-detail--slides--thumbnail", style: Object.assign(Object.assign({ backgroundColor: Colors.Gray01, borderRadius: '4px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, this.currentMediaIdx !== idx ? { opacity: '0.75' } : {}), !isStyleVideo ? {
+                            backgroundImage: `url("${media.imageThumb || media.imageThumbMedium}")`,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center center',
+                            backgroundSize: 'cover',
+                          } : {}), onClick: () => {
+                            this.currentMedia = media;
+                            this.currentMediaIdx = idx;
+                          } }, isStyleVideo && (h("div", null,
+                          h("video", { muted: true, width: "100%", height: "100%", poster: media.imageThumb },
+                            h("source", { src: media.mediaUrl, type: "video/mp4" })),
+                          h("i", { class: "ri-play-circle-fill", style: {
+                              fontSize: '48px',
+                              color: Colors.TextColor,
+                              position: 'absolute',
+                              left: '50%',
+                              top: '50%',
+                              transform: 'translate(-50%, -50%)',
+                            } })))));
+                      }))),
+                    this.albumMedias.length > 1 && (h("div", null,
+                      h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--prev", onClick: () => this.onClickPrev() },
+                        h("i", { class: "ri-arrow-left-line", style: { color: Colors.TextColor, fontSize: '18px' } })),
+                      h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--next", onClick: () => this.onClickNext() },
+                        h("i", { class: "ri-arrow-right-line", style: { color: Colors.TextColor, fontSize: '18px' } }))))))),
+              h("div", { class: "style-detail--content" },
+                h("div", { class: "container" },
+                  h("div", { style: {
+                      paddingBottom: '24px',
+                      paddingTop: '24px',
+                    } },
+                    h("div", { class: "row" },
+                      h("div", { class: this.similarStyles.length > 0 ? 'col-md-8' : 'col-md-12', style: { marginBottom: '24px' } },
+                        h("div", { class: "row" },
+                          salon && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } },
+                            h("div", { style: {
+                                backgroundColor: Colors.Red01,
+                                borderRadius: '4px',
+                                padding: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                              } },
+                              h("div", { style: { paddingLeft: '8px' } },
+                                h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "At salon"),
+                                h("div", { style: {
+                                    color: Colors.Secondary,
+                                    fontSize: '20px',
+                                    lineHeight: '24px',
+                                  } }, salon.businessName)),
+                              h("div", { style: {
+                                  backgroundImage: `url("${getSalonImage(salon)}")`,
+                                  backgroundColor: Colors.Red02,
+                                  backgroundSize: 'cover',
+                                  backgroundRepeat: 'no-repeat',
+                                  backgroundPosition: '0 0',
+                                  borderRadius: '4px',
+                                  height: '48px',
+                                  width: '48px',
+                                } })))),
+                          stylist && stylist.id && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } },
+                            h("div", { style: {
+                                backgroundColor: Colors.Yellow01,
+                                borderRadius: '4px',
+                                padding: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                              } },
+                              h("div", { style: { paddingLeft: '8px' } },
+                                h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "By stylist"),
+                                h("div", { style: {
+                                    color: Colors.Secondary,
+                                    fontSize: '20px',
+                                    lineHeight: '24px',
+                                  } }, stylist.fullName)),
+                              h("div", { style: {
+                                  backgroundImage: `url("${stylist.avatar}")`,
+                                  backgroundColor: Colors.Yellow02,
+                                  backgroundSize: 'cover',
+                                  backgroundRepeat: 'no-repeat',
+                                  backgroundPosition: '0 0',
+                                  borderRadius: '4px',
+                                  height: '48px',
+                                  width: '48px',
+                                } }))))),
+                        h("div", { style: {
+                            borderBottom: `1px solid ${Colors.Gray02}`,
+                            borderTop: `1px solid ${Colors.Gray02}`,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            paddingBottom: '16px',
+                            paddingTop: '16px',
+                          } },
+                          h("div", { style: {
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-around',
+                              flexShrink: '1',
+                              flexGrow: '1',
+                            } },
+                            h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } },
+                              h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalLike),
+                              h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "faves")),
+                            h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } },
+                              h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalBooking),
+                              h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "booked")),
+                            h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } },
+                              h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalView),
+                              h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "views")),
+                            h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } },
+                              h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, this.totalComments),
+                              h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "comments")))),
+                        (caption || description) && (h("div", { style: { paddingTop: '24px' } },
+                          h("div", { style: { color: Colors.Gray04, fontSize: '14px' } }, createdDate && dayjs(createdDate).format(shortDateYearFormat)),
+                          h("div", { style: { fontSize: '24px' } }, caption),
+                          h("div", { style: {
+                              fontSize: '16px',
+                              paddingTop: caption ? '16px' : '0',
+                            } }, description))),
+                        album && album.tags.length > 0 && (h("div", { style: {
+                            paddingTop: '24px',
+                            marginBottom: '-12px',
+                          } }, album.tags.map((tag, idx) => (h("button", { class: "btn btn-light", key: `album--tag-${idx}`, style: {
+                            backgroundColor: Colors.Gray01,
+                            borderColor: Colors.Gray01,
+                            borderRadius: '4px',
+                            marginRight: '12px',
+                            marginBottom: '12px',
+                          } }, tag))))),
+                        h("div", { style: { marginTop: '32px' } }, this.lookbookComments && this.lookbookComments.length > 0 && (h("div", null,
+                          h("div", { style: { fontWeight: '600', marginBottom: '8px' } },
+                            this.totalComments,
+                            " ",
+                            this.totalComments === 1 ? 'comment' : 'comments'),
+                          h("div", { class: "view view--style-comments", style: {
+                              borderTop: `1px solid ${Colors.Gray02}`,
+                              paddingTop: '24px',
+                              paddingBottom: '24px',
+                            } }, this.lookbookComments.map((comment, idx) => {
+                            const { user, title, description, createdDate } = comment;
+                            return (h("div", { key: `style-info--comment-${idx}`, style: idx > 0 ? {
+                                borderTop: `1px solid ${Colors.Gray02}`,
+                                marginTop: '24px',
+                                paddingTop: '24px',
+                              } : {} },
+                              h("div", { style: { overflow: 'hidden' } },
+                                h("user-avatar", { size: 48, avatar: user.avatar, name: h("div", null,
+                                    h("div", { style: { color: Colors.Gray04, lineHeight: '1', fontSize: '12px', fontWeight: '400' } }, dayjs(createdDate).fromNow()),
+                                    h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName)), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })),
+                              h("div", { style: {
+                                  color: Colors.Black,
+                                  fontSize: '16px',
+                                  paddingTop: '16px',
+                                } }, title),
+                              description && (h("div", { style: {
+                                  color: Colors.Gray05,
+                                  paddingTop: '8px',
+                                } }, description))));
+                          })))))),
+                      h("div", { class: "col-md-4", style: { marginBottom: '24px' } },
+                        h("div", { class: "block block--similar-styles" }, this.similarStyles.length > 0 && (h("div", { class: "block--content" },
+                          h("h3", { style: {
+                              lineHeight: '1.2',
+                              fontSize: '24px',
+                              color: Colors.Secondary,
+                            } }, "More like this"),
+                          h("div", { style: { marginTop: '16px' } },
+                            h("div", { class: "similar-styles--grid", id: "similar-styles--grid" }, this.similarStyles.slice(0, 6).map(style => {
+                              const { caption, imageThumbMedium, owner } = style;
+                              return (h("div", { class: "similar-styles--grid-item", onClick: () => {
+                                  this.closeModal();
+                                  this.onClickLookbook(style);
+                                } },
+                                h("div", { class: "card", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                  } },
+                                  h("div", { class: "similar-styles--grid-item--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 }))))));
+                            }))))))))))))))));
+    }
+    return null;
+  }
+  static get is() { return "style-detail"; }
+  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
+    },
+    "salonLookbook": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "salon-lookbook",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "lookbookInfo": {},
+    "isModalOpen": {},
+    "currentMediaIdx": {},
+    "currentMedia": {},
+    "albumMedias": {},
+    "similarStyles": {},
+    "totalComments": {},
+    "lookbookComments": {},
+    "isLayoutSetup": {}
+  }; }
+  static get methods() { return {
+    "fetchData": {
+      "complexType": {
+        "signature": "() => Promise<any[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/{collection → dist/collection}/components/user-avatar/index.js

@@ -8,7 +8,7 @@ export class UserAvatar {
     return (h("div", { style: { display: "flex", alignItems: "center" } },
       this.avatar && (h("div", { style: {
           backgroundImage: `url("${this.avatar}")`,
-          backgroundColor: Colors.Gray06,
+          backgroundColor: Colors.Gray01,
           backgroundPosition: 'center center',
           backgroundSize: 'cover',
           borderRadius: '50%',
@@ -17,7 +17,7 @@ export class UserAvatar {
           minWidth: `${this.size}px`,
         } })),
       !this.avatar && (h("div", { style: {
-          backgroundColor: Colors.Gray06,
+          backgroundColor: Colors.Gray01,
           backgroundPosition: 'center center',
           backgroundSize: 'cover',
           borderRadius: '50%',

package/dist/collection/constants/colors.js

@@ -0,0 +1,65 @@
+export const Colors = {
+  TextColor: '#141414',
+  Black: '#000000',
+  White: '#ffffff',
+  Primary: '#F05A61',
+  Secondary: '#001529',
+  Black01: '#262626',
+  Black02: '#1f1f1f',
+  Black03: '#141414',
+  Gray01: '#F5F5F5',
+  Gray02: '#EFEFEF',
+  Gray03: '#DBDBDB',
+  Gray04: '#999999',
+  Gray05: '#666666',
+  Red01: '#FEEFEF',
+  Red02: '#F9BDC0',
+  Red03: '#F05A61',
+  Red04: '#C0484E',
+  Red05: '#90363A',
+  Orange01: '#FFF4F0',
+  Orange02: '#FFD1C3',
+  Orange03: '#FF8D69',
+  Orange04: '#CC7154',
+  Orange05: '#99553F',
+  Yellow01: '#FDFBF4',
+  Yellow02: '#F8EDD3',
+  Yellow03: '#EED291',
+  Yellow04: '#BEA874',
+  Yellow05: '#8F7E57',
+  Lilac01: '#F3F0F4',
+  Lilac02: '#CFC1D4',
+  Lilac03: '#886594',
+  Lilac04: '#6D5176',
+  Lilac05: '#523D59',
+  Blue01: '#EAECEE',
+  Blue02: '#AAB1BD',
+  Blue03: '#2B3C59',
+  Blue04: '#223047',
+  Blue05: '#1A2435',
+  Green01: '#ECF7ED',
+  Green02: '#B2E1B9',
+  Green03: '#3FB34F',
+  Green04: '#328F3F',
+  Green05: '#266B2F',
+  Success01: '#EEF9E8',
+  Success02: '#BAE7A3',
+  Success03: '#52C41A',
+  Success04: '#429D15',
+  Success05: '#317610',
+  Error01: '#FFEDED',
+  Error02: '#FFB8B9',
+  Error03: '#FF4D4F',
+  Error04: '#CC3E3F',
+  Error05: '#992E2F',
+  Warning01: '#FFF7E8',
+  Warning02: '#FDDEA1',
+  Warning03: '#FAAD14',
+  Warning04: '#C88A10',
+  Warning05: '#96680C',
+  Info01: '#E8F4FF',
+  Info02: '#A3D3FF',
+  Info03: '#1890FF',
+  Info04: '#1373CC',
+  Info05: '#0E5699',
+};