favesalon-embed 0.0.4 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/{cjs → dist/cjs}/_commonjsHelpers-5cfcba41.js +0 -0
- package/dist/cjs/colors-38421769.js +69 -0
- package/dist/cjs/favesalon-embed.cjs.js +20 -0
- package/{cjs → dist/cjs}/global-9073d10e.js +0 -0
- package/dist/cjs/google-map_5.cjs.entry.js +291 -0
- package/{cjs/index-48ac68d0.js → dist/cjs/index-7f190886.js} +1924 -0
- package/{cjs/index-d5de0b9d.js → dist/cjs/index-e6bea8f5.js} +10 -0
- package/{cjs → dist/cjs}/index.cjs.js +0 -0
- package/dist/cjs/loader.cjs.js +22 -0
- package/{cjs → dist/cjs}/salon-booking-modal.cjs.entry.js +5 -5
- package/{cjs → dist/cjs}/salon-booking.cjs.entry.js +6 -7
- package/dist/cjs/salon-gift-card-modal.cjs.entry.js +28 -0
- package/{cjs → dist/cjs}/salon-gift-card.cjs.entry.js +7 -7
- package/dist/cjs/salon-latest-reviews.cjs.entry.js +95 -0
- package/{cjs/salon-lookbook_2.cjs.entry.js → dist/cjs/salon-lookbook.cjs.entry.js} +23 -57
- package/{cjs → dist/cjs}/salon-ranking.cjs.entry.js +7 -7
- package/dist/cjs/salon-reviews.cjs.entry.js +186 -0
- package/dist/cjs/salon-services.cjs.entry.js +78 -0
- package/dist/cjs/salon-stylists.cjs.entry.js +112 -0
- package/{cjs/services-f1102d4a.js → dist/cjs/services-eee8f251.js} +265 -393
- package/dist/cjs/style-detail.cjs.entry.js +310 -0
- package/dist/cjs/user-avatar.cjs.entry.js +41 -0
- package/{cjs → dist/cjs}/utils-c5a33b3c.js +0 -0
- package/{collection → dist/collection}/collection-manifest.json +2 -3
- package/dist/collection/components/google-map/assets/map--placeholder.jpeg +0 -0
- package/{collection → dist/collection}/components/google-map/index.css +0 -1
- package/dist/collection/components/google-map/index.js +86 -0
- package/{collection → dist/collection}/components/salon-booking/index.css +10 -24
- package/{collection → dist/collection}/components/salon-booking/index.js +3 -3
- package/{collection → dist/collection}/components/salon-booking/salon-booking-modal.js +4 -4
- package/dist/collection/components/salon-gift-card/index.css +25 -0
- package/{collection → dist/collection}/components/salon-gift-card/index.js +4 -3
- package/{collection → dist/collection}/components/salon-gift-card/salon-gift-card-modal.js +24 -3
- package/{collection/components/salon-locations → dist/collection/components/salon-info}/index.css +0 -0
- package/{collection → dist/collection}/components/salon-info/index.js +6 -32
- package/{collection → dist/collection}/components/salon-latest-reviews/index.css +0 -3
- package/dist/collection/components/salon-latest-reviews/index.js +176 -0
- package/dist/collection/components/salon-latest-styles/index.css +10 -0
- package/dist/collection/components/salon-latest-styles/index.js +178 -0
- package/{collection/components/salon-contact → dist/collection/components/salon-locations}/index.css +6 -6
- package/dist/collection/components/salon-locations/index.js +151 -0
- package/{collection → dist/collection}/components/salon-lookbook/index.css +0 -9
- package/{collection → dist/collection}/components/salon-lookbook/index.js +19 -19
- package/{collection → dist/collection}/components/salon-ranking/index.css +0 -0
- package/{collection → dist/collection}/components/salon-ranking/index.js +5 -5
- package/{collection → dist/collection}/components/salon-reviews/index.css +0 -0
- package/dist/collection/components/salon-reviews/index.js +286 -0
- package/dist/collection/components/salon-schedules/index.css +15 -0
- package/dist/collection/components/salon-schedules/index.js +189 -0
- package/{collection → dist/collection}/components/salon-services/index.css +0 -0
- package/{collection → dist/collection}/components/salon-services/index.js +51 -8
- package/{collection → dist/collection}/components/salon-stylists/index.css +0 -8
- package/dist/collection/components/salon-stylists/index.js +183 -0
- package/dist/collection/components/style-detail/index.css +62 -0
- package/dist/collection/components/style-detail/index.js +461 -0
- package/{collection → dist/collection}/components/user-avatar/index.css +0 -0
- package/{collection → dist/collection}/components/user-avatar/index.js +2 -2
- package/dist/collection/constants/colors.js +65 -0
- package/{collection → dist/collection}/global/global.js +0 -0
- package/{collection → dist/collection}/index.js +0 -0
- package/dist/collection/services/services.js +174 -0
- package/dist/collection/types/common.js +11 -0
- package/{collection → dist/collection}/types/review.js +9 -5
- package/dist/collection/types/salon.js +58 -0
- package/{collection → dist/collection}/types/service.js +0 -0
- package/dist/collection/types/style.js +128 -0
- package/{collection → dist/collection}/types/stylist.js +12 -9
- package/{favesalon-embed/index.esm.js → dist/collection/types/tmp.js} +0 -0
- package/{collection → dist/collection}/types/user.js +2 -2
- package/{collection → dist/collection}/utils/utils.js +0 -0
- package/{custom-elements → dist/custom-elements}/index.d.ts +12 -18
- package/{custom-elements → dist/custom-elements}/index.js +1227 -1035
- package/{esm → dist/esm}/_commonjsHelpers-098d5b27.js +0 -0
- package/dist/esm/colors-ea36347a.js +67 -0
- package/dist/esm/favesalon-embed.js +18 -0
- package/{esm → dist/esm}/global-e1089ffd.js +0 -0
- package/dist/esm/google-map_5.entry.js +283 -0
- package/{esm/index-0f8eed73.js → dist/esm/index-6af0a03d.js} +10 -1
- package/{esm/index-67d677ba.js → dist/esm/index-80523fec.js} +1924 -1
- package/{esm → dist/esm}/index.js +0 -0
- package/dist/esm/loader.js +18 -0
- package/{esm → dist/esm}/polyfills/core-js.js +0 -0
- package/{esm → dist/esm}/polyfills/css-shim.js +0 -0
- package/{esm → dist/esm}/polyfills/dom.js +0 -0
- package/{esm → dist/esm}/polyfills/es5-html-element.js +0 -0
- package/{esm → dist/esm}/polyfills/index.js +0 -0
- package/{esm → dist/esm}/polyfills/system.js +0 -0
- package/{esm → dist/esm}/salon-booking-modal.entry.js +5 -5
- package/{esm → dist/esm}/salon-booking.entry.js +5 -6
- package/dist/esm/salon-gift-card-modal.entry.js +24 -0
- package/{esm → dist/esm}/salon-gift-card.entry.js +6 -6
- package/dist/esm/salon-latest-reviews.entry.js +91 -0
- package/{esm/salon-lookbook_2.entry.js → dist/esm/salon-lookbook.entry.js} +24 -57
- package/{esm → dist/esm}/salon-ranking.entry.js +7 -7
- package/dist/esm/salon-reviews.entry.js +182 -0
- package/dist/esm/salon-services.entry.js +74 -0
- package/dist/esm/salon-stylists.entry.js +108 -0
- package/{esm/services-74d84ca9.js → dist/esm/services-295247b1.js} +263 -392
- package/dist/esm/style-detail.entry.js +306 -0
- package/dist/esm/user-avatar.entry.js +37 -0
- package/{esm → dist/esm}/utils-e97485e0.js +0 -0
- package/dist/favesalon-embed/assets/map--placeholder.jpeg +0 -0
- package/{favesalon-embed → dist/favesalon-embed}/favesalon-embed.css +1 -1
- package/dist/favesalon-embed/favesalon-embed.esm.js +1 -0
- package/dist/favesalon-embed/index.esm.js +0 -0
- package/dist/favesalon-embed/p-292b97ba.entry.js +1 -0
- package/{favesalon-embed → dist/favesalon-embed}/p-47e646f8.js +0 -0
- package/dist/favesalon-embed/p-4869dfed.entry.js +1 -0
- package/{favesalon-embed → dist/favesalon-embed}/p-4a5eca9a.js +0 -0
- package/dist/favesalon-embed/p-4aee4fd9.entry.js +1 -0
- package/dist/favesalon-embed/p-5528c705.entry.js +1 -0
- package/dist/favesalon-embed/p-612ad685.entry.js +1 -0
- package/dist/favesalon-embed/p-75aef7e0.entry.js +1 -0
- package/dist/favesalon-embed/p-8c780874.entry.js +1 -0
- package/dist/favesalon-embed/p-8dbf04c5.js +1 -0
- package/dist/favesalon-embed/p-9f31061a.entry.js +1 -0
- package/dist/favesalon-embed/p-a33331cc.js +1 -0
- package/dist/favesalon-embed/p-a60d78e9.entry.js +1 -0
- package/dist/favesalon-embed/p-a6debdae.entry.js +1 -0
- package/dist/favesalon-embed/p-bad1e9a7.entry.js +1 -0
- package/dist/favesalon-embed/p-c2ecb365.js +1 -0
- package/dist/favesalon-embed/p-c7dea70c.entry.js +1 -0
- package/{favesalon-embed → dist/favesalon-embed}/p-d6083940.js +0 -0
- package/dist/favesalon-embed/p-f0e14641.entry.js +1 -0
- package/dist/favesalon-embed/p-fc9a5551.js +6 -0
- package/{index.cjs.js → dist/index.cjs.js} +0 -0
- package/{index.js → dist/index.js} +0 -0
- package/dist/types/components/google-map/index.d.ts +5 -0
- package/{types → dist/types}/components/salon-booking/index.d.ts +0 -0
- package/{types → dist/types}/components/salon-booking/salon-booking-modal.d.ts +0 -0
- package/{types → dist/types}/components/salon-gift-card/index.d.ts +0 -0
- package/{types → dist/types}/components/salon-gift-card/salon-gift-card-modal.d.ts +1 -0
- package/{types → dist/types}/components/salon-info/index.d.ts +0 -1
- package/{types → dist/types}/components/salon-latest-reviews/index.d.ts +2 -0
- package/dist/types/components/salon-latest-styles/index.d.ts +12 -0
- package/{types → dist/types}/components/salon-locations/index.d.ts +2 -0
- package/{types → dist/types}/components/salon-lookbook/index.d.ts +3 -3
- package/{types → dist/types}/components/salon-ranking/index.d.ts +0 -0
- package/dist/types/components/salon-reviews/index.d.ts +24 -0
- package/{types → dist/types}/components/salon-schedules/index.d.ts +2 -0
- package/{types → dist/types}/components/salon-services/index.d.ts +1 -0
- package/{types → dist/types}/components/salon-stylists/index.d.ts +6 -0
- package/dist/types/components/style-detail/index.d.ts +24 -0
- package/{types → dist/types}/components/user-avatar/index.d.ts +0 -0
- package/{types → dist/types}/components.d.ts +54 -59
- package/dist/types/constants/colors.d.ts +65 -0
- package/{types → dist/types}/index.d.ts +0 -0
- package/dist/types/services/services.d.ts +60 -0
- package/{types → dist/types}/stencil-public-runtime.d.ts +0 -0
- package/dist/types/types/common.d.ts +11 -0
- package/{types → dist/types}/types/review.d.ts +4 -0
- package/{types → dist/types}/types/salon.d.ts +3 -1
- package/{types → dist/types}/types/service.d.ts +0 -0
- package/dist/types/types/style.d.ts +88 -0
- package/{types → dist/types}/types/stylist.d.ts +1 -1
- package/dist/types/types/tmp.d.ts +0 -0
- package/{types → dist/types}/types/user.d.ts +2 -2
- package/{types → dist/types}/utils/utils.d.ts +0 -0
- package/loader/cdn.js +3 -0
- package/loader/index.cjs.js +3 -0
- package/loader/index.d.ts +12 -0
- package/loader/index.es2017.js +3 -0
- package/loader/index.js +4 -0
- package/loader/package.json +10 -0
- package/package.json +18 -13
- package/readme.md +24 -7
- package/cjs/colors-7f354880.js +0 -95
- package/cjs/favesalon-embed.cjs.js +0 -20
- package/cjs/google-map.cjs.entry.js +0 -47
- package/cjs/index-95daad08.js +0 -1928
- package/cjs/loader.cjs.js +0 -22
- package/cjs/salon-contact_4.cjs.entry.js +0 -155
- package/cjs/salon-gift-card-modal.cjs.entry.js +0 -25
- package/cjs/salon-info.cjs.entry.js +0 -35
- package/cjs/salon-latest-reviews.cjs.entry.js +0 -58
- package/cjs/salon-lookbook-modal.cjs.entry.js +0 -141
- package/cjs/salon-reviews.cjs.entry.js +0 -205
- package/cjs/salon-services.cjs.entry.js +0 -47
- package/cjs/salon-stylists.cjs.entry.js +0 -54
- package/collection/components/google-map/index.js +0 -97
- package/collection/components/salon-contact/index.js +0 -88
- package/collection/components/salon-gift-card/index.css +0 -25
- package/collection/components/salon-info/index.css +0 -3
- package/collection/components/salon-latest-reviews/index.js +0 -108
- package/collection/components/salon-locations/index.js +0 -80
- package/collection/components/salon-lookbook/lookbook-modal.css +0 -72
- package/collection/components/salon-lookbook/salon-lookbook-modal.js +0 -248
- package/collection/components/salon-reviews/index.js +0 -317
- package/collection/components/salon-schedules/index.css +0 -14
- package/collection/components/salon-schedules/index.js +0 -103
- package/collection/components/salon-styles/index.css +0 -23
- package/collection/components/salon-styles/index.js +0 -100
- package/collection/components/salon-stylists/index.js +0 -96
- package/collection/constants/colors.js +0 -91
- package/collection/services/services.js +0 -225
- package/collection/types/common.js +0 -2
- package/collection/types/salon.js +0 -52
- package/collection/types/style.js +0 -103
- package/esm/colors-1ec90c5f.js +0 -93
- package/esm/favesalon-embed.js +0 -18
- package/esm/google-map.entry.js +0 -43
- package/esm/index-09d43e3e.js +0 -1926
- package/esm/loader.js +0 -18
- package/esm/salon-contact_4.entry.js +0 -148
- package/esm/salon-gift-card-modal.entry.js +0 -21
- package/esm/salon-info.entry.js +0 -31
- package/esm/salon-latest-reviews.entry.js +0 -54
- package/esm/salon-lookbook-modal.entry.js +0 -137
- package/esm/salon-reviews.entry.js +0 -201
- package/esm/salon-services.entry.js +0 -43
- package/esm/salon-stylists.entry.js +0 -50
- package/favesalon-embed/favesalon-embed.esm.js +0 -1
- package/favesalon-embed/p-0188d4dc.entry.js +0 -1
- package/favesalon-embed/p-0318501e.js +0 -1
- package/favesalon-embed/p-078f242d.entry.js +0 -1
- package/favesalon-embed/p-13e23c61.entry.js +0 -1
- package/favesalon-embed/p-17df13ad.js +0 -1
- package/favesalon-embed/p-1a3179c8.entry.js +0 -1
- package/favesalon-embed/p-20aa75de.js +0 -6
- package/favesalon-embed/p-2901a6d6.entry.js +0 -1
- package/favesalon-embed/p-2b861430.entry.js +0 -1
- package/favesalon-embed/p-44d810a0.js +0 -1
- package/favesalon-embed/p-4c68700f.entry.js +0 -1
- package/favesalon-embed/p-4e2d7b29.js +0 -1
- package/favesalon-embed/p-6b845bf1.entry.js +0 -1
- package/favesalon-embed/p-7350f6b5.entry.js +0 -1
- package/favesalon-embed/p-897c2b1c.entry.js +0 -1
- package/favesalon-embed/p-8e60f56f.entry.js +0 -1
- package/favesalon-embed/p-a49afdc1.entry.js +0 -1
- package/favesalon-embed/p-c93867c4.entry.js +0 -1
- package/favesalon-embed/p-ea6a097f.entry.js +0 -1
- package/types/components/google-map/index.d.ts +0 -10
- package/types/components/salon-contact/index.d.ts +0 -9
- package/types/components/salon-lookbook/salon-lookbook-modal.d.ts +0 -13
- package/types/components/salon-reviews/index.d.ts +0 -24
- package/types/components/salon-styles/index.d.ts +0 -9
- package/types/constants/colors.d.ts +0 -88
- package/types/services/services.d.ts +0 -26
- package/types/types/common.d.ts +0 -2
- package/types/types/style.d.ts +0 -59
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-d5de0b9d.js');
|
|
6
|
-
const services = require('./services-f1102d4a.js');
|
|
7
|
-
const index$1 = require('./index-48ac68d0.js');
|
|
8
|
-
const colors = require('./colors-7f354880.js');
|
|
9
|
-
const utils = require('./utils-c5a33b3c.js');
|
|
10
|
-
require('./_commonjsHelpers-5cfcba41.js');
|
|
11
|
-
|
|
12
|
-
const indexCss = "@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}}";
|
|
13
|
-
|
|
14
|
-
const pageLimited = 10;
|
|
15
|
-
const sortOptions = [{
|
|
16
|
-
value: 'newest',
|
|
17
|
-
label: 'Newest first',
|
|
18
|
-
}, {
|
|
19
|
-
value: 'oldest',
|
|
20
|
-
label: 'Oldest first',
|
|
21
|
-
}, {
|
|
22
|
-
value: 'rating_desc',
|
|
23
|
-
label: 'High rating first',
|
|
24
|
-
}, {
|
|
25
|
-
value: 'rating_asc',
|
|
26
|
-
label: 'Low rating first',
|
|
27
|
-
}];
|
|
28
|
-
const scoreValuesMapping = {
|
|
29
|
-
all: 'all',
|
|
30
|
-
star1: 1,
|
|
31
|
-
star2: 2,
|
|
32
|
-
star3: 3,
|
|
33
|
-
star4: 4,
|
|
34
|
-
star5: 5,
|
|
35
|
-
};
|
|
36
|
-
let SalonReviews = class {
|
|
37
|
-
constructor(hostRef) {
|
|
38
|
-
index.registerInstance(this, hostRef);
|
|
39
|
-
this.primaryColor = colors.Colors.Coral03;
|
|
40
|
-
this.totalReviews = 0;
|
|
41
|
-
this.salonReviews = [];
|
|
42
|
-
this.pageOffset = pageLimited;
|
|
43
|
-
this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
|
|
44
|
-
this.sorting = sortOptions[0].value;
|
|
45
|
-
this.renderReviewsList = () => {
|
|
46
|
-
const ratingTexts = utils.getRatingText();
|
|
47
|
-
const filteredReviews = this.getFilteredReviews(this.pageOffset);
|
|
48
|
-
const filteredReviewsCount = this.ratings.indexOf(scoreValuesMapping.all) > -1
|
|
49
|
-
? this.totalReviews : filteredReviews.length;
|
|
50
|
-
return (index.h("div", { class: "reviews-list" }, index.h("div", { class: "reviews-list--header", style: {
|
|
51
|
-
display: 'flex',
|
|
52
|
-
flexDirection: 'row',
|
|
53
|
-
justifyContent: 'space-between',
|
|
54
|
-
alignItems: 'center',
|
|
55
|
-
marginBottom: '24px',
|
|
56
|
-
} }, index.h("div", { class: "reviews-list--couter", style: { fontWeight: 'bold' } }, filteredReviewsCount, " ", filteredReviewsCount === 1 ? `review` : `reviews`), index.h("div", { class: "reviews-list--sorting", style: {
|
|
57
|
-
display: 'flex',
|
|
58
|
-
flexDirection: 'row',
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
} }, index.h("label", { style: { marginRight: '8px', marginBottom: '0' } }, "Sort by"), index.h("select", { class: "form-select", style: { width: '160px' }, onChange: (evt) => this.onChangeSorting(evt.target.value) }, sortOptions.map(sortOption => (index.h("option", { value: sortOption.value, selected: sortOption.value === this.sorting }, sortOption.label)))))), index.h("div", { class: "view-content" }, filteredReviewsCount > 0 && filteredReviews.map(review => {
|
|
61
|
-
const { user } = review;
|
|
62
|
-
return (index.h("div", { class: "salon-review", style: {
|
|
63
|
-
marginBottom: '24px',
|
|
64
|
-
paddingBottom: '24px',
|
|
65
|
-
borderBottom: `1px solid ${colors.Colors.Gray05}`,
|
|
66
|
-
} }, index.h("div", { class: "salon-review--user", style: { marginBottom: '24px' } }, index.h("user-avatar", { size: 48, avatar: user.avatar, name: user.name, shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), index.h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => {
|
|
67
|
-
const isHightlight = score <= review.point;
|
|
68
|
-
return (index.h("i", { class: isHightlight ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '16px', marginRight: '4px' }, isHightlight ? { color: this.primaryColor } : { color: colors.Colors.Gray03 }) }));
|
|
69
|
-
}), review.createdDate && (index.h("div", { class: "salon-review--rating--date", style: { color: colors.Colors.Gray03, marginLeft: '16px' } }, services.dayjs_min(review.createdDate).format(services.shortDate)))), index.h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]), (review.title || review.description) && (index.h("div", { class: "salon-review--detail", style: { marginTop: '24px' } }, index.h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }), index.h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))), review.photos.length > 0 && (index.h("div", { style: {
|
|
70
|
-
display: 'flex',
|
|
71
|
-
flexDirection: 'row',
|
|
72
|
-
overflowX: 'auto',
|
|
73
|
-
} }, review.photos.map(fileObj => (index.h("div", { style: {
|
|
74
|
-
border: '1px solid #d9d9d9',
|
|
75
|
-
position: 'relative',
|
|
76
|
-
cursor: 'pointer',
|
|
77
|
-
borderRadius: '2px',
|
|
78
|
-
height: '66px',
|
|
79
|
-
marginTop: '16px',
|
|
80
|
-
marginRight: '16px',
|
|
81
|
-
} }, index.h("img", { alt: "", src: fileObj.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))));
|
|
82
|
-
})), this.canLoadMore && (index.h("div", { class: "view-footer", style: { textAlign: 'center' } }, index.h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more')))));
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
componentWillLoad() {
|
|
86
|
-
this.fetchData();
|
|
87
|
-
}
|
|
88
|
-
fetchData() {
|
|
89
|
-
try {
|
|
90
|
-
const promises = [
|
|
91
|
-
services.HttpService().fetchSalonInfo(this.salonId).then(salonInfo => this.salonInfo = salonInfo),
|
|
92
|
-
services.HttpService().fetchSalonReviews(this.salonId, { limit: pageLimited }).then(response => {
|
|
93
|
-
const { total, allItems } = response;
|
|
94
|
-
this.totalReviews = total;
|
|
95
|
-
this.salonReviews = allItems;
|
|
96
|
-
if (total > pageLimited) {
|
|
97
|
-
this.canLoadMore = true;
|
|
98
|
-
}
|
|
99
|
-
}),
|
|
100
|
-
];
|
|
101
|
-
return Promise.all(promises);
|
|
102
|
-
}
|
|
103
|
-
catch (e) { }
|
|
104
|
-
}
|
|
105
|
-
sortReviews(filteredReviews) {
|
|
106
|
-
return services.sortBy_1(filteredReviews, [review => {
|
|
107
|
-
if (this.sorting === 'rating_desc') {
|
|
108
|
-
return -review.point;
|
|
109
|
-
}
|
|
110
|
-
if (this.sorting === 'rating_asc') {
|
|
111
|
-
return review.point;
|
|
112
|
-
}
|
|
113
|
-
const createdTime = services.dayjs_min(review.createdDate).unix();
|
|
114
|
-
return this.sorting === 'oldest' ? createdTime : -createdTime;
|
|
115
|
-
}]);
|
|
116
|
-
}
|
|
117
|
-
getFilteredReviews(pageOffset) {
|
|
118
|
-
let filteredReviews = [...this.salonReviews];
|
|
119
|
-
if (this.ratings.indexOf(scoreValuesMapping.all) === -1) {
|
|
120
|
-
const reviewRatingScores = this.ratings.map(r => scoreValuesMapping[r]);
|
|
121
|
-
filteredReviews = [...filteredReviews].filter(review => reviewRatingScores.indexOf(review.point) > -1);
|
|
122
|
-
}
|
|
123
|
-
const sortedReviews = this.sortReviews(filteredReviews);
|
|
124
|
-
return pageOffset ? sortedReviews.slice(0, pageOffset) : sortedReviews;
|
|
125
|
-
}
|
|
126
|
-
onLoadMore() {
|
|
127
|
-
this.isLoadingMore = true;
|
|
128
|
-
try {
|
|
129
|
-
this.pageOffset += pageLimited;
|
|
130
|
-
const totalResults = this.getFilteredReviews(this.pageOffset).length;
|
|
131
|
-
if (this.pageOffset > totalResults) {
|
|
132
|
-
this.canLoadMore = false;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
catch (error) { }
|
|
136
|
-
this.isLoadingMore = false;
|
|
137
|
-
}
|
|
138
|
-
onChangeSorting(sorting) {
|
|
139
|
-
this.sorting = sorting;
|
|
140
|
-
this.pageOffset = pageLimited;
|
|
141
|
-
this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
|
|
142
|
-
}
|
|
143
|
-
;
|
|
144
|
-
onChangeFilterRating(rating) {
|
|
145
|
-
if (rating === scoreValuesMapping.all) {
|
|
146
|
-
this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
|
|
147
|
-
}
|
|
148
|
-
else if (this.ratings.indexOf(rating) > -1) {
|
|
149
|
-
this.ratings = this.ratings.filter(r => r !== scoreValuesMapping.all && r !== rating);
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
const needFilterByAll = this.ratings.concat([rating]).filter(r => r !== scoreValuesMapping.all).length === 5;
|
|
153
|
-
this.ratings = needFilterByAll
|
|
154
|
-
? [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5']
|
|
155
|
-
: this.ratings.concat([rating]);
|
|
156
|
-
}
|
|
157
|
-
this.pageOffset = pageLimited;
|
|
158
|
-
this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
|
|
159
|
-
}
|
|
160
|
-
;
|
|
161
|
-
renderReviewsFilters() {
|
|
162
|
-
const reviewsByScore = services.groupBy_1(this.salonReviews, review => review.point);
|
|
163
|
-
const isAllChecked = this.ratings.indexOf(scoreValuesMapping.all) > -1;
|
|
164
|
-
const inputCheckedStyle = index$1.lib.css({
|
|
165
|
-
outline: 'none !important',
|
|
166
|
-
backgroundColor: `${this.primaryColor} !important`,
|
|
167
|
-
borderColor: `${this.primaryColor} !important`,
|
|
168
|
-
});
|
|
169
|
-
return (index.h("div", { class: "salon-reviews--filters-by-ratings" }, index.h("div", { style: {
|
|
170
|
-
fontWeight: 'bold',
|
|
171
|
-
marginBottom: '12px',
|
|
172
|
-
marginTop: '32px',
|
|
173
|
-
} }, "Filter by ratings"), index.h("div", { class: "salon-reviews--filters-by-ratings--options" }, index.h("div", { class: "checkbox--wrapper", style: { marginBottom: '12px' } }, index.h("div", { class: "checkbox--box" }, index.h("div", { class: "form-check" }, index.h("input", Object.assign({ type: "checkbox", class: "form-check-input", value: scoreValuesMapping.all, onChange: () => this.onChangeFilterRating(scoreValuesMapping.all), checked: isAllChecked }, isAllChecked ? inputCheckedStyle : {})), index.h("label", { class: "form-check-label" }, "All ratings")))), [5, 4, 3, 2, 1].filter(score => reviewsByScore[score]).map(score => {
|
|
174
|
-
const scoreReviewCount = reviewsByScore[score].length;
|
|
175
|
-
const isChecked = this.ratings.indexOf(scoreValuesMapping.all) > -1 || this.ratings.indexOf(`star${score}`) > -1;
|
|
176
|
-
return (index.h("div", { style: {
|
|
177
|
-
display: 'flex',
|
|
178
|
-
flexDirection: 'row',
|
|
179
|
-
justifyContent: 'space-between',
|
|
180
|
-
marginBottom: '12px',
|
|
181
|
-
} }, index.h("div", { class: "form-check" }, index.h("input", Object.assign({ value: "", type: "checkbox", class: "form-check-input", onChange: () => this.onChangeFilterRating(`star${score}`), checked: isChecked }, isChecked ? inputCheckedStyle : {})), index.h("label", { class: "form-check-label" }, [1, 2, 3, 4, 5].map(point => {
|
|
182
|
-
const isHightlight = point <= score;
|
|
183
|
-
return (index.h("i", { class: isHightlight ? 'ri-heart-fill' : 'ri-heart-line', style: { fontSize: '16px', marginRight: '4px' } }));
|
|
184
|
-
}))), index.h("div", { style: { color: colors.Colors.Gray01 } }, scoreReviewCount)));
|
|
185
|
-
}))));
|
|
186
|
-
}
|
|
187
|
-
render() {
|
|
188
|
-
const { rating } = this.salonInfo || {};
|
|
189
|
-
return (index.h("div", { class: "salon-reviews", style: { display: 'flex', flexDirection: 'row' } }, index.h("div", { class: "salon-reviews--filters", style: { width: '264px' } }, index.h("div", { class: "salon-reviews--score" }, index.h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
|
|
190
|
-
return (index.h("i", { class: score <= rating ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= rating ? { color: this.primaryColor } : { color: colors.Colors.Gray03 }) }));
|
|
191
|
-
})), index.h("div", { class: "salon-review--rating--date", style: {
|
|
192
|
-
display: 'flex',
|
|
193
|
-
flexDirection: 'row',
|
|
194
|
-
alignItems: 'center',
|
|
195
|
-
marginTop: '-8px',
|
|
196
|
-
} }, index.h("span", { style: { fontSize: '24px' } }, rating, "/5"), " ", index.h("span", { style: { color: colors.Colors.Gray02, marginLeft: '8px' } }, "(", this.totalReviews, " reviews)"))), index.h("div", { class: "salon-reviews--filters--options" }, this.renderReviewsFilters())), index.h("div", { class: "salon-reviews--list", style: {
|
|
197
|
-
flexGrow: '1',
|
|
198
|
-
flexShrink: '1',
|
|
199
|
-
paddingLeft: '64px',
|
|
200
|
-
} }, this.renderReviewsList())));
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
SalonReviews.style = indexCss;
|
|
204
|
-
|
|
205
|
-
exports.salon_reviews = SalonReviews;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-d5de0b9d.js');
|
|
6
|
-
const services = require('./services-f1102d4a.js');
|
|
7
|
-
const colors = require('./colors-7f354880.js');
|
|
8
|
-
require('./_commonjsHelpers-5cfcba41.js');
|
|
9
|
-
|
|
10
|
-
const indexCss = "";
|
|
11
|
-
|
|
12
|
-
let SalonServices = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
this.buttonClass = 'btn btn-light';
|
|
16
|
-
}
|
|
17
|
-
componentWillLoad() {
|
|
18
|
-
this.fetchData();
|
|
19
|
-
}
|
|
20
|
-
async fetchData() {
|
|
21
|
-
try {
|
|
22
|
-
this.salonServices = await services.HttpService().fetchSalonServices(this.salonId);
|
|
23
|
-
}
|
|
24
|
-
catch (e) { }
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
return (index.h("div", { class: "salon-services--container" }, index.h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${colors.Colors.Gray05}` } }, index.h("div", { class: "view-content", style: { overflowX: 'auto' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, services.sortBy_1(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index$1) => (index.h("a", { href: `#service-group--${serviceGroup.id}` }, index.h("button", { type: "button", class: this.buttonClass, style: index$1 > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))), services.sortBy_1(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
|
|
28
|
-
const hasMultipleCates = (serviceGroup.data || []).length > 1;
|
|
29
|
-
return (index.h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } }, index.h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name), index.h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${colors.Colors.Gray05}` } }, index.h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (index.h("div", { class: "salon-service-category" }, hasMultipleCates && (index.h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${colors.Colors.Gray06}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)), (subGroup.data || []).map((service, serviceIndex) => (index.h("div", { class: "salon-service" }, index.h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
|
|
30
|
-
marginTop: '12px',
|
|
31
|
-
paddingTop: '12px',
|
|
32
|
-
borderTop: `1px solid ${colors.Colors.Gray06}`,
|
|
33
|
-
} : {}) }, service.name), (!service.hideDuration || !service.hidePrice) && (index.h("div", { style: {
|
|
34
|
-
display: 'block',
|
|
35
|
-
marginTop: '4px',
|
|
36
|
-
fontSize: '90%',
|
|
37
|
-
color: colors.Colors.Gray03,
|
|
38
|
-
} }, [
|
|
39
|
-
!service.hideDuration ? `${service.duration} mins` : '',
|
|
40
|
-
!service.hidePrice ? `$${service.price}` : '',
|
|
41
|
-
].filter(field => !!field).join(' · ')))))))))))));
|
|
42
|
-
})));
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
SalonServices.style = indexCss;
|
|
46
|
-
|
|
47
|
-
exports.salon_services = SalonServices;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-d5de0b9d.js');
|
|
6
|
-
const colors = require('./colors-7f354880.js');
|
|
7
|
-
const services = require('./services-f1102d4a.js');
|
|
8
|
-
require('./_commonjsHelpers-5cfcba41.js');
|
|
9
|
-
|
|
10
|
-
const indexCss = ".view--salon-stylists{overflow:hidden;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}}";
|
|
11
|
-
|
|
12
|
-
let SalonStylists = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
}
|
|
16
|
-
componentWillLoad() {
|
|
17
|
-
this.fetchData();
|
|
18
|
-
}
|
|
19
|
-
async fetchData() {
|
|
20
|
-
try {
|
|
21
|
-
this.salonStylists = await services.HttpService().fetchSalonStylists(this.salonId);
|
|
22
|
-
}
|
|
23
|
-
catch (e) { }
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return (index.h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (index.h("div", { class: "salon-stylist" }, index.h("div", { class: "card", style: {
|
|
27
|
-
border: `1px solid ${colors.Colors.Gray05}`,
|
|
28
|
-
borderRadius: '8px',
|
|
29
|
-
overflow: 'hidden',
|
|
30
|
-
} }, index.h("div", { class: "salon-stylist--avatar", style: {
|
|
31
|
-
backgroundImage: `url("${stylist.avatar}")`,
|
|
32
|
-
backgroundColor: colors.Colors.Gray06,
|
|
33
|
-
backgroundRepeat: 'no-repeat',
|
|
34
|
-
backgroundPosition: 'center top',
|
|
35
|
-
backgroundSize: 'cover',
|
|
36
|
-
position: 'relative',
|
|
37
|
-
display: 'flex',
|
|
38
|
-
width: '100%',
|
|
39
|
-
alignItems: 'center',
|
|
40
|
-
justifyContent: 'center',
|
|
41
|
-
} }, !stylist.avatar && (index.h("span", { style: {
|
|
42
|
-
fontSize: '32px',
|
|
43
|
-
fontWeight: 'bold',
|
|
44
|
-
textTransform: 'uppercase',
|
|
45
|
-
} }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), index.h("div", { class: "card-body" }, index.h("div", { style: {
|
|
46
|
-
fontSize: '16px',
|
|
47
|
-
fontWeight: 'bold',
|
|
48
|
-
textAlign: 'center',
|
|
49
|
-
} }, stylist.name), index.h("div", { style: { marginTop: '4px' } }, index.h("salon-ranking", { ranking: stylist.rating })))))))));
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
SalonStylists.style = indexCss;
|
|
53
|
-
|
|
54
|
-
exports.salon_stylists = SalonStylists;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { Component, h, Prop } from '@stencil/core';
|
|
2
|
-
export class GoogleMap {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.apiKey = 'AIzaSyBW4PbW9aM2FXZl83Gs7jeRmekEWSzC1sY';
|
|
5
|
-
}
|
|
6
|
-
componentDidLoad() {
|
|
7
|
-
this.injectSDK().then(() => {
|
|
8
|
-
setTimeout(() => this.initMap(), 300);
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
injectSDK() {
|
|
12
|
-
return new Promise((resolve) => {
|
|
13
|
-
window['mapInit'] = () => resolve(true);
|
|
14
|
-
const script = document.createElement('script');
|
|
15
|
-
script.id = 'googleMaps';
|
|
16
|
-
if (this.apiKey) {
|
|
17
|
-
script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
script.src = 'https://maps.googleapis.com/maps/api/js?callback=mapInit';
|
|
21
|
-
}
|
|
22
|
-
document.body.appendChild(script);
|
|
23
|
-
return resolve(true);
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
initMap() {
|
|
27
|
-
const mapOptions = {
|
|
28
|
-
center: { lat: this.lat, lng: this.lng },
|
|
29
|
-
zoom: 8,
|
|
30
|
-
};
|
|
31
|
-
this.map = new window.google.maps.Map(document.getElementById('google-map-container'), mapOptions);
|
|
32
|
-
}
|
|
33
|
-
render() {
|
|
34
|
-
return h("div", { id: 'google-map-container' });
|
|
35
|
-
}
|
|
36
|
-
static get is() { return "google-map"; }
|
|
37
|
-
static get originalStyleUrls() { return {
|
|
38
|
-
"$": ["index.css"]
|
|
39
|
-
}; }
|
|
40
|
-
static get styleUrls() { return {
|
|
41
|
-
"$": ["index.css"]
|
|
42
|
-
}; }
|
|
43
|
-
static get properties() { return {
|
|
44
|
-
"apiKey": {
|
|
45
|
-
"type": "string",
|
|
46
|
-
"mutable": false,
|
|
47
|
-
"complexType": {
|
|
48
|
-
"original": "string",
|
|
49
|
-
"resolved": "string",
|
|
50
|
-
"references": {}
|
|
51
|
-
},
|
|
52
|
-
"required": false,
|
|
53
|
-
"optional": false,
|
|
54
|
-
"docs": {
|
|
55
|
-
"tags": [],
|
|
56
|
-
"text": ""
|
|
57
|
-
},
|
|
58
|
-
"attribute": "api-key",
|
|
59
|
-
"reflect": false,
|
|
60
|
-
"defaultValue": "'AIzaSyBW4PbW9aM2FXZl83Gs7jeRmekEWSzC1sY'"
|
|
61
|
-
},
|
|
62
|
-
"lat": {
|
|
63
|
-
"type": "number",
|
|
64
|
-
"mutable": false,
|
|
65
|
-
"complexType": {
|
|
66
|
-
"original": "number",
|
|
67
|
-
"resolved": "number",
|
|
68
|
-
"references": {}
|
|
69
|
-
},
|
|
70
|
-
"required": false,
|
|
71
|
-
"optional": false,
|
|
72
|
-
"docs": {
|
|
73
|
-
"tags": [],
|
|
74
|
-
"text": ""
|
|
75
|
-
},
|
|
76
|
-
"attribute": "lat",
|
|
77
|
-
"reflect": false
|
|
78
|
-
},
|
|
79
|
-
"lng": {
|
|
80
|
-
"type": "number",
|
|
81
|
-
"mutable": false,
|
|
82
|
-
"complexType": {
|
|
83
|
-
"original": "number",
|
|
84
|
-
"resolved": "number",
|
|
85
|
-
"references": {}
|
|
86
|
-
},
|
|
87
|
-
"required": false,
|
|
88
|
-
"optional": false,
|
|
89
|
-
"docs": {
|
|
90
|
-
"tags": [],
|
|
91
|
-
"text": ""
|
|
92
|
-
},
|
|
93
|
-
"attribute": "lng",
|
|
94
|
-
"reflect": false
|
|
95
|
-
}
|
|
96
|
-
}; }
|
|
97
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h, State } from '@stencil/core';
|
|
2
|
-
import { Colors } from '../../constants/colors';
|
|
3
|
-
import { formatWebsiteUrl } from '../../utils/utils';
|
|
4
|
-
import HttpService from '../../services/services';
|
|
5
|
-
export class SalonContact {
|
|
6
|
-
componentWillLoad() {
|
|
7
|
-
if (this.salonInfo) {
|
|
8
|
-
this.salonInfoState = JSON.parse(this.salonInfo);
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
this.fetchData();
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
fetchData() {
|
|
15
|
-
try {
|
|
16
|
-
HttpService().fetchSalonInfo(this.salonId)
|
|
17
|
-
.then(salonInfo => this.salonInfoState = salonInfo);
|
|
18
|
-
}
|
|
19
|
-
catch (e) { }
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
const { about, email, website, businessPhone, } = (this.salonInfoState || {});
|
|
23
|
-
const websiteUrl = formatWebsiteUrl(website);
|
|
24
|
-
return (h("div", { class: "view view--salon-contact" },
|
|
25
|
-
h("div", { class: "view-content" },
|
|
26
|
-
h("div", { style: { fontSize: '16px', fontWeight: 'bold' } }, "Contact info"),
|
|
27
|
-
h("div", { class: "salon-contact--links" },
|
|
28
|
-
businessPhone && (h("div", { class: "salon-contact--links-item" },
|
|
29
|
-
h("i", { class: "ri-phone-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }),
|
|
30
|
-
" ",
|
|
31
|
-
businessPhone)),
|
|
32
|
-
websiteUrl && (h("div", { class: "salon-contact--links-item" },
|
|
33
|
-
h("i", { class: "ri-links-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }),
|
|
34
|
-
" ",
|
|
35
|
-
h("a", { target: websiteUrl && websiteUrl.indexOf(window.location.hostname) === -1 ? '_blank' : undefined, href: websiteUrl, style: { color: Colors.Gray01, textDecoration: 'none' } }, websiteUrl))),
|
|
36
|
-
email && (h("div", { class: "salon-contact--links-item" },
|
|
37
|
-
h("i", { class: "ri-mail-line", style: { color: Colors.Gray03, fontSize: '18px', marginRight: '6px' } }),
|
|
38
|
-
" ",
|
|
39
|
-
h("a", { href: `mailto:${email}`, style: { color: Colors.Gray01, textDecoration: 'none' } }, email)))),
|
|
40
|
-
h("div", { class: "salon-contact--info--desc", style: { fontSize: '16px', marginTop: '16px' }, innerHTML: about }))));
|
|
41
|
-
}
|
|
42
|
-
static get is() { return "salon-contact"; }
|
|
43
|
-
static get originalStyleUrls() { return {
|
|
44
|
-
"$": ["index.css"]
|
|
45
|
-
}; }
|
|
46
|
-
static get styleUrls() { return {
|
|
47
|
-
"$": ["index.css"]
|
|
48
|
-
}; }
|
|
49
|
-
static get properties() { return {
|
|
50
|
-
"salonId": {
|
|
51
|
-
"type": "number",
|
|
52
|
-
"mutable": false,
|
|
53
|
-
"complexType": {
|
|
54
|
-
"original": "number",
|
|
55
|
-
"resolved": "number",
|
|
56
|
-
"references": {}
|
|
57
|
-
},
|
|
58
|
-
"required": false,
|
|
59
|
-
"optional": false,
|
|
60
|
-
"docs": {
|
|
61
|
-
"tags": [],
|
|
62
|
-
"text": ""
|
|
63
|
-
},
|
|
64
|
-
"attribute": "salon-id",
|
|
65
|
-
"reflect": false
|
|
66
|
-
},
|
|
67
|
-
"salonInfo": {
|
|
68
|
-
"type": "string",
|
|
69
|
-
"mutable": false,
|
|
70
|
-
"complexType": {
|
|
71
|
-
"original": "string",
|
|
72
|
-
"resolved": "string",
|
|
73
|
-
"references": {}
|
|
74
|
-
},
|
|
75
|
-
"required": false,
|
|
76
|
-
"optional": true,
|
|
77
|
-
"docs": {
|
|
78
|
-
"tags": [],
|
|
79
|
-
"text": ""
|
|
80
|
-
},
|
|
81
|
-
"attribute": "salon-info",
|
|
82
|
-
"reflect": false
|
|
83
|
-
}
|
|
84
|
-
}; }
|
|
85
|
-
static get states() { return {
|
|
86
|
-
"salonInfoState": {}
|
|
87
|
-
}; }
|
|
88
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
.salon-modal.salon-modal--gift-card .salon-modal--title {
|
|
2
|
-
margin: 0;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.salon-modal.salon-modal--gift-card .salon-modal--close {
|
|
6
|
-
width: 40px;
|
|
7
|
-
height: 40px;
|
|
8
|
-
right: 16px;
|
|
9
|
-
top: 16px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.salon-modal.salon-modal--gift-card .salon-modal--header {
|
|
13
|
-
height: 72px;
|
|
14
|
-
padding: 16px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.salon-modal.salon-modal--gift-card .salon-modal--inner {
|
|
18
|
-
height: 90vh;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.salon-modal.salon-modal--gift-card .salon-modal--content {
|
|
22
|
-
height: 90vh;
|
|
23
|
-
padding: 0 16px;
|
|
24
|
-
overflow-y: auto;
|
|
25
|
-
}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h, Method, State } from '@stencil/core';
|
|
2
|
-
import dayjs from 'dayjs';
|
|
3
|
-
import { Colors } from '../../constants/colors';
|
|
4
|
-
import { getRatingText } from '../../utils/utils';
|
|
5
|
-
import HttpService from '../../services/services';
|
|
6
|
-
import { shortDate } from '../../types/common';
|
|
7
|
-
export class SalonLatestReviews {
|
|
8
|
-
constructor() {
|
|
9
|
-
this.salonReviews = [];
|
|
10
|
-
}
|
|
11
|
-
componentWillLoad() {
|
|
12
|
-
this.fetchData();
|
|
13
|
-
}
|
|
14
|
-
async fetchData() {
|
|
15
|
-
try {
|
|
16
|
-
const { allItems } = await HttpService().fetchSalonReviews(this.salonId, { noLoop: true });
|
|
17
|
-
this.salonReviews = [...allItems];
|
|
18
|
-
}
|
|
19
|
-
catch (e) { }
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
const ratingTexts = getRatingText();
|
|
23
|
-
return (h("div", { class: "salon-latest-reviews", style: { overflowX: 'auto' } },
|
|
24
|
-
h("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, (this.salonReviews || []).map((review, index) => {
|
|
25
|
-
const { user } = review;
|
|
26
|
-
return (h("div", { class: "salon-review", style: Object.assign({ border: `1px solid ${Colors.Gray05}`, background: Colors.White, borderRadius: '8px', overflow: 'hidden' }, index > 0 ? { marginLeft: '16px' } : {}) },
|
|
27
|
-
h("div", { class: "card", style: { border: 'none' } },
|
|
28
|
-
h("div", { class: "card-body" },
|
|
29
|
-
h("div", { class: "salon-review--user", style: { marginBottom: '16px' } },
|
|
30
|
-
h("user-avatar", { size: 48, name: user.name, shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, avatar: user.avatar, nameStyle: { fontWeight: 'bold' } })),
|
|
31
|
-
h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } },
|
|
32
|
-
[1, 2, 3, 4, 5].map(score => (h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
|
|
33
|
-
fontSize: '16px',
|
|
34
|
-
marginRight: '4px',
|
|
35
|
-
} }))),
|
|
36
|
-
h("div", { class: "salon-review--rating--date", style: { color: Colors.Gray03, marginLeft: '16px' } }, dayjs(review.createdDate).format(shortDate))),
|
|
37
|
-
h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]),
|
|
38
|
-
(review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } },
|
|
39
|
-
h("div", { class: "salon-review--description", style: {
|
|
40
|
-
fontSize: '16px',
|
|
41
|
-
lineHeight: '26px',
|
|
42
|
-
overflow: 'hidden',
|
|
43
|
-
maxHeight: review.photos.length > 0 ? '52px' : '104px',
|
|
44
|
-
} }, review.title || review.description))),
|
|
45
|
-
review.photos.length > 0 && (h("div", { style: {
|
|
46
|
-
display: 'flex',
|
|
47
|
-
flexDirection: 'row',
|
|
48
|
-
overflowX: 'auto',
|
|
49
|
-
} }, review.photos.map(photo => (h("div", { style: {
|
|
50
|
-
border: '1px solid #d9d9d9',
|
|
51
|
-
position: 'relative',
|
|
52
|
-
cursor: 'pointer',
|
|
53
|
-
borderRadius: '2px',
|
|
54
|
-
height: '66px',
|
|
55
|
-
marginTop: '16px',
|
|
56
|
-
marginRight: '16px',
|
|
57
|
-
} },
|
|
58
|
-
h("img", { alt: "", src: photo.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))))));
|
|
59
|
-
}))));
|
|
60
|
-
}
|
|
61
|
-
static get is() { return "salon-latest-reviews"; }
|
|
62
|
-
static get originalStyleUrls() { return {
|
|
63
|
-
"$": ["index.css"]
|
|
64
|
-
}; }
|
|
65
|
-
static get styleUrls() { return {
|
|
66
|
-
"$": ["index.css"]
|
|
67
|
-
}; }
|
|
68
|
-
static get properties() { return {
|
|
69
|
-
"salonId": {
|
|
70
|
-
"type": "number",
|
|
71
|
-
"mutable": false,
|
|
72
|
-
"complexType": {
|
|
73
|
-
"original": "number",
|
|
74
|
-
"resolved": "number",
|
|
75
|
-
"references": {}
|
|
76
|
-
},
|
|
77
|
-
"required": false,
|
|
78
|
-
"optional": false,
|
|
79
|
-
"docs": {
|
|
80
|
-
"tags": [],
|
|
81
|
-
"text": ""
|
|
82
|
-
},
|
|
83
|
-
"attribute": "salon-id",
|
|
84
|
-
"reflect": false
|
|
85
|
-
}
|
|
86
|
-
}; }
|
|
87
|
-
static get states() { return {
|
|
88
|
-
"salonReviews": {}
|
|
89
|
-
}; }
|
|
90
|
-
static get methods() { return {
|
|
91
|
-
"fetchData": {
|
|
92
|
-
"complexType": {
|
|
93
|
-
"signature": "() => Promise<void>",
|
|
94
|
-
"parameters": [],
|
|
95
|
-
"references": {
|
|
96
|
-
"Promise": {
|
|
97
|
-
"location": "global"
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
"return": "Promise<void>"
|
|
101
|
-
},
|
|
102
|
-
"docs": {
|
|
103
|
-
"text": "",
|
|
104
|
-
"tags": []
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}; }
|
|
108
|
-
}
|