favesalon-embed 1.0.4 → 1.0.6

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 (183) hide show
  1. package/dist/custom-elements/index.d.ts +42 -0
  2. package/dist/{cjs/_commonjsHelpers-5cfcba41.js → favesalon-embed/_commonjsHelpers-a4f66ccd.js} +14 -6
  3. package/dist/favesalon-embed/activate-form.entry.js +70 -0
  4. package/dist/favesalon-embed/app-globals-74127f4b.js +7 -0
  5. package/dist/favesalon-embed/app-globals-f954a22f.js +7 -0
  6. package/dist/favesalon-embed/change-password-form.entry.js +81 -0
  7. package/dist/favesalon-embed/chat-box.entry.js +55 -0
  8. package/dist/{esm → favesalon-embed}/chat-button.entry.js +36 -13
  9. package/dist/favesalon-embed/chat-form.entry.js +39 -0
  10. package/dist/favesalon-embed/chat-messages.entry.js +71 -0
  11. package/dist/favesalon-embed/chat-rooms.entry.js +111 -0
  12. package/dist/favesalon-embed/css-shim-b7d3d95f.js +4 -0
  13. package/dist/favesalon-embed/dom-64053c71.js +73 -0
  14. package/dist/favesalon-embed/favesalon-embed.css +114 -1
  15. package/dist/favesalon-embed/favesalon-embed.esm.js +148 -1
  16. package/dist/{esm → favesalon-embed}/google-map.entry.js +1 -1
  17. package/dist/{esm/index-a1c7583c.js → favesalon-embed/index-00b83e1c.js} +425 -15
  18. package/dist/favesalon-embed/index-888e99e3.js +3371 -0
  19. package/dist/favesalon-embed/index-a229b3b5.js +3371 -0
  20. package/dist/favesalon-embed/index.esm.js +1 -0
  21. package/dist/{esm/chat-box_5.entry.js → favesalon-embed/lodash-d5526b38.js} +27 -243
  22. package/dist/favesalon-embed/login-form.entry.js +67 -0
  23. package/dist/{cjs/chat-button.cjs.entry.js → favesalon-embed/notify-sounds.entry.js} +20 -44
  24. package/dist/favesalon-embed/register-form.entry.js +88 -0
  25. package/dist/favesalon-embed/relativeTime-268e64b0.js +7 -0
  26. package/dist/favesalon-embed/reset-password-form.entry.js +47 -0
  27. package/dist/{esm → favesalon-embed}/salon-booking-modal.entry.js +1 -1
  28. package/dist/{esm → favesalon-embed}/salon-booking.entry.js +4 -4
  29. package/dist/{esm → favesalon-embed}/salon-gift-card-modal.entry.js +1 -1
  30. package/dist/{esm → favesalon-embed}/salon-gift-card.entry.js +4 -4
  31. package/dist/{esm → favesalon-embed}/salon-info.entry.js +3 -3
  32. package/dist/{esm → favesalon-embed}/salon-latest-reviews.entry.js +22 -6
  33. package/dist/{collection/components/salon-latest-styles/index.js → favesalon-embed/salon-latest-styles.entry.js} +27 -105
  34. package/dist/{collection/components/salon-locations/index.js → favesalon-embed/salon-locations.entry.js} +15 -95
  35. package/dist/{esm → favesalon-embed}/salon-lookbook.entry.js +18 -6
  36. package/dist/{esm → favesalon-embed}/salon-ranking.entry.js +1 -1
  37. package/dist/{esm → favesalon-embed}/salon-reviews.entry.js +20 -6
  38. package/dist/{collection/components/salon-schedules/index.js → favesalon-embed/salon-schedules.entry.js} +14 -95
  39. package/dist/{esm → favesalon-embed}/salon-services.entry.js +25 -13
  40. package/dist/{esm → favesalon-embed}/salon-stylists.entry.js +3 -3
  41. package/dist/{esm/services-257442e2.js → favesalon-embed/services-5a4c43a6.js} +2608 -188
  42. package/dist/{cjs/services-d1bdf299.js → favesalon-embed/services-d71be591.js} +2616 -191
  43. package/dist/favesalon-embed/shadow-css-98135883.js +387 -0
  44. package/dist/{esm → favesalon-embed}/style-detail.entry.js +29 -11
  45. package/dist/favesalon-embed/user-avatar.entry.js +52 -0
  46. package/dist/favesalon-embed/user-form.entry.js +44 -0
  47. package/dist/{collection/utils/utils.js → favesalon-embed/utils-fd30fb29.js} +14 -5
  48. package/dist/types/components/activate-form/activate-form.d.ts +12 -0
  49. package/dist/types/components/activate-form/test/activate-form.spec.d.ts +1 -0
  50. package/dist/types/components/change-password-form/change-password-form.d.ts +12 -0
  51. package/dist/types/components/chat-box/index.d.ts +1 -0
  52. package/dist/types/components/chat-button/index.d.ts +6 -2
  53. package/dist/types/components/chat-button/notify-sounds.d.ts +5 -0
  54. package/dist/types/components/chat-rooms/index.d.ts +6 -0
  55. package/dist/types/components/login-form/login-form.d.ts +10 -0
  56. package/dist/types/components/register-form/register-form.d.ts +13 -0
  57. package/dist/types/components/reset-password-form/reset-password-form.d.ts +9 -0
  58. package/dist/types/components/user-form/user-form.d.ts +7 -0
  59. package/dist/types/components.d.ts +127 -2
  60. package/dist/types/services/services.d.ts +17 -0
  61. package/dist/types/types/chat.d.ts +1 -0
  62. package/dist/types/types/user.d.ts +16 -0
  63. package/dist/types/utils/utils.d.ts +1 -0
  64. package/dist/types/utils/utils.spec.d.ts +1 -0
  65. package/package.json +1 -1
  66. package/dist/cjs/chat-box_5.cjs.entry.js +0 -17439
  67. package/dist/cjs/colors-38421769.js +0 -69
  68. package/dist/cjs/favesalon-embed.cjs.js +0 -23
  69. package/dist/cjs/google-map.cjs.entry.js +0 -52
  70. package/dist/cjs/index-7f190886.js +0 -4396
  71. package/dist/cjs/index-dd8176c4.js +0 -1531
  72. package/dist/cjs/index.cjs.js +0 -2
  73. package/dist/cjs/loader.cjs.js +0 -22
  74. package/dist/cjs/relativeTime-3721080d.js +0 -9
  75. package/dist/cjs/salon-booking-modal.cjs.entry.js +0 -30
  76. package/dist/cjs/salon-booking.cjs.entry.js +0 -51
  77. package/dist/cjs/salon-gift-card-modal.cjs.entry.js +0 -29
  78. package/dist/cjs/salon-gift-card.cjs.entry.js +0 -51
  79. package/dist/cjs/salon-info.cjs.entry.js +0 -33
  80. package/dist/cjs/salon-latest-reviews.cjs.entry.js +0 -97
  81. package/dist/cjs/salon-latest-styles_3.cjs.entry.js +0 -241
  82. package/dist/cjs/salon-lookbook.cjs.entry.js +0 -222
  83. package/dist/cjs/salon-ranking.cjs.entry.js +0 -60
  84. package/dist/cjs/salon-reviews.cjs.entry.js +0 -193
  85. package/dist/cjs/salon-services.cjs.entry.js +0 -81
  86. package/dist/cjs/salon-stylists.cjs.entry.js +0 -118
  87. package/dist/cjs/style-detail.cjs.entry.js +0 -312
  88. package/dist/cjs/utils-c5a33b3c.js +0 -23
  89. package/dist/collection/collection-manifest.json +0 -33
  90. package/dist/collection/components/chat-box/index.css +0 -105
  91. package/dist/collection/components/chat-box/index.js +0 -138
  92. package/dist/collection/components/chat-button/index.css +0 -101
  93. package/dist/collection/components/chat-button/index.js +0 -155
  94. package/dist/collection/components/chat-form/index.css +0 -40
  95. package/dist/collection/components/chat-form/index.js +0 -79
  96. package/dist/collection/components/chat-messages/index.css +0 -48
  97. package/dist/collection/components/chat-messages/index.js +0 -142
  98. package/dist/collection/components/chat-rooms/index.css +0 -102
  99. package/dist/collection/components/chat-rooms/index.js +0 -157
  100. package/dist/collection/components/google-map/assets/map--placeholder.jpeg +0 -0
  101. package/dist/collection/components/google-map/index.css +0 -5
  102. package/dist/collection/components/google-map/index.js +0 -90
  103. package/dist/collection/components/salon-booking/index.css +0 -30
  104. package/dist/collection/components/salon-booking/index.js +0 -126
  105. package/dist/collection/components/salon-booking/salon-booking-modal.js +0 -92
  106. package/dist/collection/components/salon-gift-card/index.css +0 -30
  107. package/dist/collection/components/salon-gift-card/index.js +0 -126
  108. package/dist/collection/components/salon-gift-card/salon-gift-card-modal.js +0 -73
  109. package/dist/collection/components/salon-info/index.css +0 -1
  110. package/dist/collection/components/salon-info/index.js +0 -77
  111. package/dist/collection/components/salon-latest-reviews/index.css +0 -11
  112. package/dist/collection/components/salon-latest-reviews/index.js +0 -163
  113. package/dist/collection/components/salon-latest-styles/index.css +0 -12
  114. package/dist/collection/components/salon-locations/index.css +0 -24
  115. package/dist/collection/components/salon-lookbook/index.css +0 -15
  116. package/dist/collection/components/salon-lookbook/index.js +0 -368
  117. package/dist/collection/components/salon-ranking/index.css +0 -3
  118. package/dist/collection/components/salon-ranking/index.js +0 -117
  119. package/dist/collection/components/salon-reviews/index.css +0 -18
  120. package/dist/collection/components/salon-reviews/index.js +0 -249
  121. package/dist/collection/components/salon-schedules/index.css +0 -18
  122. package/dist/collection/components/salon-services/index.css +0 -1
  123. package/dist/collection/components/salon-services/index.js +0 -146
  124. package/dist/collection/components/salon-stylists/index.css +0 -43
  125. package/dist/collection/components/salon-stylists/index.js +0 -184
  126. package/dist/collection/components/style-detail/index.css +0 -76
  127. package/dist/collection/components/style-detail/index.js +0 -386
  128. package/dist/collection/components/user-avatar/index.css +0 -0
  129. package/dist/collection/components/user-avatar/index.js +0 -159
  130. package/dist/collection/constants/colors.js +0 -65
  131. package/dist/collection/global/global.js +0 -0
  132. package/dist/collection/mocks/users.js +0 -10
  133. package/dist/collection/services/services.js +0 -295
  134. package/dist/collection/types/chat.js +0 -23
  135. package/dist/collection/types/common.js +0 -11
  136. package/dist/collection/types/review.js +0 -39
  137. package/dist/collection/types/salon.js +0 -58
  138. package/dist/collection/types/service.js +0 -24
  139. package/dist/collection/types/style.js +0 -128
  140. package/dist/collection/types/stylist.js +0 -30
  141. package/dist/collection/types/user.js +0 -10
  142. package/dist/custom-elements/index.js +0 -44974
  143. package/dist/esm/_commonjsHelpers-66ac50f5.js +0 -32
  144. package/dist/esm/favesalon-embed.js +0 -18
  145. package/dist/esm/index-0494771f.js +0 -1504
  146. package/dist/esm/index.js +0 -1
  147. package/dist/esm/loader.js +0 -18
  148. package/dist/esm/polyfills/core-js.js +0 -11
  149. package/dist/esm/polyfills/css-shim.js +0 -1
  150. package/dist/esm/polyfills/dom.js +0 -79
  151. package/dist/esm/polyfills/es5-html-element.js +0 -1
  152. package/dist/esm/polyfills/index.js +0 -34
  153. package/dist/esm/polyfills/system.js +0 -6
  154. package/dist/esm/relativeTime-baa50aa2.js +0 -7
  155. package/dist/esm/salon-latest-styles_3.entry.js +0 -235
  156. package/dist/esm/utils-e97485e0.js +0 -19
  157. package/dist/favesalon-embed/p-05a1c88a.entry.js +0 -1
  158. package/dist/favesalon-embed/p-0acf0447.entry.js +0 -1
  159. package/dist/favesalon-embed/p-0bc4f624.js +0 -1
  160. package/dist/favesalon-embed/p-1af1515f.entry.js +0 -1
  161. package/dist/favesalon-embed/p-1cba5fc9.entry.js +0 -1
  162. package/dist/favesalon-embed/p-39a4ef15.entry.js +0 -1
  163. package/dist/favesalon-embed/p-3e2cb05b.entry.js +0 -1
  164. package/dist/favesalon-embed/p-47e646f8.js +0 -1
  165. package/dist/favesalon-embed/p-487b311f.entry.js +0 -1
  166. package/dist/favesalon-embed/p-55387c2f.entry.js +0 -1
  167. package/dist/favesalon-embed/p-566f05b4.entry.js +0 -1
  168. package/dist/favesalon-embed/p-862a0de0.entry.js +0 -1
  169. package/dist/favesalon-embed/p-9fe0cbeb.js +0 -2
  170. package/dist/favesalon-embed/p-a33331cc.js +0 -1
  171. package/dist/favesalon-embed/p-aeeb7b5f.entry.js +0 -1
  172. package/dist/favesalon-embed/p-b08e5b54.js +0 -6
  173. package/dist/favesalon-embed/p-b5cca5fc.entry.js +0 -1
  174. package/dist/favesalon-embed/p-c7fb7af5.js +0 -1580
  175. package/dist/favesalon-embed/p-ccab56d8.js +0 -1
  176. package/dist/favesalon-embed/p-d6e13053.entry.js +0 -1
  177. package/dist/favesalon-embed/p-dee42d34.entry.js +0 -1
  178. package/dist/favesalon-embed/p-e661ca1d.entry.js +0 -1
  179. package/dist/favesalon-embed/p-eeceab9c.entry.js +0 -1
  180. package/dist/index.cjs.js +0 -1
  181. package/dist/index.js +0 -1
  182. /package/dist/{esm → favesalon-embed}/colors-ea36347a.js +0 -0
  183. /package/dist/{collection/index.js → types/components/activate-form/test/activate-form.e2e.d.ts} +0 -0
@@ -1,138 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { Colors } from '../../constants/colors';
3
- import HttpService from '../../services/services';
4
- export class ChatBox {
5
- constructor() {
6
- this.onClickRoom = (chatRoom) => {
7
- this.activeRoom = chatRoom;
8
- };
9
- this.primaryColor = undefined;
10
- this.accessToken = undefined;
11
- this.senderId = undefined;
12
- this.chatRooms = undefined;
13
- this.activeRoom = undefined;
14
- }
15
- componentWillLoad() {
16
- this.fetchData();
17
- }
18
- async fetchData() {
19
- try {
20
- this.chatRooms = await HttpService().fetchChatRooms(this.accessToken);
21
- (this.chatRooms || []).forEach((chatRoom) => {
22
- HttpService().fetchChatMessages(chatRoom.uid, (messages) => {
23
- this.chatRooms = [...(this.chatRooms || [])].map((room) => {
24
- if (chatRoom.uid === room.uid) {
25
- room.messages = messages;
26
- }
27
- return room;
28
- });
29
- });
30
- });
31
- }
32
- catch (e) {
33
- this.chatRooms = [];
34
- }
35
- }
36
- render() {
37
- const senderInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id === Number(this.senderId)) : null;
38
- const receiverInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id !== Number(this.senderId)) : null;
39
- return (h("div", { class: `chat-widget ${this.activeRoom ? 'has-chat-room' : ''}` }, h("div", { class: "chat-widget--sidebar" }, h("chat-rooms", { "sender-id": Number(this.senderId), activeRoom: this.activeRoom, chatRooms: this.chatRooms, onClickRoom: this.onClickRoom })), h("div", { class: "chat-widget--content" }, receiverInfo && (h("div", { class: "chat-widget--content-header" }, h("user-avatar", { size: 40, avatar: receiverInfo.avatar, name: h("div", { class: "chat-room--user-name", style: { color: '#fff' } }, receiverInfo.fullName), shortName: String(receiverInfo.fullName || '').charAt(0) }), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-widget--content-close", onClick: () => this.onClickRoom(null) })))), h("div", { style: {
40
- flexShrink: '1',
41
- flexGrow: '1',
42
- overflowY: 'auto',
43
- padding: '16px',
44
- } }, this.activeRoom && (h("chat-messages", { sender: senderInfo, receiver: receiverInfo, messages: this.activeRoom.messages || [], "chat-room-id": this.activeRoom.uid })), !this.activeRoom && (h("div", { style: { paddingTop: '72px', textAlign: 'center' } }, h("div", { class: "chat-widget--content-title" }, "Welcome back!"), h("div", { style: { marginTop: "12px" } }, "Select any user in left hand side to get started.")))), this.activeRoom && (h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": Number(senderInfo.id), "chat-room-id": this.activeRoom.uid }))))));
45
- }
46
- static get is() { return "chat-box"; }
47
- static get originalStyleUrls() {
48
- return {
49
- "$": ["index.css"]
50
- };
51
- }
52
- static get styleUrls() {
53
- return {
54
- "$": ["index.css"]
55
- };
56
- }
57
- static get properties() {
58
- return {
59
- "primaryColor": {
60
- "type": "string",
61
- "mutable": false,
62
- "complexType": {
63
- "original": "string",
64
- "resolved": "string",
65
- "references": {}
66
- },
67
- "required": false,
68
- "optional": false,
69
- "docs": {
70
- "tags": [],
71
- "text": ""
72
- },
73
- "attribute": "primary-color",
74
- "reflect": false
75
- },
76
- "accessToken": {
77
- "type": "string",
78
- "mutable": false,
79
- "complexType": {
80
- "original": "string",
81
- "resolved": "string",
82
- "references": {}
83
- },
84
- "required": false,
85
- "optional": false,
86
- "docs": {
87
- "tags": [],
88
- "text": ""
89
- },
90
- "attribute": "access-token",
91
- "reflect": false
92
- },
93
- "senderId": {
94
- "type": "string",
95
- "mutable": false,
96
- "complexType": {
97
- "original": "string",
98
- "resolved": "string",
99
- "references": {}
100
- },
101
- "required": false,
102
- "optional": false,
103
- "docs": {
104
- "tags": [],
105
- "text": ""
106
- },
107
- "attribute": "sender-id",
108
- "reflect": false
109
- }
110
- };
111
- }
112
- static get states() {
113
- return {
114
- "chatRooms": {},
115
- "activeRoom": {}
116
- };
117
- }
118
- static get methods() {
119
- return {
120
- "fetchData": {
121
- "complexType": {
122
- "signature": "() => Promise<void>",
123
- "parameters": [],
124
- "references": {
125
- "Promise": {
126
- "location": "global"
127
- }
128
- },
129
- "return": "Promise<void>"
130
- },
131
- "docs": {
132
- "text": "",
133
- "tags": []
134
- }
135
- }
136
- };
137
- }
138
- }
@@ -1,101 +0,0 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
2
-
3
- chat-button {
4
- position: relative;
5
- }
6
-
7
- .chat-button--indicator {
8
- cursor: pointer;
9
- position: absolute;
10
- inset: 0;
11
- }
12
-
13
- .chat-button--counter {
14
- background-color: rgb(240, 90, 97);
15
- border: 1px solid rgb(255, 255, 255);
16
- position: absolute;
17
- right: 6px;
18
- top: 0px;
19
- height: 8px;
20
- width: 8px;
21
- -moz-border-radius: 8px;
22
- -webkit-border-radius: 8px;
23
- border-radius: 8px;
24
- }
25
-
26
-
27
- .chat-box {
28
- font-family: 'Roboto', sans-serif;
29
- -webkit-font-smoothing: antialiased;
30
- -moz-osx-font-smoothing: grayscale;
31
-
32
- background-color: #fff;
33
- display: flex;
34
- flex-direction: column;
35
- position: fixed;
36
- inset: 0px;
37
- z-index: 20000;
38
- font-size: 16px;
39
- text-align: left;
40
- color: #141414;
41
- }
42
-
43
- .chat-box--header {
44
- display: flex;
45
- justify-content: space-between;
46
- padding: 16px;
47
- position: relative;
48
- }
49
-
50
- .chat-box--title {
51
- color: #fff;
52
- font-size: 20px;
53
- font-weight: 600;
54
- line-height: 1;
55
- display: flex;
56
- align-items: center;
57
- justify-content: space-between;
58
- margin: 0;
59
- }
60
-
61
- .chat-box--close {
62
- cursor: pointer;
63
- display: block;
64
- position: absolute;
65
- z-index: 1000;
66
- top: 50%;
67
- right: 0;
68
- width: 30px;
69
- height: 30px;
70
- transform: translate(0, -50%);
71
- background-size: contain;
72
- background-repeat: no-repeat;
73
- background-position: center center;
74
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
75
- }
76
-
77
-
78
- @media (min-width: 768px) {
79
- .chat-box {
80
- border: 1px solid #fff;
81
- left: unset;
82
- top: unset;
83
- right: 1px;
84
- bottom: 0px;
85
- height: 420px;
86
- max-height: 90vh;
87
- width: 600px;
88
- -moz-border-radius: 8px 8px 0px 0px;
89
- -webkit-border-radius: 8px 8px 0px 0px;
90
- border-radius: 8px 8px 0px 0px;
91
- -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
92
- -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
93
- box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 24px;
94
- }
95
-
96
- .chat-box--header {
97
- -moz-border-radius: 8px 8px 0px 0px;
98
- -webkit-border-radius: 8px 8px 0px 0px;
99
- border-radius: 8px 8px 0px 0px;
100
- }
101
- }
@@ -1,155 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { Colors } from '../../constants/colors';
3
- import HttpService from '../../services/services';
4
- export class ChatButton {
5
- constructor() {
6
- this.primaryColor = undefined;
7
- this.accessToken = undefined;
8
- this.senderId = undefined;
9
- this.receiverId = undefined;
10
- this.senderInfo = {};
11
- this.receiverInfo = {};
12
- this.chatRoom = {};
13
- this.chatMessages = undefined;
14
- this.isChatExpanded = undefined;
15
- }
16
- componentWillLoad() {
17
- this.fetchData();
18
- }
19
- async fetchData() {
20
- try {
21
- this.chatRoom = await HttpService().createChatRoom(this.receiverId, this.accessToken);
22
- if (this.chatRoom) {
23
- HttpService().fetchChatMessages(this.chatRoom.uid, (messages) => this.chatMessages = messages);
24
- this.senderInfo = this.chatRoom.members.find(user => user.id === Number(this.senderId));
25
- this.receiverInfo = this.chatRoom.members.find(user => user.id === Number(this.receiverId));
26
- }
27
- }
28
- catch (e) { }
29
- }
30
- render() {
31
- const unreadMessages = (this.chatMessages || []).filter(message => {
32
- return Boolean(message.unRead) && message.senderId !== this.senderInfo.id;
33
- });
34
- return (h("div", null, h("div", { class: "chat-button--indicator", onClick: () => this.isChatExpanded = true }, unreadMessages.length > 0 && h("span", { class: "chat-button--counter" })), h("div", { class: "chat-box", style: this.isChatExpanded ? {} : { display: 'none' } }, h("div", { class: "chat-box--header", style: {
35
- backgroundColor: this.primaryColor || '#f05a61',
36
- } }, h("h3", { class: "chat-box--title" }, "Chat"), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-box--close", onClick: () => this.isChatExpanded = false }))), h("div", { style: {
37
- flexShrink: '1',
38
- flexGrow: '1',
39
- overflowY: 'auto',
40
- padding: '16px',
41
- } }, h("chat-messages", { sender: this.senderInfo, receiver: this.receiverInfo, messages: this.chatMessages || [], "chat-room-id": this.chatRoom.uid })), h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": this.senderInfo.id ? Number(this.senderInfo.id) : null, "chat-room-id": this.chatRoom.uid })))));
42
- }
43
- static get is() { return "chat-button"; }
44
- static get originalStyleUrls() {
45
- return {
46
- "$": ["index.css"]
47
- };
48
- }
49
- static get styleUrls() {
50
- return {
51
- "$": ["index.css"]
52
- };
53
- }
54
- static get properties() {
55
- return {
56
- "primaryColor": {
57
- "type": "string",
58
- "mutable": false,
59
- "complexType": {
60
- "original": "string",
61
- "resolved": "string",
62
- "references": {}
63
- },
64
- "required": false,
65
- "optional": false,
66
- "docs": {
67
- "tags": [],
68
- "text": ""
69
- },
70
- "attribute": "primary-color",
71
- "reflect": false
72
- },
73
- "accessToken": {
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": "access-token",
88
- "reflect": false
89
- },
90
- "senderId": {
91
- "type": "string",
92
- "mutable": false,
93
- "complexType": {
94
- "original": "string",
95
- "resolved": "string",
96
- "references": {}
97
- },
98
- "required": false,
99
- "optional": false,
100
- "docs": {
101
- "tags": [],
102
- "text": ""
103
- },
104
- "attribute": "sender-id",
105
- "reflect": false
106
- },
107
- "receiverId": {
108
- "type": "string",
109
- "mutable": false,
110
- "complexType": {
111
- "original": "string",
112
- "resolved": "string",
113
- "references": {}
114
- },
115
- "required": false,
116
- "optional": false,
117
- "docs": {
118
- "tags": [],
119
- "text": ""
120
- },
121
- "attribute": "receiver-id",
122
- "reflect": false
123
- }
124
- };
125
- }
126
- static get states() {
127
- return {
128
- "senderInfo": {},
129
- "receiverInfo": {},
130
- "chatRoom": {},
131
- "chatMessages": {},
132
- "isChatExpanded": {}
133
- };
134
- }
135
- static get methods() {
136
- return {
137
- "fetchData": {
138
- "complexType": {
139
- "signature": "() => Promise<void>",
140
- "parameters": [],
141
- "references": {
142
- "Promise": {
143
- "location": "global"
144
- }
145
- },
146
- "return": "Promise<void>"
147
- },
148
- "docs": {
149
- "text": "",
150
- "tags": []
151
- }
152
- }
153
- };
154
- }
155
- }
@@ -1,40 +0,0 @@
1
- .chat-form {
2
- display: flex;
3
- height: 56px;
4
- width: 100%;
5
- }
6
-
7
- .chat-form #chat-form--input {
8
- border: none;
9
- outline: none;
10
- flex-shrink: 1;
11
- flex-grow: 1;
12
- height: 100%;
13
- font-size: 16px;
14
- padding-left: 16px;
15
- padding-right: 16px;
16
-
17
- -moz-border-radius: 6px;
18
- -webkit-border-radius: 6px;
19
- border-radius: 6px;
20
- }
21
-
22
- .chat-form > button {
23
- background-color: #001529;
24
- border: none;
25
- color: #fff;
26
- cursor: pointer;
27
- font-size: 16px;
28
- min-width: 80px;
29
- height: 42px;
30
- margin: 7px;
31
- -moz-border-radius: 4px;
32
- -webkit-border-radius: 4px;
33
- border-radius: 4px;
34
- }
35
-
36
- .chat-form > button:hover,
37
- .chat-form > button:focus,
38
- .chat-form > button:active {
39
- background-color: #001529;
40
- }
@@ -1,79 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import HttpService from '../../services/services';
3
- export class ChatForm {
4
- constructor() {
5
- this.onSubmitMessage = async () => {
6
- try {
7
- const elNewMessage = document.getElementById('chat-form--input');
8
- if (!!elNewMessage.value) {
9
- await HttpService().sendChatMessage({
10
- message: elNewMessage.value,
11
- senderId: this.senderId,
12
- chatRoomId: this.chatRoomId,
13
- });
14
- elNewMessage.value = '';
15
- }
16
- }
17
- catch (error) { }
18
- };
19
- this.senderId = undefined;
20
- this.chatRoomId = undefined;
21
- }
22
- render() {
23
- return (h("div", { class: "chat-form" }, h("input", { id: "chat-form--input", type: "text", placeholder: "Enter a message...", onKeyPress: (evt) => {
24
- if (evt.key === 'Enter') {
25
- evt.preventDefault();
26
- this.onSubmitMessage();
27
- }
28
- } }), h("button", { type: "button", onClick: () => this.onSubmitMessage() }, "Send")));
29
- }
30
- static get is() { return "chat-form"; }
31
- static get originalStyleUrls() {
32
- return {
33
- "$": ["index.css"]
34
- };
35
- }
36
- static get styleUrls() {
37
- return {
38
- "$": ["index.css"]
39
- };
40
- }
41
- static get properties() {
42
- return {
43
- "senderId": {
44
- "type": "number",
45
- "mutable": false,
46
- "complexType": {
47
- "original": "number",
48
- "resolved": "number",
49
- "references": {}
50
- },
51
- "required": false,
52
- "optional": false,
53
- "docs": {
54
- "tags": [],
55
- "text": ""
56
- },
57
- "attribute": "sender-id",
58
- "reflect": false
59
- },
60
- "chatRoomId": {
61
- "type": "string",
62
- "mutable": false,
63
- "complexType": {
64
- "original": "string",
65
- "resolved": "string",
66
- "references": {}
67
- },
68
- "required": false,
69
- "optional": false,
70
- "docs": {
71
- "tags": [],
72
- "text": ""
73
- },
74
- "attribute": "chat-room-id",
75
- "reflect": false
76
- }
77
- };
78
- }
79
- }
@@ -1,48 +0,0 @@
1
- .chat-message {
2
- overflow: hidden;
3
- clear: both;
4
- min-width: 240px;
5
- }
6
-
7
- .chat-message + .chat-message {
8
- margin-top: 6px;
9
- }
10
-
11
- .chat-message--meta {
12
- display: flex;
13
- }
14
-
15
- .chat-message--title {
16
- background-color: #F1F1F1;
17
- padding: 8px 12px;
18
- position: relative;
19
- float: left;
20
- margin-top: 6px;
21
- -moz-border-radius: 0 10px 10px 10px;
22
- -webkit-border-radius: 0 10px 10px 10px;
23
- border-radius: 0 10px 10px 10px;
24
- }
25
-
26
- .chat-message--time {
27
- clear: both;
28
- color: #999;
29
- font-size: 75%;
30
- padding-top: 2px;
31
- }
32
-
33
- .chat-message.is-owner .chat-message--content {
34
- margin-left: 12px;
35
- }
36
-
37
- .chat-message.is-guest .chat-message--meta {
38
- flex-direction: row-reverse;
39
- }
40
- .chat-message.is-guest .chat-message--title {
41
- background-color: #EFF7FF;
42
- float: right;
43
- margin-right: 12px;
44
- text-align: right;
45
- -moz-border-radius: 10px 0 10px 10px;
46
- -webkit-border-radius: 10px 0 10px 10px;
47
- border-radius: 10px 0 10px 10px;
48
- }