favesalon-embed 0.1.0 → 1.0.0

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Method } from '@stencil/core';
+import { h } from '@stencil/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { isVideoMedia } from '../../types/style';
@@ -9,12 +9,17 @@ import { shortDateYearFormat } from '../../types/common';
 dayjs.extend(relativeTime);
 export class StyleDetail {
   constructor() {
+    this.salonId = undefined;
+    this.salonLookbook = undefined;
+    this.lookbookInfo = undefined;
     this.isModalOpen = true;
     this.currentMediaIdx = 0;
+    this.currentMedia = undefined;
     this.albumMedias = [];
     this.similarStyles = [];
     this.totalComments = 0;
     this.lookbookComments = [];
+    this.isLayoutSetup = undefined;
   }
   componentWillLoad() {
     this.injectSDK();
@@ -112,350 +117,270 @@ export class StyleDetail {
     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 (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"
-          }
+  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": ""
         },
-        "return": "Promise<any[]>"
+        "attribute": "salon-id",
+        "reflect": false
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "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": []
+        }
+      }
+    };
+  }
 }