@meetelise/chat 1.20.28 → 1.20.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/dist/index.js +134 -117
- package/src/WebComponent/Launcher.ts +5 -3
- package/src/WebComponent/me-chat.ts +64 -34
|
@@ -183,9 +183,11 @@ export class Launcher extends LitElement {
|
|
|
183
183
|
return html` <div class="launcher__call-to-action-option">${text}</div> `;
|
|
184
184
|
};
|
|
185
185
|
|
|
186
|
-
onClickSSTOption = (e
|
|
187
|
-
e
|
|
188
|
-
|
|
186
|
+
onClickSSTOption = (e?: MouseEvent): void => {
|
|
187
|
+
if (e) {
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
e.stopPropagation();
|
|
190
|
+
}
|
|
189
191
|
this.isSSTWindowOpen = true;
|
|
190
192
|
};
|
|
191
193
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css, html, LitElement, TemplateResult } from "lit";
|
|
1
|
+
import { css, html, svg, LitElement, TemplateResult } from "lit";
|
|
2
2
|
import { customElement, property, state } from "lit/decorators.js";
|
|
3
3
|
import { classMap } from "lit/directives/class-map.js";
|
|
4
4
|
import { createRef, ref, Ref } from "lit/directives/ref.js";
|
|
@@ -44,23 +44,23 @@ export class MEChat extends LitElement {
|
|
|
44
44
|
width: 100%;
|
|
45
45
|
height: 100px;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.contactTabPopup {
|
|
48
48
|
position: fixed;
|
|
49
|
-
bottom:
|
|
49
|
+
bottom: 720px;
|
|
50
50
|
right: 0px;
|
|
51
|
-
width:
|
|
52
|
-
height: 56px;
|
|
51
|
+
width: 300px;
|
|
53
52
|
padding-left: 20px;
|
|
54
53
|
padding-right: 20px;
|
|
55
54
|
z-index: 5;
|
|
56
55
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
|
|
60
|
-
backdrop-filter: blur(5px);
|
|
61
|
-
|
|
62
|
-
border-radius: 10px 0px 0px 10px;
|
|
56
|
+
background: #353535;
|
|
57
|
+
border-radius: 10px 0px 0px 0px;
|
|
63
58
|
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: space-between;
|
|
62
|
+
}
|
|
63
|
+
.actionTabBttn {
|
|
64
64
|
font-family: "Poppins";
|
|
65
65
|
font-style: normal;
|
|
66
66
|
font-weight: 600;
|
|
@@ -68,14 +68,20 @@ export class MEChat extends LitElement {
|
|
|
68
68
|
line-height: 22px;
|
|
69
69
|
|
|
70
70
|
color: #ffffff;
|
|
71
|
+
border: none;
|
|
72
|
+
background: none;
|
|
73
|
+
padding: 0;
|
|
71
74
|
|
|
72
75
|
display: flex;
|
|
73
76
|
align-items: center;
|
|
74
|
-
|
|
77
|
+
gap: 5px;
|
|
75
78
|
}
|
|
76
|
-
.
|
|
77
|
-
background: rgba(0, 0, 0, 0.8);
|
|
79
|
+
.actionTabBttn:hover {
|
|
78
80
|
cursor: pointer;
|
|
81
|
+
color: #f0f0f0;
|
|
82
|
+
}
|
|
83
|
+
.heavyLabel {
|
|
84
|
+
font-weight: bold;
|
|
79
85
|
}
|
|
80
86
|
`;
|
|
81
87
|
static session: Promise<Talk.Session> = Talk.ready.then(() => {
|
|
@@ -323,11 +329,32 @@ export class MEChat extends LitElement {
|
|
|
323
329
|
this.launcherRef.value?.onClickEmailOption();
|
|
324
330
|
};
|
|
325
331
|
|
|
332
|
+
handleTourClicked = (): void => {
|
|
333
|
+
this.popup?.hide();
|
|
334
|
+
this.hideLauncher = false;
|
|
335
|
+
|
|
336
|
+
this.launcherRef.value?.onClickSSTOption();
|
|
337
|
+
};
|
|
338
|
+
|
|
326
339
|
render(): TemplateResult {
|
|
327
340
|
installLauncher();
|
|
328
341
|
|
|
329
342
|
return html`
|
|
330
343
|
<div>
|
|
344
|
+
${this.hideLauncher
|
|
345
|
+
? html` <div class="contactTabPopup">
|
|
346
|
+
<button class="actionTabBttn" @click=${this.handleContactClicked}>
|
|
347
|
+
${TopEmailIcon}
|
|
348
|
+
<p><span class="heavyLabel">Email</span> an agent</p>
|
|
349
|
+
${TopChevronIcon}
|
|
350
|
+
</button>
|
|
351
|
+
<button class="actionTabBttn" @click=${this.handleTourClicked}>
|
|
352
|
+
${TopTourIcon}
|
|
353
|
+
<p><span class="heavyLabel">Book</span> a tour</p>
|
|
354
|
+
${TopChevronIcon}
|
|
355
|
+
</button>
|
|
356
|
+
</div>`
|
|
357
|
+
: ""}
|
|
331
358
|
<div
|
|
332
359
|
class=${classMap({
|
|
333
360
|
launcherContainer: true,
|
|
@@ -379,26 +406,6 @@ export class MEChat extends LitElement {
|
|
|
379
406
|
</meetelise-launcher>`
|
|
380
407
|
: ""}
|
|
381
408
|
</div>
|
|
382
|
-
${this.hideLauncher
|
|
383
|
-
? html` <button
|
|
384
|
-
class="contactBttnPopup"
|
|
385
|
-
@click=${this.handleContactClicked}
|
|
386
|
-
>
|
|
387
|
-
<svg
|
|
388
|
-
width="24"
|
|
389
|
-
height="23"
|
|
390
|
-
viewBox="0 0 24 23"
|
|
391
|
-
fill="none"
|
|
392
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
393
|
-
>
|
|
394
|
-
<path
|
|
395
|
-
d="M17.2816 8.04964H5.78216C5.47717 8.04964 5.18468 8.1708 4.96902 8.38646C4.75336 8.60211 4.63221 8.89461 4.63221 9.19959C4.63221 9.50458 4.75336 9.79707 4.96902 10.0127C5.18468 10.2284 5.47717 10.3495 5.78216 10.3495H17.2816C17.5866 10.3495 17.8791 10.2284 18.0948 10.0127C18.3104 9.79707 18.4316 9.50458 18.4316 9.19959C18.4316 8.89461 18.3104 8.60211 18.0948 8.38646C17.8791 8.1708 17.5866 8.04964 17.2816 8.04964ZM12.6819 12.6494H5.78216C5.47717 12.6494 5.18468 12.7706 4.96902 12.9863C4.75336 13.2019 4.63221 13.4944 4.63221 13.7994C4.63221 14.1044 4.75336 14.3969 4.96902 14.6125C5.18468 14.8282 5.47717 14.9493 5.78216 14.9493H12.6819C12.9868 14.9493 13.2793 14.8282 13.495 14.6125C13.7106 14.3969 13.8318 14.1044 13.8318 13.7994C13.8318 13.4944 13.7106 13.2019 13.495 12.9863C13.2793 12.7706 12.9868 12.6494 12.6819 12.6494ZM11.5319 0C10.0218 0 8.52642 0.297443 7.13124 0.875347C5.73605 1.45325 4.46836 2.3003 3.40054 3.36812C1.24396 5.5247 0.0324129 8.44964 0.0324129 11.4995C0.0223598 14.1549 0.941784 16.7301 2.6313 18.7787L0.3314 21.0786C0.171835 21.2403 0.0637445 21.4456 0.0207662 21.6687C-0.0222121 21.8918 0.00184785 22.1226 0.0899103 22.332C0.185423 22.5389 0.340259 22.7128 0.534764 22.8315C0.72927 22.9503 0.954673 23.0086 1.18236 22.999H11.5319C14.5818 22.999 17.5067 21.7874 19.6633 19.6309C21.8198 17.4743 23.0314 14.5493 23.0314 11.4995C23.0314 8.44964 21.8198 5.5247 19.6633 3.36812C17.5067 1.21155 14.5818 0 11.5319 0ZM11.5319 20.6991H3.95374L5.02319 19.6296C5.23737 19.4142 5.35759 19.1227 5.35759 18.8189C5.35759 18.5151 5.23737 18.2237 5.02319 18.0082C3.51743 16.5041 2.57975 14.5245 2.3699 12.4066C2.16006 10.2887 2.69103 8.1635 3.87235 6.39317C5.05368 4.62284 6.81227 3.31687 8.84851 2.69775C10.8848 2.07863 13.0727 2.18468 15.0395 2.99782C17.0063 3.81096 18.6304 5.28088 19.6349 7.15716C20.6395 9.03343 20.9625 11.2 20.5488 13.2877C20.1351 15.3754 19.0104 17.255 17.3662 18.6065C15.722 19.9579 13.6602 20.6974 11.5319 20.6991Z"
|
|
396
|
-
fill="white"
|
|
397
|
-
/>
|
|
398
|
-
</svg>
|
|
399
|
-
<p>Contact us</p>
|
|
400
|
-
</button>`
|
|
401
|
-
: ""}
|
|
402
409
|
</div>
|
|
403
410
|
`;
|
|
404
411
|
}
|
|
@@ -431,3 +438,26 @@ declare global {
|
|
|
431
438
|
RCTPCampaign?: { CampaignDetails: { Source: string } };
|
|
432
439
|
}
|
|
433
440
|
}
|
|
441
|
+
|
|
442
|
+
const TopTourIcon = svg`<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
443
|
+
<path d="M17.5286 6.72109H0.00730896C0.065762 4.35374 2.00202 2.45401 4.38399 2.45401H4.93198V3.91534C4.93198 4.22222 5.18041 4.46333 5.47998 4.46333C5.77955 4.46333 6.02798 4.22222 6.02798 3.91534V2.45401H11.508V3.91534C11.508 4.22222 11.7564 4.46333 12.056 4.46333C12.3555 4.46333 12.604 4.22222 12.604 3.91534V2.45401H13.1519C15.5339 2.45401 17.4702 4.35374 17.5286 6.72109V6.72109Z" fill="#B6C2FE"/>
|
|
444
|
+
<path d="M17.5359 7.45181V15.606C17.5359 18.0318 15.5704 19.99 13.1519 19.99H4.38398C1.96548 19.99 0 18.0318 0 15.606V7.45181H17.5359Z" fill="white"/>
|
|
445
|
+
<path d="M5.47998 1V2.46133" stroke="#B6C2FE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
446
|
+
<path d="M12.0559 1V2.46133" stroke="#B6C2FE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
|
447
|
+
<path d="M0 6.72115H0.00730262C-4.01349e-06 6.75768 0 6.80152 0 6.83805V6.72115Z" fill="white"/>
|
|
448
|
+
<path d="M17.5359 6.72115V6.83805C17.5359 6.80152 17.5359 6.75768 17.5286 6.72115H17.5359Z" fill="white"/>
|
|
449
|
+
<path d="M5.30463 13.2459L7.33587 15.2772C7.62083 15.5621 8.08115 15.5621 8.36611 15.2772L12.224 11.4193" stroke="#404040" stroke-miterlimit="10" stroke-linecap="round"/>
|
|
450
|
+
</svg>
|
|
451
|
+
`;
|
|
452
|
+
|
|
453
|
+
const TopEmailIcon = svg`<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
454
|
+
<path d="M14.4 0H4.8C2.14903 0 0 2.14903 0 4.8V11.2C0 13.851 2.14903 16 4.8 16H14.4C17.051 16 19.2 13.851 19.2 11.2V4.8C19.2 2.14903 17.051 0 14.4 0Z" fill="white"/>
|
|
455
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.79997 0H14.4C16.006 0 17.4278 0.788745 18.2991 2H0.900805C1.77215 0.788745 3.19395 0 4.79997 0Z" fill="#B6C2FE"/>
|
|
456
|
+
<path d="M5.33594 5.08789L8.78398 7.9999C9.27198 8.4159 9.91992 8.4159 10.4159 7.9999L13.864 5.08789" stroke="#404040" stroke-miterlimit="10" stroke-linecap="round"/>
|
|
457
|
+
</svg>
|
|
458
|
+
`;
|
|
459
|
+
|
|
460
|
+
const TopChevronIcon = svg`<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
461
|
+
<path d="M1 7L4 4L1 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
|
462
|
+
</svg>
|
|
463
|
+
`;
|