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.
Files changed (237) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/_commonjsHelpers-5cfcba41.js +36 -0
  3. package/dist/cjs/chat-button.cjs.entry.js +118 -0
  4. package/dist/cjs/colors-38421769.js +69 -0
  5. package/dist/cjs/favesalon-embed.cjs.js +24 -0
  6. package/dist/cjs/google-map_5.cjs.entry.js +310 -0
  7. package/{cjs/index-7d179a70.js → dist/cjs/index-47c2a5f6.js} +587 -199
  8. package/dist/cjs/index-7f190886.js +4396 -0
  9. package/dist/cjs/loader.cjs.js +23 -0
  10. package/dist/cjs/relativeTime-3721080d.js +9 -0
  11. package/dist/cjs/salon-booking-modal.cjs.entry.js +30 -0
  12. package/dist/cjs/salon-booking.cjs.entry.js +51 -0
  13. package/dist/cjs/salon-gift-card-modal.cjs.entry.js +29 -0
  14. package/dist/cjs/salon-gift-card.cjs.entry.js +51 -0
  15. package/dist/cjs/salon-latest-reviews.cjs.entry.js +97 -0
  16. package/dist/cjs/salon-lookbook.cjs.entry.js +222 -0
  17. package/dist/cjs/salon-ranking.cjs.entry.js +60 -0
  18. package/dist/cjs/salon-reviews.cjs.entry.js +193 -0
  19. package/dist/cjs/salon-services.cjs.entry.js +81 -0
  20. package/dist/cjs/salon-stylists.cjs.entry.js +118 -0
  21. package/dist/cjs/services-125c82d8.js +21492 -0
  22. package/dist/cjs/style-detail.cjs.entry.js +312 -0
  23. package/dist/cjs/user-avatar.cjs.entry.js +45 -0
  24. package/dist/cjs/utils-c5a33b3c.js +23 -0
  25. package/{collection → dist/collection}/collection-manifest.json +5 -4
  26. package/dist/collection/components/chat-button/index.css +122 -0
  27. package/dist/collection/components/chat-button/index.js +218 -0
  28. package/dist/collection/components/chat-conversation/index.js +103 -0
  29. package/dist/collection/components/google-map/assets/map--placeholder.jpeg +0 -0
  30. package/{collection → dist/collection}/components/google-map/index.css +0 -1
  31. package/dist/collection/components/google-map/index.js +90 -0
  32. package/{collection → dist/collection}/components/salon-booking/index.css +11 -20
  33. package/dist/collection/components/salon-booking/index.js +126 -0
  34. package/dist/collection/components/salon-booking/salon-booking-modal.js +92 -0
  35. package/dist/collection/components/salon-gift-card/index.css +30 -0
  36. package/dist/collection/components/salon-gift-card/index.js +126 -0
  37. package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js +73 -0
  38. package/dist/collection/components/salon-info/index.js +77 -0
  39. package/dist/collection/components/salon-latest-reviews/index.js +163 -0
  40. package/dist/collection/components/salon-latest-styles/index.css +12 -0
  41. package/dist/collection/components/salon-latest-styles/index.js +183 -0
  42. package/{collection/components/salon-contact → dist/collection/components/salon-locations}/index.css +7 -4
  43. package/dist/collection/components/salon-locations/index.js +143 -0
  44. package/dist/collection/components/salon-lookbook/index.css +15 -0
  45. package/dist/collection/components/salon-lookbook/index.js +368 -0
  46. package/dist/collection/components/salon-ranking/index.js +117 -0
  47. package/dist/collection/components/salon-reviews/index.css +18 -0
  48. package/dist/collection/components/salon-reviews/index.js +249 -0
  49. package/dist/collection/components/salon-schedules/index.css +18 -0
  50. package/dist/collection/components/salon-schedules/index.js +167 -0
  51. package/dist/collection/components/salon-services/index.css +1 -0
  52. package/dist/collection/components/salon-services/index.js +146 -0
  53. package/dist/collection/components/salon-stylists/index.js +184 -0
  54. package/dist/collection/components/style-detail/index.css +76 -0
  55. package/dist/collection/components/style-detail/index.js +386 -0
  56. package/dist/collection/components/user-avatar/index.js +134 -0
  57. package/dist/collection/constants/colors.js +65 -0
  58. package/dist/collection/mocks/users.js +10 -0
  59. package/dist/collection/services/services.js +295 -0
  60. package/dist/collection/types/chat.js +23 -0
  61. package/dist/collection/types/common.js +11 -0
  62. package/{collection → dist/collection}/types/review.js +9 -5
  63. package/dist/collection/types/salon.js +58 -0
  64. package/dist/collection/types/style.js +128 -0
  65. package/dist/collection/types/stylist.js +30 -0
  66. package/dist/collection/types/user.js +10 -0
  67. package/{custom-elements → dist/custom-elements}/index.d.ts +18 -12
  68. package/dist/custom-elements/index.js +28340 -0
  69. package/dist/esm/_commonjsHelpers-098d5b27.js +32 -0
  70. package/dist/esm/chat-button.entry.js +114 -0
  71. package/dist/esm/colors-ea36347a.js +67 -0
  72. package/dist/esm/favesalon-embed.js +19 -0
  73. package/dist/esm/google-map_5.entry.js +302 -0
  74. package/{esm/index-2160b80b.js → dist/esm/index-3fae868e.js} +586 -200
  75. package/dist/esm/index-80523fec.js +4393 -0
  76. package/dist/esm/index.js +1 -0
  77. package/dist/esm/loader.js +19 -0
  78. package/dist/esm/polyfills/css-shim.js +1 -0
  79. package/dist/esm/relativeTime-cd452e6d.js +7 -0
  80. package/dist/esm/salon-booking-modal.entry.js +26 -0
  81. package/dist/esm/salon-booking.entry.js +47 -0
  82. package/dist/esm/salon-gift-card-modal.entry.js +25 -0
  83. package/dist/esm/salon-gift-card.entry.js +47 -0
  84. package/dist/esm/salon-latest-reviews.entry.js +93 -0
  85. package/dist/esm/salon-lookbook.entry.js +218 -0
  86. package/dist/esm/salon-ranking.entry.js +56 -0
  87. package/dist/esm/salon-reviews.entry.js +189 -0
  88. package/dist/esm/salon-services.entry.js +77 -0
  89. package/dist/esm/salon-stylists.entry.js +114 -0
  90. package/dist/esm/services-40a3e622.js +21485 -0
  91. package/dist/esm/style-detail.entry.js +308 -0
  92. package/dist/esm/user-avatar.entry.js +41 -0
  93. package/dist/esm/utils-e97485e0.js +19 -0
  94. package/dist/favesalon-embed/assets/map--placeholder.jpeg +0 -0
  95. package/{favesalon-embed → dist/favesalon-embed}/favesalon-embed.css +1 -1
  96. package/dist/favesalon-embed/favesalon-embed.esm.js +1 -0
  97. package/dist/favesalon-embed/p-019c5ccd.entry.js +1 -0
  98. package/dist/favesalon-embed/p-083a8821.entry.js +1 -0
  99. package/dist/favesalon-embed/p-0d0ed9ea.entry.js +1 -0
  100. package/dist/favesalon-embed/p-119db8de.entry.js +1 -0
  101. package/dist/favesalon-embed/p-1432c51b.entry.js +1 -0
  102. package/dist/favesalon-embed/p-22093506.entry.js +1 -0
  103. package/dist/favesalon-embed/p-32b314e9.js +2 -0
  104. package/dist/favesalon-embed/p-47e646f8.js +1 -0
  105. package/dist/favesalon-embed/p-4a5eca9a.js +6 -0
  106. package/dist/favesalon-embed/p-58d2e9be.js +1 -0
  107. package/dist/favesalon-embed/p-71404b6a.entry.js +1 -0
  108. package/dist/favesalon-embed/p-857c3a61.entry.js +1 -0
  109. package/dist/favesalon-embed/p-99ec77f7.entry.js +1 -0
  110. package/dist/favesalon-embed/p-a33331cc.js +1 -0
  111. package/dist/favesalon-embed/p-b0c3673a.entry.js +1 -0
  112. package/dist/favesalon-embed/p-b287b1ea.entry.js +1 -0
  113. package/dist/favesalon-embed/p-b3af7842.entry.js +1 -0
  114. package/dist/favesalon-embed/p-b630ae68.js +1580 -0
  115. package/dist/favesalon-embed/p-ce2c1c9a.entry.js +1 -0
  116. package/dist/favesalon-embed/p-d6083940.js +1 -0
  117. package/dist/favesalon-embed/p-d9b7ad58.entry.js +1 -0
  118. package/dist/favesalon-embed/p-fc9a5551.js +6 -0
  119. package/dist/types/components/chat-button/index.d.ts +24 -0
  120. package/dist/types/components/google-map/index.d.ts +5 -0
  121. package/{types → dist/types}/components/salon-booking/salon-booking-modal.d.ts +1 -0
  122. package/{types → dist/types}/components/salon-gift-card/index.d.ts +2 -1
  123. package/{types → dist/types}/components/salon-gift-card/salon-gift-card-modal.d.ts +2 -0
  124. package/{types → dist/types}/components/salon-info/index.d.ts +0 -1
  125. package/{types → dist/types}/components/salon-latest-reviews/index.d.ts +2 -0
  126. package/dist/types/components/salon-latest-styles/index.d.ts +12 -0
  127. package/{types → dist/types}/components/salon-locations/index.d.ts +2 -0
  128. package/{types → dist/types}/components/salon-lookbook/index.d.ts +7 -2
  129. package/dist/types/components/salon-reviews/index.d.ts +24 -0
  130. package/{types → dist/types}/components/salon-schedules/index.d.ts +2 -0
  131. package/{types → dist/types}/components/salon-services/index.d.ts +1 -0
  132. package/{types → dist/types}/components/salon-stylists/index.d.ts +6 -0
  133. package/dist/types/components/style-detail/index.d.ts +24 -0
  134. package/{types → dist/types}/components.d.ts +82 -41
  135. package/dist/types/constants/colors.d.ts +65 -0
  136. package/dist/types/mocks/users.d.ts +10 -0
  137. package/dist/types/services/services.d.ts +75 -0
  138. package/{types → dist/types}/stencil-public-runtime.d.ts +85 -11
  139. package/dist/types/types/chat.d.ts +17 -0
  140. package/dist/types/types/common.d.ts +11 -0
  141. package/{types → dist/types}/types/review.d.ts +4 -0
  142. package/{types → dist/types}/types/salon.d.ts +3 -1
  143. package/dist/types/types/style.d.ts +88 -0
  144. package/{types → dist/types}/types/stylist.d.ts +2 -1
  145. package/{types → dist/types}/types/user.d.ts +2 -2
  146. package/loader/cdn.js +3 -0
  147. package/loader/index.cjs.js +3 -0
  148. package/loader/index.d.ts +21 -0
  149. package/loader/index.es2017.js +3 -0
  150. package/loader/index.js +4 -0
  151. package/loader/package.json +11 -0
  152. package/package.json +19 -14
  153. package/readme.md +25 -2
  154. package/cjs/favesalon-embed.cjs.js +0 -20
  155. package/cjs/google-map_15.cjs.entry.js +0 -6632
  156. package/cjs/loader.cjs.js +0 -22
  157. package/cjs/salon-booking-modal.cjs.entry.js +0 -23
  158. package/cjs/salon-gift-card-modal.cjs.entry.js +0 -20
  159. package/collection/components/google-map/index.js +0 -97
  160. package/collection/components/salon-booking/index.js +0 -103
  161. package/collection/components/salon-booking/salon-booking-modal.js +0 -82
  162. package/collection/components/salon-contact/index.js +0 -88
  163. package/collection/components/salon-gift-card/index.css +0 -25
  164. package/collection/components/salon-gift-card/index.js +0 -83
  165. package/collection/components/salon-gift-card/salon-gift-card-modal.js +0 -43
  166. package/collection/components/salon-info/index.css +0 -3
  167. package/collection/components/salon-info/index.js +0 -97
  168. package/collection/components/salon-latest-reviews/index.js +0 -108
  169. package/collection/components/salon-locations/index.js +0 -80
  170. package/collection/components/salon-lookbook/index.css +0 -12
  171. package/collection/components/salon-lookbook/index.js +0 -303
  172. package/collection/components/salon-ranking/index.js +0 -114
  173. package/collection/components/salon-reviews/index.js +0 -291
  174. package/collection/components/salon-schedules/index.css +0 -14
  175. package/collection/components/salon-schedules/index.js +0 -103
  176. package/collection/components/salon-services/index.css +0 -0
  177. package/collection/components/salon-services/index.js +0 -113
  178. package/collection/components/salon-styles/index.css +0 -23
  179. package/collection/components/salon-styles/index.js +0 -100
  180. package/collection/components/salon-stylists/index.js +0 -96
  181. package/collection/components/user-avatar/index.css +0 -0
  182. package/collection/components/user-avatar/index.js +0 -127
  183. package/collection/constants/colors.js +0 -91
  184. package/collection/services/services.js +0 -203
  185. package/collection/types/common.js +0 -2
  186. package/collection/types/salon.js +0 -52
  187. package/collection/types/style.js +0 -28
  188. package/collection/types/stylist.js +0 -13
  189. package/collection/types/user.js +0 -10
  190. package/custom-elements/index.js +0 -7410
  191. package/esm/favesalon-embed.js +0 -18
  192. package/esm/google-map_15.entry.js +0 -6614
  193. package/esm/loader.js +0 -18
  194. package/esm/polyfills/css-shim.js +0 -1
  195. package/esm/salon-booking-modal.entry.js +0 -19
  196. package/esm/salon-gift-card-modal.entry.js +0 -16
  197. package/favesalon-embed/favesalon-embed.esm.js +0 -1
  198. package/favesalon-embed/p-1432ab16.entry.js +0 -1
  199. package/favesalon-embed/p-2da2ed75.js +0 -1
  200. package/favesalon-embed/p-4a5eca9a.js +0 -6
  201. package/favesalon-embed/p-94a0991e.entry.js +0 -1
  202. package/favesalon-embed/p-f15bcb43.entry.js +0 -1
  203. package/types/components/google-map/index.d.ts +0 -10
  204. package/types/components/salon-contact/index.d.ts +0 -9
  205. package/types/components/salon-reviews/index.d.ts +0 -23
  206. package/types/components/salon-styles/index.d.ts +0 -9
  207. package/types/constants/colors.d.ts +0 -88
  208. package/types/services/services.d.ts +0 -24
  209. package/types/types/common.d.ts +0 -2
  210. package/types/types/style.d.ts +0 -49
  211. package/{cjs → dist/cjs}/global-9073d10e.js +0 -0
  212. package/{cjs → dist/cjs}/index.cjs.js +0 -0
  213. package/{esm/index.js → dist/collection/components/salon-info/index.css} +0 -0
  214. package/{collection → dist/collection}/components/salon-latest-reviews/index.css +0 -0
  215. package/{collection → dist/collection}/components/salon-ranking/index.css +0 -0
  216. package/{collection → dist/collection}/components/salon-stylists/index.css +0 -0
  217. package/{collection/components/salon-locations → dist/collection/components/user-avatar}/index.css +0 -0
  218. package/{collection → dist/collection}/global/global.js +0 -0
  219. package/{collection → dist/collection}/index.js +0 -0
  220. package/{collection → dist/collection}/types/service.js +0 -0
  221. package/{collection → dist/collection}/utils/utils.js +0 -0
  222. package/{esm → dist/esm}/global-e1089ffd.js +0 -0
  223. package/{esm → dist/esm}/polyfills/core-js.js +0 -0
  224. package/{esm → dist/esm}/polyfills/dom.js +0 -0
  225. package/{esm → dist/esm}/polyfills/es5-html-element.js +0 -0
  226. package/{esm → dist/esm}/polyfills/index.js +0 -0
  227. package/{esm → dist/esm}/polyfills/system.js +0 -0
  228. package/{favesalon-embed → dist/favesalon-embed}/index.esm.js +0 -0
  229. package/{index.cjs.js → dist/index.cjs.js} +0 -0
  230. package/{index.js → dist/index.js} +0 -0
  231. package/{collection/components/salon-reviews/index.css → dist/types/components/chat-conversation/index.d.ts} +0 -0
  232. package/{types → dist/types}/components/salon-booking/index.d.ts +1 -1
  233. /package/{types → dist/types}/components/salon-ranking/index.d.ts +0 -0
  234. /package/{types → dist/types}/components/user-avatar/index.d.ts +0 -0
  235. /package/{types → dist/types}/index.d.ts +0 -0
  236. /package/{types → dist/types}/types/service.d.ts +0 -0
  237. /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
- }