favesalon-embed 1.0.1 → 1.0.2

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.
Files changed (156) hide show
  1. package/dist/custom-elements/index.d.ts +12 -0
  2. package/dist/{cjs/_commonjsHelpers-5cfcba41.js → favesalon-embed/_commonjsHelpers-a4f66ccd.js} +14 -6
  3. package/dist/{cjs/global-9073d10e.js → favesalon-embed/app-globals-15861a7f.js} +15 -8
  4. package/dist/{esm/global-e1089ffd.js → favesalon-embed/app-globals-270fe240.js} +16 -7
  5. package/dist/favesalon-embed/app-globals-437cc3f3.js +712 -0
  6. package/dist/favesalon-embed/app-globals-b8b0fc7a.js +712 -0
  7. package/dist/favesalon-embed/chat-button.entry.js +56 -0
  8. package/dist/favesalon-embed/chat-form.entry.js +39 -0
  9. package/dist/favesalon-embed/chat-messages.entry.js +51 -0
  10. package/dist/favesalon-embed/css-shim-b7d3d95f.js +4 -0
  11. package/dist/favesalon-embed/dom-64053c71.js +73 -0
  12. package/dist/favesalon-embed/favesalon-embed.css +2433 -4
  13. package/dist/favesalon-embed/favesalon-embed.esm.js +148 -1
  14. package/dist/{collection/components/google-map/index.js → favesalon-embed/google-map.entry.js} +12 -54
  15. package/dist/{esm/index-80523fec.js → favesalon-embed/index-00b83e1c.js} +425 -15
  16. package/dist/favesalon-embed/index-888e99e3.js +3371 -0
  17. package/dist/favesalon-embed/index-9ad82b12.js +3371 -0
  18. package/dist/favesalon-embed/index-aa906326.js +3371 -0
  19. package/dist/favesalon-embed/index-b97af793.js +3371 -0
  20. package/dist/favesalon-embed/index.esm.js +1 -0
  21. package/dist/favesalon-embed/relativeTime-268e64b0.js +7 -0
  22. package/dist/{esm → favesalon-embed}/salon-booking-modal.entry.js +1 -1
  23. package/dist/{esm → favesalon-embed}/salon-booking.entry.js +3 -3
  24. package/dist/{esm → favesalon-embed}/salon-gift-card-modal.entry.js +1 -1
  25. package/dist/{esm → favesalon-embed}/salon-gift-card.entry.js +3 -3
  26. package/dist/favesalon-embed/salon-info.entry.js +29 -0
  27. package/dist/{esm → favesalon-embed}/salon-latest-reviews.entry.js +4 -4
  28. package/dist/{collection/components/salon-latest-styles/index.js → favesalon-embed/salon-latest-styles.entry.js} +14 -99
  29. package/dist/{collection/components/salon-locations/index.js → favesalon-embed/salon-locations.entry.js} +15 -95
  30. package/dist/{esm → favesalon-embed}/salon-lookbook.entry.js +3 -3
  31. package/dist/{esm → favesalon-embed}/salon-ranking.entry.js +1 -1
  32. package/dist/{esm → favesalon-embed}/salon-reviews.entry.js +3 -3
  33. package/dist/{collection/components/salon-schedules/index.js → favesalon-embed/salon-schedules.entry.js} +14 -95
  34. package/dist/{esm → favesalon-embed}/salon-services.entry.js +3 -3
  35. package/dist/{esm → favesalon-embed}/salon-stylists.entry.js +3 -3
  36. package/dist/{esm/services-40a3e622.js → favesalon-embed/services-7cb8f2a6.js} +2469 -100
  37. package/dist/favesalon-embed/shadow-css-98135883.js +387 -0
  38. package/dist/{esm → favesalon-embed}/style-detail.entry.js +4 -4
  39. package/dist/{esm → favesalon-embed}/user-avatar.entry.js +2 -1
  40. package/dist/{esm/utils-e97485e0.js → favesalon-embed/utils-7de9628a.js} +3 -0
  41. package/dist/types/components/chat-button/index.d.ts +0 -8
  42. package/dist/types/components/chat-form/index.d.ts +6 -0
  43. package/dist/types/components/chat-messages/index.d.ts +14 -0
  44. package/dist/types/components.d.ts +40 -0
  45. package/package.json +1 -1
  46. package/dist/cjs/chat-button.cjs.entry.js +0 -118
  47. package/dist/cjs/colors-38421769.js +0 -69
  48. package/dist/cjs/favesalon-embed.cjs.js +0 -24
  49. package/dist/cjs/google-map_5.cjs.entry.js +0 -310
  50. package/dist/cjs/index-47c2a5f6.js +0 -1533
  51. package/dist/cjs/index-7f190886.js +0 -4396
  52. package/dist/cjs/index.cjs.js +0 -2
  53. package/dist/cjs/loader.cjs.js +0 -23
  54. package/dist/cjs/relativeTime-3721080d.js +0 -9
  55. package/dist/cjs/salon-booking-modal.cjs.entry.js +0 -30
  56. package/dist/cjs/salon-booking.cjs.entry.js +0 -51
  57. package/dist/cjs/salon-gift-card-modal.cjs.entry.js +0 -29
  58. package/dist/cjs/salon-gift-card.cjs.entry.js +0 -51
  59. package/dist/cjs/salon-latest-reviews.cjs.entry.js +0 -97
  60. package/dist/cjs/salon-lookbook.cjs.entry.js +0 -222
  61. package/dist/cjs/salon-ranking.cjs.entry.js +0 -60
  62. package/dist/cjs/salon-reviews.cjs.entry.js +0 -193
  63. package/dist/cjs/salon-services.cjs.entry.js +0 -81
  64. package/dist/cjs/salon-stylists.cjs.entry.js +0 -118
  65. package/dist/cjs/services-125c82d8.js +0 -21492
  66. package/dist/cjs/style-detail.cjs.entry.js +0 -312
  67. package/dist/cjs/user-avatar.cjs.entry.js +0 -45
  68. package/dist/cjs/utils-c5a33b3c.js +0 -23
  69. package/dist/collection/collection-manifest.json +0 -29
  70. package/dist/collection/components/chat-button/index.css +0 -122
  71. package/dist/collection/components/chat-button/index.js +0 -218
  72. package/dist/collection/components/chat-conversation/index.js +0 -103
  73. package/dist/collection/components/google-map/assets/map--placeholder.jpeg +0 -0
  74. package/dist/collection/components/google-map/index.css +0 -5
  75. package/dist/collection/components/salon-booking/index.css +0 -30
  76. package/dist/collection/components/salon-booking/index.js +0 -126
  77. package/dist/collection/components/salon-booking/salon-booking-modal.js +0 -92
  78. package/dist/collection/components/salon-gift-card/index.css +0 -30
  79. package/dist/collection/components/salon-gift-card/index.js +0 -126
  80. package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js +0 -73
  81. package/dist/collection/components/salon-info/index.css +0 -1
  82. package/dist/collection/components/salon-info/index.js +0 -77
  83. package/dist/collection/components/salon-latest-reviews/index.css +0 -11
  84. package/dist/collection/components/salon-latest-reviews/index.js +0 -163
  85. package/dist/collection/components/salon-latest-styles/index.css +0 -12
  86. package/dist/collection/components/salon-locations/index.css +0 -24
  87. package/dist/collection/components/salon-lookbook/index.css +0 -15
  88. package/dist/collection/components/salon-lookbook/index.js +0 -368
  89. package/dist/collection/components/salon-ranking/index.css +0 -3
  90. package/dist/collection/components/salon-ranking/index.js +0 -117
  91. package/dist/collection/components/salon-reviews/index.css +0 -18
  92. package/dist/collection/components/salon-reviews/index.js +0 -249
  93. package/dist/collection/components/salon-schedules/index.css +0 -18
  94. package/dist/collection/components/salon-services/index.css +0 -1
  95. package/dist/collection/components/salon-services/index.js +0 -146
  96. package/dist/collection/components/salon-stylists/index.css +0 -43
  97. package/dist/collection/components/salon-stylists/index.js +0 -184
  98. package/dist/collection/components/style-detail/index.css +0 -76
  99. package/dist/collection/components/style-detail/index.js +0 -386
  100. package/dist/collection/components/user-avatar/index.css +0 -0
  101. package/dist/collection/components/user-avatar/index.js +0 -134
  102. package/dist/collection/constants/colors.js +0 -65
  103. package/dist/collection/global/global.js +0 -8
  104. package/dist/collection/index.js +0 -1
  105. package/dist/collection/mocks/users.js +0 -10
  106. package/dist/collection/services/services.js +0 -295
  107. package/dist/collection/types/chat.js +0 -23
  108. package/dist/collection/types/common.js +0 -11
  109. package/dist/collection/types/review.js +0 -39
  110. package/dist/collection/types/salon.js +0 -58
  111. package/dist/collection/types/service.js +0 -24
  112. package/dist/collection/types/style.js +0 -128
  113. package/dist/collection/types/stylist.js +0 -30
  114. package/dist/collection/types/user.js +0 -10
  115. package/dist/collection/utils/utils.js +0 -20
  116. package/dist/custom-elements/index.js +0 -28340
  117. package/dist/esm/_commonjsHelpers-098d5b27.js +0 -32
  118. package/dist/esm/chat-button.entry.js +0 -114
  119. package/dist/esm/favesalon-embed.js +0 -19
  120. package/dist/esm/google-map_5.entry.js +0 -302
  121. package/dist/esm/index-3fae868e.js +0 -1506
  122. package/dist/esm/index.js +0 -1
  123. package/dist/esm/loader.js +0 -19
  124. package/dist/esm/polyfills/core-js.js +0 -11
  125. package/dist/esm/polyfills/css-shim.js +0 -1
  126. package/dist/esm/polyfills/dom.js +0 -79
  127. package/dist/esm/polyfills/es5-html-element.js +0 -1
  128. package/dist/esm/polyfills/index.js +0 -34
  129. package/dist/esm/polyfills/system.js +0 -6
  130. package/dist/esm/relativeTime-cd452e6d.js +0 -7
  131. package/dist/favesalon-embed/p-019c5ccd.entry.js +0 -1
  132. package/dist/favesalon-embed/p-083a8821.entry.js +0 -1
  133. package/dist/favesalon-embed/p-0d0ed9ea.entry.js +0 -1
  134. package/dist/favesalon-embed/p-119db8de.entry.js +0 -1
  135. package/dist/favesalon-embed/p-1432c51b.entry.js +0 -1
  136. package/dist/favesalon-embed/p-22093506.entry.js +0 -1
  137. package/dist/favesalon-embed/p-32b314e9.js +0 -2
  138. package/dist/favesalon-embed/p-47e646f8.js +0 -1
  139. package/dist/favesalon-embed/p-4a5eca9a.js +0 -6
  140. package/dist/favesalon-embed/p-58d2e9be.js +0 -1
  141. package/dist/favesalon-embed/p-71404b6a.entry.js +0 -1
  142. package/dist/favesalon-embed/p-857c3a61.entry.js +0 -1
  143. package/dist/favesalon-embed/p-99ec77f7.entry.js +0 -1
  144. package/dist/favesalon-embed/p-a33331cc.js +0 -1
  145. package/dist/favesalon-embed/p-b0c3673a.entry.js +0 -1
  146. package/dist/favesalon-embed/p-b287b1ea.entry.js +0 -1
  147. package/dist/favesalon-embed/p-b3af7842.entry.js +0 -1
  148. package/dist/favesalon-embed/p-b630ae68.js +0 -1580
  149. package/dist/favesalon-embed/p-ce2c1c9a.entry.js +0 -1
  150. package/dist/favesalon-embed/p-d6083940.js +0 -1
  151. package/dist/favesalon-embed/p-d9b7ad58.entry.js +0 -1
  152. package/dist/favesalon-embed/p-fc9a5551.js +0 -6
  153. package/dist/index.cjs.js +0 -1
  154. package/dist/index.js +0 -1
  155. package/dist/types/components/chat-conversation/index.d.ts +0 -0
  156. /package/dist/{esm → favesalon-embed}/colors-ea36347a.js +0 -0
@@ -1,249 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import dayjs from 'dayjs';
3
- import { Colors } from '../../constants/colors';
4
- import { shortDateYearFormat } from '../../types/common';
5
- import HttpService from '../../services/services';
6
- const pageLimited = 10;
7
- const sortOptions = [{
8
- value: 'newest',
9
- label: 'Newest first',
10
- }, {
11
- value: 'oldest',
12
- label: 'Oldest first',
13
- }, {
14
- value: 'rating_desc',
15
- label: 'High rating first',
16
- }, {
17
- value: 'rating_asc',
18
- label: 'Low rating first',
19
- }];
20
- export class SalonReviews {
21
- constructor() {
22
- this.salonId = undefined;
23
- this.primaryColor = Colors.Primary;
24
- this.salonInfo = undefined;
25
- this.stats = {};
26
- this.totalReviews = 0;
27
- this.allReviews = [];
28
- this.isLoading = undefined;
29
- this.isSorting = undefined;
30
- this.isFiltering = undefined;
31
- this.isLoadingMore = undefined;
32
- this.canLoadMore = undefined;
33
- this.page = 1;
34
- this.filterBy = [];
35
- this.sortBy = sortOptions[0].value;
36
- }
37
- componentWillLoad() {
38
- this.fetchData();
39
- }
40
- fetchData() {
41
- this.isLoading = true;
42
- try {
43
- HttpService().fetchSalonReviews(this.salonId, {
44
- page: 1,
45
- sort: this.sortBy,
46
- limit: pageLimited,
47
- }).then(response => {
48
- const { total, stats, data: allReviews } = response;
49
- this.stats = stats;
50
- this.totalReviews = total;
51
- this.allReviews = allReviews;
52
- this.canLoadMore = total > pageLimited;
53
- });
54
- }
55
- catch (e) { }
56
- this.isLoading = false;
57
- }
58
- onLoadMore() {
59
- this.isLoadingMore = true;
60
- try {
61
- HttpService().fetchSalonReviews(this.salonId, {
62
- page: this.page + 1,
63
- sort: this.sortBy,
64
- limit: pageLimited,
65
- }).then(response => {
66
- const { total, data: allReviews } = response;
67
- this.page = this.page + 1;
68
- this.totalReviews = total;
69
- this.allReviews = this.allReviews.concat(allReviews);
70
- this.canLoadMore = (allReviews || []).length === pageLimited;
71
- });
72
- }
73
- catch (e) { }
74
- this.isLoadingMore = false;
75
- }
76
- onChangeFilter(filterBy) {
77
- this.isFiltering = true;
78
- try {
79
- HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: this.sortBy, limit: pageLimited }, filterBy.length > 0 ? { avg_point: filterBy } : {})).then(response => {
80
- const { total, data: allReviews } = response;
81
- this.page = 1;
82
- this.totalReviews = total;
83
- this.allReviews = allReviews;
84
- this.canLoadMore = (allReviews || []).length === pageLimited;
85
- });
86
- }
87
- catch (e) { }
88
- this.isFiltering = false;
89
- }
90
- onChangeSorting(sortBy) {
91
- this.isSorting = true;
92
- try {
93
- HttpService().fetchSalonReviews(this.salonId, Object.assign({ page: 1, sort: sortBy, limit: pageLimited }, this.filterBy.length > 0 ? { avg_point: this.filterBy } : {})).then(response => {
94
- const { total, data: allReviews } = response;
95
- this.page = 1;
96
- this.totalReviews = total;
97
- this.allReviews = allReviews;
98
- this.canLoadMore = (allReviews || []).length === pageLimited;
99
- });
100
- }
101
- catch (e) { }
102
- this.isSorting = false;
103
- }
104
- render() {
105
- const ratingTexts = ['', 'Poor', 'Sufficient', 'Average', 'Well', 'Very good'];
106
- return (h("div", { class: "view view--salon-reviews" }, h("div", { class: "salon-reviews--filters" }, h("div", { class: "salon-reviews--score" }, h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row' } }, [1, 2, 3, 4, 5].map(score => {
107
- return (h("i", { class: score <= this.stats.reviewPoint ? 'ri-heart-fill' : 'ri-heart-line', style: Object.assign({ fontSize: '32px', marginRight: '4px' }, score <= this.stats.reviewPoint ? { color: this.primaryColor } : { color: Colors.Gray04 }) }));
108
- })), h("div", { class: "salon-review--rating--date", style: {
109
- display: 'flex',
110
- flexDirection: 'row',
111
- alignItems: 'center',
112
- marginTop: '-8px',
113
- } }, h("span", { style: { fontSize: '24px' } }, this.stats.reviewPoint, "/5"), " ", h("span", { style: { color: Colors.Gray04, marginLeft: '8px' } }, "(", this.stats.totalReviews, " reviews)"))), h("div", { class: "salon-reviews--filters--options", style: { marginTop: '24px' } }, h("div", { style: {
114
- background: Colors.Gray01,
115
- display: 'flex',
116
- alignItems: 'center',
117
- borderRadius: '4px',
118
- padding: '16px',
119
- } }, h("div", null, h("input", { type: "checkbox", checked: this.filterBy.length === 0, onChange: () => {
120
- this.filterBy = [];
121
- this.onChangeFilter([]);
122
- } }), " ", h("span", { style: { marginLeft: '4px' } }, "All reviews")), [5, 4, 3, 2, 1].map(score => {
123
- const isChecked = this.filterBy.indexOf(score) > -1;
124
- return (h("div", { key: `salon-reviews--filters-score--${score}`, style: { display: 'flex', alignItems: 'center', marginLeft: '16px' } }, h("input", { type: "checkbox", checked: isChecked, onChange: () => {
125
- const newFilter = isChecked ? this.filterBy.filter(fs => fs !== score) : this.filterBy.concat([score]);
126
- this.filterBy = newFilter;
127
- this.onChangeFilter(newFilter);
128
- } }), " ", h("span", { style: { display: 'flex', alignItems: 'center', marginLeft: '4px' } }, score, " ", h("i", { class: "ri-heart-line", style: {
129
- fontSize: '16px',
130
- marginLeft: '4px',
131
- marginRight: '4px',
132
- lineHeight: '1',
133
- } }), " ", h("span", { style: { color: Colors.Gray04, fontSize: '12px' } }, "(", this.stats[String(score)] || 0, ")"))));
134
- })))), h("div", { class: "salon-reviews--list-header", style: {
135
- display: 'flex',
136
- flexDirection: 'row',
137
- justifyContent: 'space-between',
138
- alignItems: 'center',
139
- marginTop: '24px',
140
- } }, h("div", { class: "view--salon-reviews--counter" }, this.totalReviews, " ", this.totalReviews === 1 ? `review` : `reviews`), h("div", { style: { display: 'flex', alignItems: 'center' } }, h("label", { style: { marginRight: '8px', color: Colors.Gray04 } }, "Sort by"), h("select", { class: "search-filter--select", "place-holder": "Most popular", disabled: this.isLoading, onChange: (evt) => {
141
- this.sortBy = evt.target.value;
142
- this.onChangeSorting(evt.target.value);
143
- }, style: {
144
- display: 'flex',
145
- alignItems: 'center',
146
- backgroundColor: Colors.Gray01,
147
- borderColor: Colors.Gray01,
148
- borderRadius: '4px',
149
- height: '40px',
150
- width: '130px',
151
- } }, sortOptions.map(sortOption => (h("option", { value: sortOption.value, selected: sortOption.value === this.sortBy, key: `search-filter--select-option--${sortOption.value}` }, sortOption.label)))))), h("div", { class: "salon-reviews--list-content", style: { marginTop: '24px' } }, this.allReviews.map((review, idx) => {
152
- const user = review.user || {};
153
- return (h("div", { class: "salon-review", key: `salon-review--${idx}`, style: {
154
- borderBottom: `1px solid ${Colors.Gray02}`,
155
- marginBottom: '24px',
156
- paddingBottom: '24px',
157
- } }, h("div", { class: "salon-review--user", style: { marginBottom: '16px', overflow: 'hidden' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: h("span", { style: { fontSize: '18px', fontWeight: '600', color: Colors.TextColor } }, (user.firstName || user.lastName) ? `${user.firstName || ''} ${user.lastName || ''}` : ''), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), h("div", { class: "salon-review--rating", style: { display: 'flex', flexDirection: 'row', marginBottom: '4px' } }, [1, 2, 3, 4, 5].map(score => (h("i", { key: `salon-review--rating--item--score--${score}`, class: score <= review.point ? 'ri-heart-fill' : 'ri-heart-line', style: {
158
- color: score <= review.point ? this.primaryColor : Colors.Gray04,
159
- fontSize: '16px',
160
- marginRight: '4px',
161
- } }))), review.createdDate && (h("div", { class: "salon-review--rating--date", style: { fontSize: '14px', color: Colors.Gray04, marginLeft: '16px', position: 'relative', top: '2px' } }, dayjs(review.createdDate).format(shortDateYearFormat)))), h("div", { class: "salon-review--rating-text", style: { fontSize: '16px', fontWeight: '600' } }, ratingTexts[review.point]), (review.title || review.description) && (h("div", { class: "salon-review--detail", style: { marginTop: '16px' } }, h("div", { class: "salon-review--title", style: { fontSize: '18px', fontWeight: 'bold' }, innerHTML: review.title }), h("div", { class: "salon-review--description", style: { fontSize: '16px' }, innerHTML: review.description }))), review.photos.length > 0 && (h("div", { style: {
162
- display: 'flex',
163
- flexDirection: 'row',
164
- overflowX: 'auto',
165
- } }, review.photos.map(fileObj => (h("div", { key: `upload-file--${fileObj.id}`, class: "review--photo", style: {
166
- position: 'relative',
167
- cursor: 'pointer',
168
- marginTop: '16px',
169
- marginRight: '12px',
170
- } }, h("img", { width: 72, src: fileObj.imageUrlThumb, style: { display: 'block' } }))))))));
171
- })), h("div", { class: "salon-reviews--list-footer", style: {
172
- textAlign: 'center',
173
- paddingTop: '16px',
174
- paddingBottom: '16px',
175
- } }, h("button", { class: "btn btn-light btn-lg", style: {
176
- background: Colors.White,
177
- border: `1px solid ${Colors.Gray02}`,
178
- borderRadius: '4px',
179
- paddingLeft: '24px',
180
- paddingRight: '24px',
181
- }, onClick: () => this.onLoadMore() }, "Load more"))));
182
- }
183
- static get is() { return "salon-reviews"; }
184
- static get originalStyleUrls() {
185
- return {
186
- "$": ["index.css"]
187
- };
188
- }
189
- static get styleUrls() {
190
- return {
191
- "$": ["index.css"]
192
- };
193
- }
194
- static get properties() {
195
- return {
196
- "salonId": {
197
- "type": "number",
198
- "mutable": false,
199
- "complexType": {
200
- "original": "number",
201
- "resolved": "number",
202
- "references": {}
203
- },
204
- "required": false,
205
- "optional": false,
206
- "docs": {
207
- "tags": [],
208
- "text": ""
209
- },
210
- "attribute": "salon-id",
211
- "reflect": false
212
- },
213
- "primaryColor": {
214
- "type": "string",
215
- "mutable": false,
216
- "complexType": {
217
- "original": "string",
218
- "resolved": "string",
219
- "references": {}
220
- },
221
- "required": false,
222
- "optional": false,
223
- "docs": {
224
- "tags": [],
225
- "text": ""
226
- },
227
- "attribute": "primary-color",
228
- "reflect": false,
229
- "defaultValue": "Colors.Primary"
230
- }
231
- };
232
- }
233
- static get states() {
234
- return {
235
- "salonInfo": {},
236
- "stats": {},
237
- "totalReviews": {},
238
- "allReviews": {},
239
- "isLoading": {},
240
- "isSorting": {},
241
- "isFiltering": {},
242
- "isLoadingMore": {},
243
- "canLoadMore": {},
244
- "page": {},
245
- "filterBy": {},
246
- "sortBy": {}
247
- };
248
- }
249
- }
@@ -1,18 +0,0 @@
1
- salon-schedules .salon-schedules--day {
2
- display: flex;
3
- flex-direction: row;
4
- min-width: 240px;
5
- }
6
-
7
-
8
- @media (min-width: 768px) {
9
- salon-schedules .salon-schedules--dates {
10
- overflow: hidden;
11
- margin-left: -32px;
12
- }
13
-
14
- salon-schedules .salon-schedules--day {
15
- float: left;
16
- padding-left: 32px;
17
- }
18
- }
@@ -1,146 +0,0 @@
1
- import { h } 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.salonId = undefined;
8
- this.buttonClass = 'btn btn-light';
9
- this.salonServices = undefined;
10
- this.isLoading = undefined;
11
- }
12
- componentWillLoad() {
13
- this.fetchData();
14
- }
15
- async fetchData() {
16
- this.isLoading = true;
17
- try {
18
- this.salonServices = await HttpService().fetchSalonServices(this.salonId);
19
- }
20
- catch (e) {
21
- this.salonServices = [];
22
- }
23
- this.isLoading = false;
24
- }
25
- render() {
26
- if (this.isLoading) {
27
- return (h("div", { class: "salon-services--container" }, h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray01}` } }, h("div", { class: "view-content", style: { overflowX: 'auto' } }, h("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden' } }, [1, 2, 3, 4, 5, 6].map((fakeId, index) => (h("div", { key: `service-group--${fakeId}--${index}`, style: {
28
- backgroundColor: Colors.Gray02,
29
- float: 'left',
30
- marginRight: '12px',
31
- height: '30px',
32
- width: '120px',
33
- } })))))), [1, 2, 3, 4, 5, 6].map((fakeId, index) => {
34
- return (h("div", { id: `service-group--${fakeId}`, style: { marginTop: '32px' } }, h("div", { key: `service-group--${fakeId}--${index}`, style: {
35
- backgroundColor: Colors.Gray03,
36
- height: '20px',
37
- width: '120px',
38
- } }), h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray01}`, marginTop: '12px' } }, h("div", { class: "view-content" }, [1, 2, 3].map((fakeGroupId, fakeGroupIndex) => (h("div", { key: `service-group--${fakeId}--service-${fakeGroupId}--${fakeGroupIndex}`, class: "salon-service" }, h("div", { class: "salon-service--name", style: Object.assign({}, fakeGroupIndex > 0 ? {
39
- marginTop: '12px',
40
- paddingTop: '12px',
41
- borderTop: `1px solid ${Colors.Gray01}`,
42
- } : {}) }, h("div", { key: `service-group--${fakeId}--${index}`, style: {
43
- backgroundColor: Colors.Gray01,
44
- height: '16px',
45
- width: '120px',
46
- } })), h("div", { style: { marginTop: '4px' } }, h("div", { style: {
47
- backgroundColor: Colors.Gray01,
48
- height: '16px',
49
- width: '240px',
50
- } })))))))));
51
- })));
52
- }
53
- return (h("div", { class: "salon-services--container" }, h("div", { class: "view view--salon-services--header", style: { border: `1px solid ${Colors.Gray02}` } }, h("div", { class: "view-content", style: { overflowX: 'auto' } }, h("div", { style: { whiteSpace: 'nowrap' } }, sortBy(this.salonServices || [], (['order', 'name'])).map((serviceGroup, index) => (h("a", { href: `#service-group--${serviceGroup.id}` }, h("button", { type: "button", class: this.buttonClass, style: index > 0 ? { marginLeft: '12px' } : {} }, serviceGroup.name))))))), sortBy(this.salonServices || [], (['order', 'name'])).map(serviceGroup => {
54
- const hasMultipleCates = (serviceGroup.data || []).length > 1;
55
- return (h("div", { id: `service-group--${serviceGroup.id}`, style: { marginTop: '32px' } }, h("h3", { style: { fontSize: '24px', marginBottom: '12px' } }, serviceGroup.name), h("div", { class: "view view--salon-service-type", style: { border: `1px solid ${Colors.Gray02}` } }, h("div", { class: "view-content" }, (serviceGroup.data || []).map((subGroup, subGroupIndex) => (h("div", { class: "salon-service-category" }, hasMultipleCates && (h("h4", { style: Object.assign({ fontSize: '20px', marginBottom: '12px', paddingBottom: '12px', borderBottom: `1px solid ${Colors.Gray02}` }, subGroupIndex > 0 ? { marginTop: '32px' } : {}) }, subGroup.name)), (subGroup.data || []).map((service, serviceIndex) => (h("div", { class: "salon-service" }, h("div", { class: "salon-service--name", style: Object.assign({ fontSize: '16px', fontWeight: '500' }, serviceIndex > 0 ? {
56
- marginTop: '12px',
57
- paddingTop: '12px',
58
- borderTop: `1px solid ${Colors.Gray01}`,
59
- } : {}) }, service.name), (!service.hideDuration || !service.hidePrice) && (h("div", { style: {
60
- display: 'block',
61
- marginTop: '4px',
62
- fontSize: '90%',
63
- color: Colors.Gray05,
64
- } }, [
65
- !service.hideDuration ? `${service.duration} mins` : '',
66
- !service.hidePrice ? `$${service.price}` : '',
67
- ].filter(field => !!field).join(' · ')))))))))))));
68
- })));
69
- }
70
- static get is() { return "salon-services"; }
71
- static get originalStyleUrls() {
72
- return {
73
- "$": ["index.css"]
74
- };
75
- }
76
- static get styleUrls() {
77
- return {
78
- "$": ["index.css"]
79
- };
80
- }
81
- static get properties() {
82
- return {
83
- "salonId": {
84
- "type": "number",
85
- "mutable": false,
86
- "complexType": {
87
- "original": "number",
88
- "resolved": "number",
89
- "references": {}
90
- },
91
- "required": false,
92
- "optional": false,
93
- "docs": {
94
- "tags": [],
95
- "text": ""
96
- },
97
- "attribute": "salon-id",
98
- "reflect": false
99
- },
100
- "buttonClass": {
101
- "type": "string",
102
- "mutable": false,
103
- "complexType": {
104
- "original": "string",
105
- "resolved": "string",
106
- "references": {}
107
- },
108
- "required": false,
109
- "optional": false,
110
- "docs": {
111
- "tags": [],
112
- "text": ""
113
- },
114
- "attribute": "button-class",
115
- "reflect": false,
116
- "defaultValue": "'btn btn-light'"
117
- }
118
- };
119
- }
120
- static get states() {
121
- return {
122
- "salonServices": {},
123
- "isLoading": {}
124
- };
125
- }
126
- static get methods() {
127
- return {
128
- "fetchData": {
129
- "complexType": {
130
- "signature": "() => Promise<void>",
131
- "parameters": [],
132
- "references": {
133
- "Promise": {
134
- "location": "global"
135
- }
136
- },
137
- "return": "Promise<void>"
138
- },
139
- "docs": {
140
- "text": "",
141
- "tags": []
142
- }
143
- }
144
- };
145
- }
146
- }
@@ -1,43 +0,0 @@
1
- .view--salon-stylists {
2
- overflow: hidden;
3
- margin-left: -12px;
4
- margin-top: -12px;
5
- }
6
-
7
- .view--salon-stylists .salon-stylist {
8
- float: left;
9
- padding-left: 12px;
10
- padding-top: 12px;
11
- width: 50%;
12
- }
13
-
14
- .view--salon-stylists .salon-stylist--avatar {
15
- height: 180px;
16
- }
17
-
18
-
19
- @media (min-width: 576px) {
20
- .view--salon-stylists .salon-stylist {
21
- width: 33.33%;
22
- max-width: 240px;
23
- }
24
- }
25
-
26
-
27
- @media (min-width: 768px) {
28
- .view--salon-stylists {
29
- margin-left: -24px;
30
- margin-top: -24px;
31
- }
32
-
33
- .view--salon-stylists .salon-stylist {
34
- padding-left: 24px;
35
- padding-top: 24px;
36
- width: 264px;
37
- max-width: none;
38
- }
39
-
40
- .view--salon-stylists .salon-stylist--avatar {
41
- height: 240px;
42
- }
43
- }
@@ -1,184 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { Colors } from '../../constants/colors';
3
- import HttpService from '../../services/services';
4
- const pageLimit = 20;
5
- export class SalonStylists {
6
- constructor() {
7
- this.salonId = undefined;
8
- this.salonStylists = undefined;
9
- this.totalStylists = undefined;
10
- this.page = 1;
11
- this.isLoading = undefined;
12
- this.isLoadingMore = undefined;
13
- this.canLoadMore = undefined;
14
- }
15
- componentWillLoad() {
16
- this.fetchData();
17
- }
18
- async fetchData() {
19
- this.isLoading = true;
20
- try {
21
- const { total, data } = await HttpService().fetchSalonStylists(this.salonId, { page: 1, limit: pageLimit });
22
- this.totalStylists = total;
23
- this.salonStylists = data;
24
- this.canLoadMore = data.length === pageLimit;
25
- }
26
- catch (e) {
27
- this.totalStylists = 0;
28
- this.salonStylists = [];
29
- this.canLoadMore = false;
30
- }
31
- this.isLoading = false;
32
- }
33
- async onLoadMore() {
34
- this.isLoadingMore = true;
35
- try {
36
- const { data } = await HttpService().fetchSalonStylists(this.salonId, { page: this.page + 1, limit: pageLimit });
37
- this.salonStylists = this.salonStylists.concat(data || []);
38
- this.canLoadMore = data.length === pageLimit;
39
- this.page += 1;
40
- }
41
- catch (e) { }
42
- this.isLoadingMore = false;
43
- }
44
- render() {
45
- if (this.isLoading) {
46
- return (h("div", null, h("div", { class: "view--salon-stylists" }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((fakeId, index) => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
47
- background: 'none',
48
- border: 'none',
49
- overflow: 'hidden',
50
- } }, h("div", { class: "salon-stylist--avatar", style: {
51
- backgroundColor: Colors.Gray01,
52
- backgroundRepeat: 'no-repeat',
53
- backgroundPosition: 'center top',
54
- backgroundSize: 'cover',
55
- border: `1px solid ${Colors.Gray01}`,
56
- borderRadius: '8px',
57
- position: 'relative',
58
- display: 'flex',
59
- width: '100%',
60
- alignItems: 'center',
61
- justifyContent: 'center',
62
- } }), h("div", { class: "card-body" }, h("div", { key: `stylist--${fakeId}--${index}`, style: {
63
- backgroundColor: Colors.Gray01,
64
- height: '16px',
65
- width: '120px',
66
- margin: 'auto',
67
- } })))))))));
68
- }
69
- return (h("div", null, h("div", { class: "view--salon-stylists" }, (this.salonStylists || []).map(stylist => (h("div", { class: "salon-stylist" }, h("div", { class: "card", style: {
70
- background: 'none',
71
- border: 'none',
72
- overflow: 'hidden',
73
- } }, h("div", { class: "salon-stylist--avatar", style: {
74
- backgroundImage: `url("${stylist.avatar}")`,
75
- backgroundColor: Colors.Gray01,
76
- backgroundRepeat: 'no-repeat',
77
- backgroundPosition: 'center top',
78
- backgroundSize: 'cover',
79
- border: `1px solid ${Colors.Gray01}`,
80
- borderRadius: '8px',
81
- position: 'relative',
82
- display: 'flex',
83
- width: '100%',
84
- alignItems: 'center',
85
- justifyContent: 'center',
86
- } }, !stylist.avatar && (h("span", { style: {
87
- fontSize: '32px',
88
- fontWeight: 'bold',
89
- textTransform: 'uppercase',
90
- } }, (stylist.firstName || '').charAt(0), " ", (stylist.lastName || '').charAt(0)))), h("div", { class: "card-body" }, h("div", { style: {
91
- fontSize: '18px',
92
- fontWeight: '600',
93
- textAlign: 'center',
94
- } }, stylist.fullName))))))), this.canLoadMore && (h("div", { class: "view-footer", style: {
95
- textAlign: 'center',
96
- paddingTop: '32px',
97
- paddingBottom: '16px',
98
- } }, h("button", { type: "button", class: "btn btn-lg", disabled: this.isLoadingMore, style: {
99
- background: Colors.White,
100
- border: `1px solid ${Colors.Gray02}`,
101
- borderRadius: '4px',
102
- paddingLeft: '24px',
103
- paddingRight: '24px',
104
- }, onClick: () => this.onLoadMore() }, "Load more")))));
105
- }
106
- static get is() { return "salon-stylists"; }
107
- static get originalStyleUrls() {
108
- return {
109
- "$": ["index.css"]
110
- };
111
- }
112
- static get styleUrls() {
113
- return {
114
- "$": ["index.css"]
115
- };
116
- }
117
- static get properties() {
118
- return {
119
- "salonId": {
120
- "type": "number",
121
- "mutable": false,
122
- "complexType": {
123
- "original": "number",
124
- "resolved": "number",
125
- "references": {}
126
- },
127
- "required": false,
128
- "optional": false,
129
- "docs": {
130
- "tags": [],
131
- "text": ""
132
- },
133
- "attribute": "salon-id",
134
- "reflect": false
135
- }
136
- };
137
- }
138
- static get states() {
139
- return {
140
- "salonStylists": {},
141
- "totalStylists": {},
142
- "page": {},
143
- "isLoading": {},
144
- "isLoadingMore": {},
145
- "canLoadMore": {}
146
- };
147
- }
148
- static get methods() {
149
- return {
150
- "fetchData": {
151
- "complexType": {
152
- "signature": "() => Promise<void>",
153
- "parameters": [],
154
- "references": {
155
- "Promise": {
156
- "location": "global"
157
- }
158
- },
159
- "return": "Promise<void>"
160
- },
161
- "docs": {
162
- "text": "",
163
- "tags": []
164
- }
165
- },
166
- "onLoadMore": {
167
- "complexType": {
168
- "signature": "() => Promise<void>",
169
- "parameters": [],
170
- "references": {
171
- "Promise": {
172
- "location": "global"
173
- }
174
- },
175
- "return": "Promise<void>"
176
- },
177
- "docs": {
178
- "text": "",
179
- "tags": []
180
- }
181
- }
182
- };
183
- }
184
- }