favesalon-embed 0.0.3 → 0.0.5
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/dist/cjs/_commonjsHelpers-5cfcba41.js +36 -0
- package/dist/cjs/chat-button.cjs.entry.js +118 -0
- package/dist/cjs/colors-38421769.js +69 -0
- package/dist/cjs/favesalon-embed.cjs.js +24 -0
- package/dist/cjs/google-map_5.cjs.entry.js +310 -0
- package/{cjs/index-7d179a70.js → dist/cjs/index-47c2a5f6.js} +587 -199
- package/dist/cjs/index-7f190886.js +4396 -0
- package/dist/cjs/loader.cjs.js +23 -0
- package/dist/cjs/relativeTime-3721080d.js +9 -0
- package/dist/cjs/salon-booking-modal.cjs.entry.js +30 -0
- package/dist/cjs/salon-booking.cjs.entry.js +51 -0
- package/dist/cjs/salon-gift-card-modal.cjs.entry.js +29 -0
- package/dist/cjs/salon-gift-card.cjs.entry.js +51 -0
- package/dist/cjs/salon-latest-reviews.cjs.entry.js +97 -0
- package/dist/cjs/salon-lookbook.cjs.entry.js +222 -0
- package/dist/cjs/salon-ranking.cjs.entry.js +60 -0
- package/dist/cjs/salon-reviews.cjs.entry.js +193 -0
- package/dist/cjs/salon-services.cjs.entry.js +81 -0
- package/dist/cjs/salon-stylists.cjs.entry.js +118 -0
- package/dist/cjs/services-125c82d8.js +21492 -0
- package/dist/cjs/style-detail.cjs.entry.js +312 -0
- package/dist/cjs/user-avatar.cjs.entry.js +45 -0
- package/dist/cjs/utils-c5a33b3c.js +23 -0
- package/{collection → dist/collection}/collection-manifest.json +5 -4
- package/dist/collection/components/chat-button/index.css +122 -0
- package/dist/collection/components/chat-button/index.js +218 -0
- package/dist/collection/components/chat-conversation/index.js +103 -0
- 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 +90 -0
- package/{collection → dist/collection}/components/salon-booking/index.css +11 -20
- package/dist/collection/components/salon-booking/index.js +126 -0
- package/dist/collection/components/salon-booking/salon-booking-modal.js +92 -0
- package/dist/collection/components/salon-gift-card/index.css +30 -0
- package/dist/collection/components/salon-gift-card/index.js +126 -0
- package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js +73 -0
- package/dist/collection/components/salon-info/index.js +77 -0
- package/dist/collection/components/salon-latest-reviews/index.js +163 -0
- package/dist/collection/components/salon-latest-styles/index.css +12 -0
- package/dist/collection/components/salon-latest-styles/index.js +183 -0
- package/{collection/components/salon-contact → dist/collection/components/salon-locations}/index.css +7 -4
- package/dist/collection/components/salon-locations/index.js +143 -0
- package/dist/collection/components/salon-lookbook/index.css +15 -0
- package/dist/collection/components/salon-lookbook/index.js +368 -0
- package/dist/collection/components/salon-ranking/index.js +117 -0
- package/dist/collection/components/salon-reviews/index.css +18 -0
- package/dist/collection/components/salon-reviews/index.js +249 -0
- package/dist/collection/components/salon-schedules/index.css +18 -0
- package/dist/collection/components/salon-schedules/index.js +167 -0
- package/dist/collection/components/salon-services/index.css +1 -0
- package/dist/collection/components/salon-services/index.js +146 -0
- package/dist/collection/components/salon-stylists/index.js +184 -0
- package/dist/collection/components/style-detail/index.css +76 -0
- package/dist/collection/components/style-detail/index.js +386 -0
- package/dist/collection/components/user-avatar/index.js +134 -0
- package/dist/collection/constants/colors.js +65 -0
- package/dist/collection/mocks/users.js +10 -0
- package/dist/collection/services/services.js +295 -0
- package/dist/collection/types/chat.js +23 -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/dist/collection/types/style.js +128 -0
- package/dist/collection/types/stylist.js +30 -0
- package/dist/collection/types/user.js +10 -0
- package/{custom-elements → dist/custom-elements}/index.d.ts +18 -12
- package/dist/custom-elements/index.js +28340 -0
- package/dist/esm/_commonjsHelpers-098d5b27.js +32 -0
- package/dist/esm/chat-button.entry.js +114 -0
- package/dist/esm/colors-ea36347a.js +67 -0
- package/dist/esm/favesalon-embed.js +19 -0
- package/dist/esm/google-map_5.entry.js +302 -0
- package/{esm/index-2160b80b.js → dist/esm/index-3fae868e.js} +586 -200
- package/dist/esm/index-80523fec.js +4393 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/loader.js +19 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/relativeTime-cd452e6d.js +7 -0
- package/dist/esm/salon-booking-modal.entry.js +26 -0
- package/dist/esm/salon-booking.entry.js +47 -0
- package/dist/esm/salon-gift-card-modal.entry.js +25 -0
- package/dist/esm/salon-gift-card.entry.js +47 -0
- package/dist/esm/salon-latest-reviews.entry.js +93 -0
- package/dist/esm/salon-lookbook.entry.js +218 -0
- package/dist/esm/salon-ranking.entry.js +56 -0
- package/dist/esm/salon-reviews.entry.js +189 -0
- package/dist/esm/salon-services.entry.js +77 -0
- package/dist/esm/salon-stylists.entry.js +114 -0
- package/dist/esm/services-40a3e622.js +21485 -0
- package/dist/esm/style-detail.entry.js +308 -0
- package/dist/esm/user-avatar.entry.js +41 -0
- package/dist/esm/utils-e97485e0.js +19 -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/p-019c5ccd.entry.js +1 -0
- package/dist/favesalon-embed/p-083a8821.entry.js +1 -0
- package/dist/favesalon-embed/p-0d0ed9ea.entry.js +1 -0
- package/dist/favesalon-embed/p-119db8de.entry.js +1 -0
- package/dist/favesalon-embed/p-1432c51b.entry.js +1 -0
- package/dist/favesalon-embed/p-22093506.entry.js +1 -0
- package/dist/favesalon-embed/p-32b314e9.js +2 -0
- package/dist/favesalon-embed/p-47e646f8.js +1 -0
- package/dist/favesalon-embed/p-4a5eca9a.js +6 -0
- package/dist/favesalon-embed/p-58d2e9be.js +1 -0
- package/dist/favesalon-embed/p-71404b6a.entry.js +1 -0
- package/dist/favesalon-embed/p-857c3a61.entry.js +1 -0
- package/dist/favesalon-embed/p-99ec77f7.entry.js +1 -0
- package/dist/favesalon-embed/p-a33331cc.js +1 -0
- package/dist/favesalon-embed/p-b0c3673a.entry.js +1 -0
- package/dist/favesalon-embed/p-b287b1ea.entry.js +1 -0
- package/dist/favesalon-embed/p-b3af7842.entry.js +1 -0
- package/dist/favesalon-embed/p-b630ae68.js +1580 -0
- package/dist/favesalon-embed/p-ce2c1c9a.entry.js +1 -0
- package/dist/favesalon-embed/p-d6083940.js +1 -0
- package/dist/favesalon-embed/p-d9b7ad58.entry.js +1 -0
- package/dist/favesalon-embed/p-fc9a5551.js +6 -0
- package/dist/types/components/chat-button/index.d.ts +24 -0
- package/dist/types/components/google-map/index.d.ts +5 -0
- package/{types → dist/types}/components/salon-booking/salon-booking-modal.d.ts +1 -0
- package/{types → dist/types}/components/salon-gift-card/index.d.ts +2 -1
- package/{types → dist/types}/components/salon-gift-card/salon-gift-card-modal.d.ts +2 -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 +7 -2
- 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.d.ts +82 -41
- package/dist/types/constants/colors.d.ts +65 -0
- package/dist/types/mocks/users.d.ts +10 -0
- package/dist/types/services/services.d.ts +75 -0
- package/{types → dist/types}/stencil-public-runtime.d.ts +85 -11
- package/dist/types/types/chat.d.ts +17 -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/dist/types/types/style.d.ts +88 -0
- package/{types → dist/types}/types/stylist.d.ts +2 -1
- package/{types → dist/types}/types/user.d.ts +2 -2
- package/loader/cdn.js +3 -0
- package/loader/index.cjs.js +3 -0
- package/loader/index.d.ts +21 -0
- package/loader/index.es2017.js +3 -0
- package/loader/index.js +4 -0
- package/loader/package.json +11 -0
- package/package.json +19 -14
- package/readme.md +25 -2
- package/cjs/favesalon-embed.cjs.js +0 -20
- package/cjs/google-map_15.cjs.entry.js +0 -6632
- package/cjs/loader.cjs.js +0 -22
- package/cjs/salon-booking-modal.cjs.entry.js +0 -23
- package/cjs/salon-gift-card-modal.cjs.entry.js +0 -20
- package/collection/components/google-map/index.js +0 -97
- package/collection/components/salon-booking/index.js +0 -103
- package/collection/components/salon-booking/salon-booking-modal.js +0 -82
- package/collection/components/salon-contact/index.js +0 -88
- package/collection/components/salon-gift-card/index.css +0 -25
- package/collection/components/salon-gift-card/index.js +0 -83
- package/collection/components/salon-gift-card/salon-gift-card-modal.js +0 -43
- package/collection/components/salon-info/index.css +0 -3
- package/collection/components/salon-info/index.js +0 -97
- package/collection/components/salon-latest-reviews/index.js +0 -108
- package/collection/components/salon-locations/index.js +0 -80
- package/collection/components/salon-lookbook/index.css +0 -12
- package/collection/components/salon-lookbook/index.js +0 -303
- package/collection/components/salon-ranking/index.js +0 -114
- package/collection/components/salon-reviews/index.js +0 -291
- package/collection/components/salon-schedules/index.css +0 -14
- package/collection/components/salon-schedules/index.js +0 -103
- package/collection/components/salon-services/index.css +0 -0
- package/collection/components/salon-services/index.js +0 -113
- 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/components/user-avatar/index.css +0 -0
- package/collection/components/user-avatar/index.js +0 -127
- package/collection/constants/colors.js +0 -91
- package/collection/services/services.js +0 -203
- package/collection/types/common.js +0 -2
- package/collection/types/salon.js +0 -52
- package/collection/types/style.js +0 -28
- package/collection/types/stylist.js +0 -13
- package/collection/types/user.js +0 -10
- package/custom-elements/index.js +0 -7410
- package/esm/favesalon-embed.js +0 -18
- package/esm/google-map_15.entry.js +0 -6614
- package/esm/loader.js +0 -18
- package/esm/polyfills/css-shim.js +0 -1
- package/esm/salon-booking-modal.entry.js +0 -19
- package/esm/salon-gift-card-modal.entry.js +0 -16
- package/favesalon-embed/favesalon-embed.esm.js +0 -1
- package/favesalon-embed/p-1432ab16.entry.js +0 -1
- package/favesalon-embed/p-2da2ed75.js +0 -1
- package/favesalon-embed/p-4a5eca9a.js +0 -6
- package/favesalon-embed/p-94a0991e.entry.js +0 -1
- package/favesalon-embed/p-f15bcb43.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-reviews/index.d.ts +0 -23
- 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 -24
- package/types/types/common.d.ts +0 -2
- package/types/types/style.d.ts +0 -49
- package/{cjs → dist/cjs}/global-9073d10e.js +0 -0
- package/{cjs → dist/cjs}/index.cjs.js +0 -0
- package/{esm/index.js → dist/collection/components/salon-info/index.css} +0 -0
- package/{collection → dist/collection}/components/salon-latest-reviews/index.css +0 -0
- package/{collection → dist/collection}/components/salon-ranking/index.css +0 -0
- package/{collection → dist/collection}/components/salon-stylists/index.css +0 -0
- package/{collection/components/salon-locations → dist/collection/components/user-avatar}/index.css +0 -0
- package/{collection → dist/collection}/global/global.js +0 -0
- package/{collection → dist/collection}/index.js +0 -0
- package/{collection → dist/collection}/types/service.js +0 -0
- package/{collection → dist/collection}/utils/utils.js +0 -0
- package/{esm → dist/esm}/global-e1089ffd.js +0 -0
- package/{esm → dist/esm}/polyfills/core-js.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/{favesalon-embed → dist/favesalon-embed}/index.esm.js +0 -0
- package/{index.cjs.js → dist/index.cjs.js} +0 -0
- package/{index.js → dist/index.js} +0 -0
- package/{collection/components/salon-reviews/index.css → dist/types/components/chat-conversation/index.d.ts} +0 -0
- package/{types → dist/types}/components/salon-booking/index.d.ts +1 -1
- /package/{types → dist/types}/components/salon-ranking/index.d.ts +0 -0
- /package/{types → dist/types}/components/user-avatar/index.d.ts +0 -0
- /package/{types → dist/types}/index.d.ts +0 -0
- /package/{types → dist/types}/types/service.d.ts +0 -0
- /package/{types → dist/types}/utils/utils.d.ts +0 -0
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h } from '@stencil/core';
|
|
2
|
-
import { Colors } from '../../constants/colors';
|
|
3
|
-
export class SalonRanking {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.height = 16;
|
|
6
|
-
this.width = 16;
|
|
7
|
-
}
|
|
8
|
-
getRankingData(ranking) {
|
|
9
|
-
if (ranking === 5) {
|
|
10
|
-
return {
|
|
11
|
-
color: Colors.Danger,
|
|
12
|
-
text: 'Viral',
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
if (ranking === 4) {
|
|
16
|
-
return {
|
|
17
|
-
color: Colors.Pink03,
|
|
18
|
-
text: 'Advancing',
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
if (ranking === 3) {
|
|
22
|
-
return {
|
|
23
|
-
color: Colors.Orange03,
|
|
24
|
-
text: 'Progressing',
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
if (ranking === 2) {
|
|
28
|
-
return {
|
|
29
|
-
color: Colors.DarkBlue03,
|
|
30
|
-
text: 'Building',
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
return {
|
|
34
|
-
color: Colors.Gray01,
|
|
35
|
-
text: 'Starting',
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
render() {
|
|
39
|
-
const rankingData = this.getRankingData(this.ranking);
|
|
40
|
-
return (h("div", { style: {
|
|
41
|
-
display: 'flex',
|
|
42
|
-
alignItems: 'center',
|
|
43
|
-
justifyContent: 'center',
|
|
44
|
-
width: '100%',
|
|
45
|
-
color: rankingData.color,
|
|
46
|
-
} },
|
|
47
|
-
h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, style: { maxWidth: `${this.width}px`, height: 'auto', marginRight: '8px' } },
|
|
48
|
-
h("path", { d: "M14.9984 14.1273C15.0188 14.2658 14.8369 14.3204 14.7415 14.2251L8.11345 7.6028C6.41272 5.90355 6.42184 3.19468 8.23887 1.76037C9.63972 0.678363 11.7259 0.753791 13.1793 1.96961C14.1899 2.80207 14.706 3.93808 14.7471 5.07223L14.9984 14.1273Z", fill: "currentColor" }),
|
|
49
|
-
h("path", { d: "M1.74847 8.24513C3.18403 6.42967 5.91004 6.40579 7.61078 8.10504L14.2548 14.7432C14.3501 14.8385 14.2795 15.0043 14.1568 14.9999L5.078 14.7329C3.94287 14.6918 2.78997 14.1604 1.97268 13.1665C0.755801 11.7144 0.680308 9.62998 1.74847 8.24513Z", fill: "currentColor" })),
|
|
50
|
-
rankingData.text));
|
|
51
|
-
}
|
|
52
|
-
static get is() { return "salon-ranking"; }
|
|
53
|
-
static get originalStyleUrls() { return {
|
|
54
|
-
"$": ["index.css"]
|
|
55
|
-
}; }
|
|
56
|
-
static get styleUrls() { return {
|
|
57
|
-
"$": ["index.css"]
|
|
58
|
-
}; }
|
|
59
|
-
static get properties() { return {
|
|
60
|
-
"ranking": {
|
|
61
|
-
"type": "number",
|
|
62
|
-
"mutable": false,
|
|
63
|
-
"complexType": {
|
|
64
|
-
"original": "number",
|
|
65
|
-
"resolved": "number",
|
|
66
|
-
"references": {}
|
|
67
|
-
},
|
|
68
|
-
"required": false,
|
|
69
|
-
"optional": false,
|
|
70
|
-
"docs": {
|
|
71
|
-
"tags": [],
|
|
72
|
-
"text": ""
|
|
73
|
-
},
|
|
74
|
-
"attribute": "ranking",
|
|
75
|
-
"reflect": false
|
|
76
|
-
},
|
|
77
|
-
"height": {
|
|
78
|
-
"type": "number",
|
|
79
|
-
"mutable": false,
|
|
80
|
-
"complexType": {
|
|
81
|
-
"original": "number",
|
|
82
|
-
"resolved": "number",
|
|
83
|
-
"references": {}
|
|
84
|
-
},
|
|
85
|
-
"required": false,
|
|
86
|
-
"optional": true,
|
|
87
|
-
"docs": {
|
|
88
|
-
"tags": [],
|
|
89
|
-
"text": ""
|
|
90
|
-
},
|
|
91
|
-
"attribute": "height",
|
|
92
|
-
"reflect": false,
|
|
93
|
-
"defaultValue": "16"
|
|
94
|
-
},
|
|
95
|
-
"width": {
|
|
96
|
-
"type": "number",
|
|
97
|
-
"mutable": false,
|
|
98
|
-
"complexType": {
|
|
99
|
-
"original": "number",
|
|
100
|
-
"resolved": "number",
|
|
101
|
-
"references": {}
|
|
102
|
-
},
|
|
103
|
-
"required": false,
|
|
104
|
-
"optional": true,
|
|
105
|
-
"docs": {
|
|
106
|
-
"tags": [],
|
|
107
|
-
"text": ""
|
|
108
|
-
},
|
|
109
|
-
"attribute": "width",
|
|
110
|
-
"reflect": false,
|
|
111
|
-
"defaultValue": "16"
|
|
112
|
-
}
|
|
113
|
-
}; }
|
|
114
|
-
}
|
|
@@ -1,291 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h, Method, State } from '@stencil/core';
|
|
2
|
-
import dayjs from 'dayjs';
|
|
3
|
-
import groupBy from 'lodash/groupBy';
|
|
4
|
-
import sortBy from 'lodash/sortBy';
|
|
5
|
-
import { Colors } from '../../constants/colors';
|
|
6
|
-
import { getRatingText } from '../../utils/utils';
|
|
7
|
-
import { shortDate } from '../../types/common';
|
|
8
|
-
import HttpService from '../../services/services';
|
|
9
|
-
const pageLimited = 10;
|
|
10
|
-
const sortOptions = [{
|
|
11
|
-
value: 'newest',
|
|
12
|
-
label: 'Newest first',
|
|
13
|
-
}, {
|
|
14
|
-
value: 'oldest',
|
|
15
|
-
label: 'Oldest first',
|
|
16
|
-
}, {
|
|
17
|
-
value: 'rating_desc',
|
|
18
|
-
label: 'High rating first',
|
|
19
|
-
}, {
|
|
20
|
-
value: 'rating_asc',
|
|
21
|
-
label: 'Low rating first',
|
|
22
|
-
}];
|
|
23
|
-
const scoreValuesMapping = {
|
|
24
|
-
all: 'all',
|
|
25
|
-
star1: 1,
|
|
26
|
-
star2: 2,
|
|
27
|
-
star3: 3,
|
|
28
|
-
star4: 4,
|
|
29
|
-
star5: 5,
|
|
30
|
-
};
|
|
31
|
-
export class SalonReviews {
|
|
32
|
-
constructor() {
|
|
33
|
-
this.totalReviews = 0;
|
|
34
|
-
this.salonReviews = [];
|
|
35
|
-
this.pageOffset = pageLimited;
|
|
36
|
-
this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
|
|
37
|
-
this.sorting = sortOptions[0].value;
|
|
38
|
-
this.renderReviewsList = () => {
|
|
39
|
-
const ratingTexts = getRatingText();
|
|
40
|
-
const filteredReviews = this.getFilteredReviews(this.pageOffset);
|
|
41
|
-
const filteredReviewsCount = this.ratings.indexOf(scoreValuesMapping.all) > -1
|
|
42
|
-
? this.totalReviews : filteredReviews.length;
|
|
43
|
-
return (h("div", { class: "reviews-list" },
|
|
44
|
-
h("div", { class: "reviews-list--header", style: {
|
|
45
|
-
display: 'flex',
|
|
46
|
-
flexDirection: 'row',
|
|
47
|
-
justifyContent: 'space-between',
|
|
48
|
-
alignItems: 'center',
|
|
49
|
-
marginBottom: '24px',
|
|
50
|
-
} },
|
|
51
|
-
h("div", { class: "reviews-list--couter", style: { fontWeight: 'bold' } },
|
|
52
|
-
filteredReviewsCount,
|
|
53
|
-
" ",
|
|
54
|
-
filteredReviewsCount === 1 ? `review` : `reviews`),
|
|
55
|
-
h("div", { class: "reviews-list--sorting", style: {
|
|
56
|
-
display: 'flex',
|
|
57
|
-
flexDirection: 'row',
|
|
58
|
-
alignItems: 'center',
|
|
59
|
-
} },
|
|
60
|
-
h("label", { style: { marginRight: '8px' } }, "Sort by"),
|
|
61
|
-
h("select", { class: "form-select", style: { width: '160px' }, onChange: (evt) => this.onChangeSorting(evt.target.value) }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sorting }, sortOption.label)))))),
|
|
62
|
-
h("div", { class: "view-content" }, filteredReviewsCount > 0 && filteredReviews.map(review => {
|
|
63
|
-
const { user } = review;
|
|
64
|
-
return (h("div", { class: "salon-review", style: {
|
|
65
|
-
marginBottom: '24px',
|
|
66
|
-
paddingBottom: '24px',
|
|
67
|
-
borderBottom: `1px solid ${Colors.Gray05}`,
|
|
68
|
-
} },
|
|
69
|
-
h("div", { class: "salon-review--user", style: { marginBottom: '24px' } },
|
|
70
|
-
h("user-avatar", { size: 48, avatar: user.avatar, name: user.name, shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })),
|
|
71
|
-
h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } },
|
|
72
|
-
[1, 2, 3, 4, 5].map(score => (h("i", { class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
|
|
73
|
-
fontSize: '16px',
|
|
74
|
-
marginRight: '4px',
|
|
75
|
-
} }))),
|
|
76
|
-
review.createdDate && (h("div", { class: "salon-review--rating--date", style: { color: Colors.Gray03, marginLeft: '16px' } }, dayjs(review.createdDate).format(shortDate)))),
|
|
77
|
-
h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: 'bold' } }, ratingTexts[review.point]),
|
|
78
|
-
(review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '24px' } },
|
|
79
|
-
h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }),
|
|
80
|
-
h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))),
|
|
81
|
-
review.photos.length > 0 && (h("div", { style: {
|
|
82
|
-
display: 'flex',
|
|
83
|
-
flexDirection: 'row',
|
|
84
|
-
overflowX: 'auto',
|
|
85
|
-
} }, review.photos.map(fileObj => (h("div", { style: {
|
|
86
|
-
border: '1px solid #d9d9d9',
|
|
87
|
-
position: 'relative',
|
|
88
|
-
cursor: 'pointer',
|
|
89
|
-
borderRadius: '2px',
|
|
90
|
-
height: '66px',
|
|
91
|
-
marginTop: '16px',
|
|
92
|
-
marginRight: '16px',
|
|
93
|
-
} },
|
|
94
|
-
h("img", { alt: "", src: fileObj.imageUrlThumb, height: "64", style: { width: 'auto' } }))))))));
|
|
95
|
-
})),
|
|
96
|
-
this.canLoadMore && (h("div", { class: "view-footer", style: { textAlign: 'center' } },
|
|
97
|
-
h("button", { type: "button", class: "btn btn-light", onClick: () => this.onLoadMore() }, this.isLoadingMore ? 'Loading' : 'Load more')))));
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
componentWillLoad() {
|
|
101
|
-
this.fetchData();
|
|
102
|
-
}
|
|
103
|
-
fetchData() {
|
|
104
|
-
try {
|
|
105
|
-
const promises = [
|
|
106
|
-
HttpService().fetchSalonInfo(this.salonId).then(salonInfo => this.salonInfo = salonInfo),
|
|
107
|
-
HttpService().fetchSalonReviews(this.salonId, { limit: pageLimited }).then(response => {
|
|
108
|
-
const { total, allItems } = response;
|
|
109
|
-
this.totalReviews = total;
|
|
110
|
-
this.salonReviews = allItems;
|
|
111
|
-
if (total > pageLimited) {
|
|
112
|
-
this.canLoadMore = true;
|
|
113
|
-
}
|
|
114
|
-
}),
|
|
115
|
-
];
|
|
116
|
-
return Promise.all(promises);
|
|
117
|
-
}
|
|
118
|
-
catch (e) { }
|
|
119
|
-
}
|
|
120
|
-
sortReviews(filteredReviews) {
|
|
121
|
-
return sortBy(filteredReviews, [review => {
|
|
122
|
-
if (this.sorting === 'rating_desc') {
|
|
123
|
-
return -review.point;
|
|
124
|
-
}
|
|
125
|
-
if (this.sorting === 'rating_asc') {
|
|
126
|
-
return review.point;
|
|
127
|
-
}
|
|
128
|
-
const createdTime = dayjs(review.createdDate).unix();
|
|
129
|
-
return this.sorting === 'oldest' ? createdTime : -createdTime;
|
|
130
|
-
}]);
|
|
131
|
-
}
|
|
132
|
-
getFilteredReviews(pageOffset) {
|
|
133
|
-
let filteredReviews = [...this.salonReviews];
|
|
134
|
-
if (this.ratings.indexOf(scoreValuesMapping.all) === -1) {
|
|
135
|
-
const reviewRatingScores = this.ratings.map(r => scoreValuesMapping[r]);
|
|
136
|
-
filteredReviews = [...filteredReviews].filter(review => reviewRatingScores.indexOf(review.point) > -1);
|
|
137
|
-
}
|
|
138
|
-
const sortedReviews = this.sortReviews(filteredReviews);
|
|
139
|
-
return pageOffset ? sortedReviews.slice(0, pageOffset) : sortedReviews;
|
|
140
|
-
}
|
|
141
|
-
onLoadMore() {
|
|
142
|
-
this.isLoadingMore = true;
|
|
143
|
-
try {
|
|
144
|
-
this.pageOffset += pageLimited;
|
|
145
|
-
const totalResults = this.getFilteredReviews(this.pageOffset).length;
|
|
146
|
-
if (this.pageOffset > totalResults) {
|
|
147
|
-
this.canLoadMore = false;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
catch (error) { }
|
|
151
|
-
this.isLoadingMore = false;
|
|
152
|
-
}
|
|
153
|
-
onChangeSorting(sorting) {
|
|
154
|
-
this.sorting = sorting;
|
|
155
|
-
this.pageOffset = pageLimited;
|
|
156
|
-
this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
|
|
157
|
-
}
|
|
158
|
-
;
|
|
159
|
-
onChangeFilterRating(rating) {
|
|
160
|
-
if (rating === scoreValuesMapping.all) {
|
|
161
|
-
this.ratings = [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5'];
|
|
162
|
-
}
|
|
163
|
-
else if (this.ratings.indexOf(rating) > -1) {
|
|
164
|
-
this.ratings = this.ratings.filter(r => r !== scoreValuesMapping.all && r !== rating);
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
const needFilterByAll = this.ratings.concat([rating]).filter(r => r !== scoreValuesMapping.all).length === 5;
|
|
168
|
-
this.ratings = needFilterByAll
|
|
169
|
-
? [scoreValuesMapping.all, 'star1', 'star2', 'star3', 'star4', 'star5']
|
|
170
|
-
: this.ratings.concat([rating]);
|
|
171
|
-
}
|
|
172
|
-
this.pageOffset = pageLimited;
|
|
173
|
-
this.canLoadMore = this.getFilteredReviews(pageLimited).length >= pageLimited;
|
|
174
|
-
}
|
|
175
|
-
;
|
|
176
|
-
renderReviewsFilters() {
|
|
177
|
-
const reviewsByScore = groupBy(this.salonReviews, review => review.point);
|
|
178
|
-
return (h("div", { class: "salon-reviews--filters-by-ratings" },
|
|
179
|
-
h("div", { style: {
|
|
180
|
-
fontWeight: 'bold',
|
|
181
|
-
marginBottom: '12px',
|
|
182
|
-
marginTop: '32px',
|
|
183
|
-
} }, "Filter by ratings"),
|
|
184
|
-
h("div", { class: "salon-reviews--filters-by-ratings--options" },
|
|
185
|
-
h("div", { class: "antd-checkbox--wrapper", style: { marginBottom: '12px' } },
|
|
186
|
-
h("div", { class: "antd-checkbox--box" },
|
|
187
|
-
h("div", { class: "form-check" },
|
|
188
|
-
h("input", { type: "checkbox", class: "form-check-input", value: scoreValuesMapping.all, onChange: () => this.onChangeFilterRating(scoreValuesMapping.all), checked: this.ratings.indexOf(scoreValuesMapping.all) > -1 }),
|
|
189
|
-
h("label", { class: "form-check-label" }, "All ratings")))),
|
|
190
|
-
[5, 4, 3, 2, 1].filter(score => reviewsByScore[score]).map(score => {
|
|
191
|
-
const scoreReviewCount = reviewsByScore[score].length;
|
|
192
|
-
return (h("div", { style: {
|
|
193
|
-
display: 'flex',
|
|
194
|
-
flexDirection: 'row',
|
|
195
|
-
justifyContent: 'space-between',
|
|
196
|
-
marginBottom: '12px',
|
|
197
|
-
} },
|
|
198
|
-
h("div", { class: "form-check" },
|
|
199
|
-
h("input", { value: "", type: "checkbox", class: "form-check-input", onChange: () => this.onChangeFilterRating(`star${score}`), checked: this.ratings.indexOf(scoreValuesMapping.all) > -1 || this.ratings.indexOf(`star${score}`) > -1 }),
|
|
200
|
-
h("label", { class: "form-check-label" }, [1, 2, 3, 4, 5].slice(0, score).map(() => (h("i", { class: "ri-heart-fill", style: {
|
|
201
|
-
fontSize: '16px',
|
|
202
|
-
marginRight: '4px',
|
|
203
|
-
} }))))),
|
|
204
|
-
h("div", { style: { color: Colors.Gray01 } }, scoreReviewCount)));
|
|
205
|
-
}))));
|
|
206
|
-
}
|
|
207
|
-
render() {
|
|
208
|
-
const { rating } = this.salonInfo || {};
|
|
209
|
-
return (h("div", { class: "salon-reviews", style: { display: 'flex', flexDirection: 'row' } },
|
|
210
|
-
h("div", { class: "salon-reviews--filters", style: { width: '264px' } },
|
|
211
|
-
h("div", { class: "salon-reviews--score" },
|
|
212
|
-
h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => (h("i", { class: score <= rating ? 'ri-heart-fill' : 'ri-heart-line', style: {
|
|
213
|
-
fontSize: '32px',
|
|
214
|
-
marginRight: '4px',
|
|
215
|
-
} })))),
|
|
216
|
-
h("div", { class: "salon-review--rating--date", style: {
|
|
217
|
-
display: 'flex',
|
|
218
|
-
flexDirection: 'row',
|
|
219
|
-
alignItems: 'center',
|
|
220
|
-
marginTop: '-8px',
|
|
221
|
-
} },
|
|
222
|
-
h("span", { style: { fontSize: '24px' } },
|
|
223
|
-
rating,
|
|
224
|
-
"/5"),
|
|
225
|
-
" ",
|
|
226
|
-
h("span", { style: { color: Colors.Gray02, marginLeft: '8px' } },
|
|
227
|
-
"(",
|
|
228
|
-
this.totalReviews,
|
|
229
|
-
" reviews)"))),
|
|
230
|
-
h("div", { class: "salon-reviews--filters--options" }, this.renderReviewsFilters())),
|
|
231
|
-
h("div", { class: "salon-reviews--list", style: {
|
|
232
|
-
flexGrow: '1',
|
|
233
|
-
flexShrink: '1',
|
|
234
|
-
paddingLeft: '64px',
|
|
235
|
-
} }, this.renderReviewsList())));
|
|
236
|
-
}
|
|
237
|
-
static get is() { return "salon-reviews"; }
|
|
238
|
-
static get originalStyleUrls() { return {
|
|
239
|
-
"$": ["index.css"]
|
|
240
|
-
}; }
|
|
241
|
-
static get styleUrls() { return {
|
|
242
|
-
"$": ["index.css"]
|
|
243
|
-
}; }
|
|
244
|
-
static get properties() { return {
|
|
245
|
-
"salonId": {
|
|
246
|
-
"type": "number",
|
|
247
|
-
"mutable": false,
|
|
248
|
-
"complexType": {
|
|
249
|
-
"original": "number",
|
|
250
|
-
"resolved": "number",
|
|
251
|
-
"references": {}
|
|
252
|
-
},
|
|
253
|
-
"required": false,
|
|
254
|
-
"optional": false,
|
|
255
|
-
"docs": {
|
|
256
|
-
"tags": [],
|
|
257
|
-
"text": ""
|
|
258
|
-
},
|
|
259
|
-
"attribute": "salon-id",
|
|
260
|
-
"reflect": false
|
|
261
|
-
}
|
|
262
|
-
}; }
|
|
263
|
-
static get states() { return {
|
|
264
|
-
"salonInfo": {},
|
|
265
|
-
"totalReviews": {},
|
|
266
|
-
"salonReviews": {},
|
|
267
|
-
"canLoadMore": {},
|
|
268
|
-
"isLoadingMore": {},
|
|
269
|
-
"pageOffset": {},
|
|
270
|
-
"ratings": {},
|
|
271
|
-
"sorting": {}
|
|
272
|
-
}; }
|
|
273
|
-
static get methods() { return {
|
|
274
|
-
"fetchData": {
|
|
275
|
-
"complexType": {
|
|
276
|
-
"signature": "() => Promise<any[]>",
|
|
277
|
-
"parameters": [],
|
|
278
|
-
"references": {
|
|
279
|
-
"Promise": {
|
|
280
|
-
"location": "global"
|
|
281
|
-
}
|
|
282
|
-
},
|
|
283
|
-
"return": "Promise<any[]>"
|
|
284
|
-
},
|
|
285
|
-
"docs": {
|
|
286
|
-
"text": "",
|
|
287
|
-
"tags": []
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}; }
|
|
291
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
@media (min-width: 768px) {
|
|
2
|
-
.salon-schedules--dates {
|
|
3
|
-
overflow: hidden;
|
|
4
|
-
margin-left: -32px;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.salon-schedules--dates .salon-schedules--day {
|
|
8
|
-
float: left;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: row;
|
|
11
|
-
min-width: 240px;
|
|
12
|
-
padding-left: 32px;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h, State } from '@stencil/core';
|
|
2
|
-
import { BusinessHourStatus } from '../../types/salon';
|
|
3
|
-
import HttpService from '../../services/services';
|
|
4
|
-
export class SalonSchedules {
|
|
5
|
-
componentWillLoad() {
|
|
6
|
-
if (this.salonInfo) {
|
|
7
|
-
this.salonInfoState = JSON.parse(this.salonInfo);
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
this.fetchData();
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
fetchData() {
|
|
14
|
-
try {
|
|
15
|
-
HttpService().fetchSalonInfo(this.salonId)
|
|
16
|
-
.then(salonInfo => this.salonInfoState = salonInfo);
|
|
17
|
-
}
|
|
18
|
-
catch (e) { }
|
|
19
|
-
}
|
|
20
|
-
renderBusinessHour(businessHour) {
|
|
21
|
-
if (businessHour.status === BusinessHourStatus.ByAppointment) {
|
|
22
|
-
return 'By Appointment';
|
|
23
|
-
}
|
|
24
|
-
if (businessHour.status === BusinessHourStatus.Close) {
|
|
25
|
-
return 'Close';
|
|
26
|
-
}
|
|
27
|
-
return `${businessHour.openTime} - ${businessHour.closeTime}`;
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
const businessHours = (this.salonInfoState && this.salonInfoState.businessHours) || [];
|
|
31
|
-
return (h("div", { class: "view view--salon-schedules" },
|
|
32
|
-
h("div", { class: "view-content" }, businessHours.length > 0 && (h("div", { class: "salon-schedules" },
|
|
33
|
-
h("div", { class: "salon-schedules--title", style: { fontSize: '16px', fontWeight: 'bold' } }, "Working hours"),
|
|
34
|
-
h("div", { class: "salon-schedules--dates" },
|
|
35
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
36
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Mon"),
|
|
37
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[0]))),
|
|
38
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
39
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Tue"),
|
|
40
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[1]))),
|
|
41
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
42
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Wed"),
|
|
43
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[2]))),
|
|
44
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
45
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Thur"),
|
|
46
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[3]))),
|
|
47
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
48
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Fri"),
|
|
49
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[4]))),
|
|
50
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
51
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sat"),
|
|
52
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[5]))),
|
|
53
|
-
h("div", { class: "salon-schedules--day", style: { marginTop: '8px' } },
|
|
54
|
-
h("div", { class: "salon-schedules--day-name", style: { fontWeight: 'bold', minWidth: '40px' } }, "Sun"),
|
|
55
|
-
h("div", { class: "salon-schedules--day-time" }, this.renderBusinessHour(businessHours[6])))))))));
|
|
56
|
-
}
|
|
57
|
-
static get is() { return "salon-schedules"; }
|
|
58
|
-
static get originalStyleUrls() { return {
|
|
59
|
-
"$": ["index.css"]
|
|
60
|
-
}; }
|
|
61
|
-
static get styleUrls() { return {
|
|
62
|
-
"$": ["index.css"]
|
|
63
|
-
}; }
|
|
64
|
-
static get properties() { return {
|
|
65
|
-
"salonId": {
|
|
66
|
-
"type": "number",
|
|
67
|
-
"mutable": false,
|
|
68
|
-
"complexType": {
|
|
69
|
-
"original": "number",
|
|
70
|
-
"resolved": "number",
|
|
71
|
-
"references": {}
|
|
72
|
-
},
|
|
73
|
-
"required": false,
|
|
74
|
-
"optional": false,
|
|
75
|
-
"docs": {
|
|
76
|
-
"tags": [],
|
|
77
|
-
"text": ""
|
|
78
|
-
},
|
|
79
|
-
"attribute": "salon-id",
|
|
80
|
-
"reflect": false
|
|
81
|
-
},
|
|
82
|
-
"salonInfo": {
|
|
83
|
-
"type": "string",
|
|
84
|
-
"mutable": false,
|
|
85
|
-
"complexType": {
|
|
86
|
-
"original": "string",
|
|
87
|
-
"resolved": "string",
|
|
88
|
-
"references": {}
|
|
89
|
-
},
|
|
90
|
-
"required": false,
|
|
91
|
-
"optional": true,
|
|
92
|
-
"docs": {
|
|
93
|
-
"tags": [],
|
|
94
|
-
"text": ""
|
|
95
|
-
},
|
|
96
|
-
"attribute": "salon-info",
|
|
97
|
-
"reflect": false
|
|
98
|
-
}
|
|
99
|
-
}; }
|
|
100
|
-
static get states() { return {
|
|
101
|
-
"salonInfoState": {}
|
|
102
|
-
}; }
|
|
103
|
-
}
|
|
File without changes
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Component, Prop, h, Method, State } from '@stencil/core';
|
|
2
|
-
import sortBy from 'lodash/sortBy';
|
|
3
|
-
import { Colors } from '../../constants/colors';
|
|
4
|
-
import HttpService from '../../services/services';
|
|
5
|
-
export class SalonServices {
|
|
6
|
-
constructor() {
|
|
7
|
-
this.buttonClass = 'btn btn-light';
|
|
8
|
-
}
|
|
9
|
-
componentWillLoad() {
|
|
10
|
-
this.fetchData();
|
|
11
|
-
}
|
|
12
|
-
async fetchData() {
|
|
13
|
-
try {
|
|
14
|
-
this.salonServices = await HttpService().fetchSalonServices(this.salonId);
|
|
15
|
-
}
|
|
16
|
-
catch (e) { }
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return (h("div", { class: "salon-services--container" },
|
|
20
|
-
h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray05}` } },
|
|
21
|
-
h("div", { class: "view-content", style: { overflowX: 'auto' } },
|
|
22
|
-
h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` },
|
|
23
|
-
h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))),
|
|
24
|
-
sortBy(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
|
|
25
|
-
const hasMultipleCates = (serviceGroup.data || []).length > 1;
|
|
26
|
-
return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } },
|
|
27
|
-
h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name),
|
|
28
|
-
h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray05}` } },
|
|
29
|
-
h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" },
|
|
30
|
-
hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray06}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)),
|
|
31
|
-
(subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" },
|
|
32
|
-
h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
|
|
33
|
-
marginTop: '12px',
|
|
34
|
-
paddingTop: '12px',
|
|
35
|
-
borderTop: `1px solid ${Colors.Gray06}`,
|
|
36
|
-
} : {}) }, service.name),
|
|
37
|
-
(!service.hideDuration || !service.hidePrice) && (h("div", { style: {
|
|
38
|
-
display: 'block',
|
|
39
|
-
marginTop: '4px',
|
|
40
|
-
opacity: '0.75',
|
|
41
|
-
fontSize: '90%',
|
|
42
|
-
} }, [
|
|
43
|
-
!service.hideDuration ? `${service.duration} mins` : '',
|
|
44
|
-
!service.hidePrice ? `$${service.price}` : '',
|
|
45
|
-
].filter(field => !!field).join(' · ')))))))))))));
|
|
46
|
-
})));
|
|
47
|
-
}
|
|
48
|
-
static get is() { return "salon-services"; }
|
|
49
|
-
static get originalStyleUrls() { return {
|
|
50
|
-
"$": ["index.css"]
|
|
51
|
-
}; }
|
|
52
|
-
static get styleUrls() { return {
|
|
53
|
-
"$": ["index.css"]
|
|
54
|
-
}; }
|
|
55
|
-
static get properties() { return {
|
|
56
|
-
"salonId": {
|
|
57
|
-
"type": "number",
|
|
58
|
-
"mutable": false,
|
|
59
|
-
"complexType": {
|
|
60
|
-
"original": "number",
|
|
61
|
-
"resolved": "number",
|
|
62
|
-
"references": {}
|
|
63
|
-
},
|
|
64
|
-
"required": false,
|
|
65
|
-
"optional": false,
|
|
66
|
-
"docs": {
|
|
67
|
-
"tags": [],
|
|
68
|
-
"text": ""
|
|
69
|
-
},
|
|
70
|
-
"attribute": "salon-id",
|
|
71
|
-
"reflect": false
|
|
72
|
-
},
|
|
73
|
-
"buttonClass": {
|
|
74
|
-
"type": "string",
|
|
75
|
-
"mutable": false,
|
|
76
|
-
"complexType": {
|
|
77
|
-
"original": "string",
|
|
78
|
-
"resolved": "string",
|
|
79
|
-
"references": {}
|
|
80
|
-
},
|
|
81
|
-
"required": false,
|
|
82
|
-
"optional": false,
|
|
83
|
-
"docs": {
|
|
84
|
-
"tags": [],
|
|
85
|
-
"text": ""
|
|
86
|
-
},
|
|
87
|
-
"attribute": "button-class",
|
|
88
|
-
"reflect": false,
|
|
89
|
-
"defaultValue": "'btn btn-light'"
|
|
90
|
-
}
|
|
91
|
-
}; }
|
|
92
|
-
static get states() { return {
|
|
93
|
-
"salonServices": {}
|
|
94
|
-
}; }
|
|
95
|
-
static get methods() { return {
|
|
96
|
-
"fetchData": {
|
|
97
|
-
"complexType": {
|
|
98
|
-
"signature": "() => Promise<void>",
|
|
99
|
-
"parameters": [],
|
|
100
|
-
"references": {
|
|
101
|
-
"Promise": {
|
|
102
|
-
"location": "global"
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
"return": "Promise<void>"
|
|
106
|
-
},
|
|
107
|
-
"docs": {
|
|
108
|
-
"text": "",
|
|
109
|
-
"tags": []
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}; }
|
|
113
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.salon-styles--item-background {
|
|
2
|
-
-moz-filter: blur(32px);
|
|
3
|
-
-webkit-filter: blur(32px);
|
|
4
|
-
filter: blur(32px);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.salon-styles--item .salon-styles--item-background {
|
|
8
|
-
z-index: 1;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.salon-styles--item .salon-styles--item-image {
|
|
12
|
-
position: relative;
|
|
13
|
-
z-index: 2;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.salon-styles--item .carousel-caption {
|
|
17
|
-
padding-bottom: 0;
|
|
18
|
-
z-index: 2;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.salon-styles--slides .carousel-control-prev {
|
|
22
|
-
z-index: 2;
|
|
23
|
-
}
|