od-support-chat 1.0.10 → 1.0.11
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from"./info.guest.mjs";import
|
|
1
|
+
import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}from"react";import i,{keyframes as a}from"styled-components";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";const l=a`
|
|
2
2
|
from {
|
|
3
3
|
opacity: 0;
|
|
4
4
|
transform: translateY(20px);
|
|
@@ -7,7 +7,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
7
7
|
opacity: 1;
|
|
8
8
|
transform: translateY(0);
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,u=a`
|
|
11
11
|
from {
|
|
12
12
|
opacity: 1;
|
|
13
13
|
transform: translateY(0);
|
|
@@ -16,7 +16,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
16
16
|
opacity: 0;
|
|
17
17
|
transform: translateY(20px);
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`,d=i.div`
|
|
20
20
|
position: fixed;
|
|
21
21
|
right: 0;
|
|
22
22
|
top: 50%;
|
|
@@ -29,8 +29,8 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
29
29
|
transition: all 0.5s ease;
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
z-index: 10000;
|
|
32
|
-
animation: ${({displayChat:e})=>e?
|
|
33
|
-
`,
|
|
32
|
+
animation: ${({displayChat:e})=>e?l:u} 0.3s ease-in-out forwards;
|
|
33
|
+
`,f=i.div`
|
|
34
34
|
position: fixed;
|
|
35
35
|
right: 0;
|
|
36
36
|
bottom: 10%;
|
|
@@ -41,8 +41,8 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
41
41
|
transition: all 0.5s ease;
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
z-index: 10000;
|
|
44
|
-
animation: ${({displayChat:e})=>e?
|
|
45
|
-
`,
|
|
44
|
+
animation: ${({displayChat:e})=>e?u:l} 0.3s ease-in-out forwards;
|
|
45
|
+
`,ee=i.div`
|
|
46
46
|
position: absolute;
|
|
47
47
|
top: 5;
|
|
48
48
|
margin-left: 5px;
|
|
@@ -55,7 +55,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
55
55
|
font-size: 14px;
|
|
56
56
|
color: rgb(78, 161, 211);
|
|
57
57
|
padding: 5px;
|
|
58
|
-
`,
|
|
58
|
+
`,te=i.div`
|
|
59
59
|
display: flex;
|
|
60
60
|
flex-direction: column;
|
|
61
61
|
align-items: flex-start;
|
|
@@ -63,7 +63,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
63
63
|
font-weight: 600;
|
|
64
64
|
font-size: 12px;
|
|
65
65
|
color: rgb(78, 161, 211);
|
|
66
|
-
`,
|
|
66
|
+
`,p=i.div`
|
|
67
67
|
position: absolute;
|
|
68
68
|
top: 0;
|
|
69
69
|
right: 0;
|
|
@@ -75,7 +75,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
75
75
|
:hover {
|
|
76
76
|
cursor: pointer;
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,m=i.div`
|
|
79
79
|
position: absolute;
|
|
80
80
|
text-align: center;
|
|
81
81
|
align-items: center;
|
|
@@ -93,7 +93,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
93
93
|
color: white;
|
|
94
94
|
padding: 5px;
|
|
95
95
|
background-color: rgb(78, 161, 211);
|
|
96
|
-
`,
|
|
96
|
+
`,h=i.div`
|
|
97
97
|
position: absolute;
|
|
98
98
|
text-align: center;
|
|
99
99
|
align-items: center;
|
|
@@ -110,7 +110,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
110
110
|
color: white;
|
|
111
111
|
padding: 10px;
|
|
112
112
|
background-color: rgb(78, 161, 211);
|
|
113
|
-
`,ne=
|
|
113
|
+
`,ne=i.div`
|
|
114
114
|
position: absolute;
|
|
115
115
|
top: 80px;
|
|
116
116
|
margin-left: 5px;
|
|
@@ -120,13 +120,13 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
120
120
|
max-height: 83%;
|
|
121
121
|
overflow-x: hidden;
|
|
122
122
|
overflow-y: auto;
|
|
123
|
-
`,re=
|
|
123
|
+
`,re=i.div`
|
|
124
124
|
display: flex;
|
|
125
125
|
width: 100%;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
padding: 15px;
|
|
128
128
|
color: #454552;
|
|
129
|
-
`,
|
|
129
|
+
`,ie=i.div`
|
|
130
130
|
width: 100%;
|
|
131
131
|
display: flex;
|
|
132
132
|
flex-direction: column;
|
|
@@ -152,7 +152,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
152
152
|
font-size: 12px;
|
|
153
153
|
text-align: left;
|
|
154
154
|
}
|
|
155
|
-
`,
|
|
155
|
+
`,g=i.div`
|
|
156
156
|
width: 100%;
|
|
157
157
|
display: flex;
|
|
158
158
|
flex-direction: column;
|
|
@@ -179,7 +179,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
179
179
|
text-align: left;
|
|
180
180
|
background-color: #f5f5f5;
|
|
181
181
|
}
|
|
182
|
-
`,
|
|
182
|
+
`,_=i.div`
|
|
183
183
|
position: absolute;
|
|
184
184
|
display: flex;
|
|
185
185
|
bottom: 10px;
|
|
@@ -189,7 +189,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
189
189
|
align-items: center;
|
|
190
190
|
width: 100%;
|
|
191
191
|
gap: 5px;
|
|
192
|
-
`,
|
|
192
|
+
`,v=i.input`
|
|
193
193
|
bottom: 0;
|
|
194
194
|
width: 70%;
|
|
195
195
|
height: 25px;
|
|
@@ -203,7 +203,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
203
203
|
:focus {
|
|
204
204
|
outline: none;
|
|
205
205
|
}
|
|
206
|
-
`,
|
|
206
|
+
`,y=i.div`
|
|
207
207
|
height: 25px;
|
|
208
208
|
outline: none;
|
|
209
209
|
border: none;
|
|
@@ -219,7 +219,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
219
219
|
font-size: 1rem;
|
|
220
220
|
font-weight: 500;
|
|
221
221
|
cursor: pointer;
|
|
222
|
-
`,
|
|
222
|
+
`,b=i.div`
|
|
223
223
|
position: absolute;
|
|
224
224
|
top: 80px;
|
|
225
225
|
margin-left: 25px;
|
|
@@ -227,7 +227,7 @@ import e from"./info.guest.mjs";import t,{useEffect as n,useRef as r,useState as
|
|
|
227
227
|
height: 65%;
|
|
228
228
|
width: 83%;
|
|
229
229
|
margin-bottom: 25px;
|
|
230
|
-
`,
|
|
230
|
+
`,x=i.i`
|
|
231
231
|
width: 25px;
|
|
232
232
|
font-size: calc(5px + 1vmin);
|
|
233
|
-
`;var
|
|
233
|
+
`;var S,C,w;const T=`optimizetalk.com:8443`,E=({meetingLinkKey:i,customerSupportKey:a})=>{let l=n(null),[u]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[E]=r(u?100:15),[D,O]=r([]),k=n(),[A,j]=r(!0),[M,N]=r(!1),[P,F]=r(!1),[ae,I]=r(null),[L,R]=r(null),[z,B]=r(),[V,H]=r(),[U,W]=r(!1),[G,K]=r(``),q=n(null),J=n(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{S=new WebSocket(`wss://`+T+`/signal`),S.onopen=function(){console.log(`Websocket connection established`),Z(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),C=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),X(e,t),console.log(`WebSocket connection opened to chat room `+G)}},ce=(e,t)=>{F(!0),I(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=L?e:`Guest-`+oe()+`: `+e;R(n),console.log(`Joining : `+n),se(n,t)};function Y(){console.log(`Close the socket`),S!=null&&(console.log(`Send 'leave' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`leave`,data:i}),S.close())}function le(e,t){S.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),W(!0),w||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(w),console.log(`Session key `+r.referenceUsers[0].sessionKey),B(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),H(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),K(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),O(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),F(!1),B(null),H(null),W(!1),Y();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{w=setInterval(()=>{console.log(`Trying to connect customer support team ...`),X(e,t)},1e4)},X=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i},data:a}),console.log(`Meeting join request sent for guest `+e)},de=()=>{J.current.play()};function Z(){S.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(C)}),S.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{l.current?.scrollIntoView({behavior:`smooth`})},fe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:t}),console.log(`Chat message sent `+t),O(e=>[...e,{sender:L,msg:t}]),k.current.value=``)}},pe=()=>{let e=k.current.value;e&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:e}),console.log(`Chat message sent `+e),O(t=>[...t,{sender:L,msg:e}]),k.current.value=``,Q())};function $(e){let t=JSON.stringify(e);S.send(t)}function me(){Y(),j(!1),N(!0),B(null),H(null),W(!1)}function he(){S=new WebSocket(`wss://`+T+`/signal`),B(null),H(null),j(!0),N(!1),F(!1),W(!1),I(null),R(null),O([])}return t(()=>{Q()},[D,z]),c(`div`,{children:[!M&&c(d,{displayChat:A,maxWidth:E,children:[c(ee,{children:[s(te,{children:`OD Customer Support`}),s(p,{onClick:()=>me(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!P&&!z&&!U&&s(e,{startGuestChat:ce,guestEmail:ae}),P&&!z&&!U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sm text-sky-400`,children:`support@origindetector.com.`})]})]})}),P&&!z&&U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center text-sm`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sm text-sky-400`,children:`support@origindetector.com`})]})]})}),P&&z&&c(`div`,{children:[s(m,{children:`Live Chat`}),s(ne,{children:c(re,{children:[D&&D.length==0&&s(`div`,{className:`ml-2 text-sm`,children:` You are connected to our customer support team, how can we help you today? `}),D&&D.length>0&&c(`div`,{children:[D&&D.map(({sender:e,msg:t},n)=>e===L?c(g,{children:[s(`strong`,{children:L}),s(`p`,{children:t})]},n):c(ie,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:l})]})]})}),c(_,{children:[s(v,{ref:k,onKeyUp:fe,placeholder:`Enter your message`}),c(y,{onClick:pe,children:[s(x,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:q,src:`../../alert-sound.mp3`}),s(`audio`,{ref:J,src:`../../ding-small.mp3`})]}),M&&s(f,{className:`cursor-pointer`,onClick:()=>he(),displayChat:A,maxWidth:E,children:c(h,{children:[s(`i`,{className:`bx bx-chat`}),`Live Chat`]})})]})};export{E as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from"./info.guestMobile.mjs";import
|
|
1
|
+
import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState as r}from"react";import i,{keyframes as a}from"styled-components";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";const l=a`
|
|
2
2
|
from {
|
|
3
3
|
opacity: 0;
|
|
4
4
|
transform: translateY(20px);
|
|
@@ -7,7 +7,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
7
7
|
opacity: 1;
|
|
8
8
|
transform: translateY(0);
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,u=a`
|
|
11
11
|
from {
|
|
12
12
|
opacity: 1;
|
|
13
13
|
transform: translateY(0);
|
|
@@ -16,7 +16,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
16
16
|
opacity: 0;
|
|
17
17
|
transform: translateY(20px);
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`,d=i.div`
|
|
20
20
|
position: fixed;
|
|
21
21
|
left: 10%;
|
|
22
22
|
top: 50%;
|
|
@@ -29,8 +29,8 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
29
29
|
transition: all 0.5s ease;
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
z-index: 10000;
|
|
32
|
-
animation: ${({displayChat:e})=>e?
|
|
33
|
-
`,
|
|
32
|
+
animation: ${({displayChat:e})=>e?l:u} 0.3s ease-in-out forwards;
|
|
33
|
+
`,f=i.div`
|
|
34
34
|
position: fixed;
|
|
35
35
|
right: 0;
|
|
36
36
|
bottom: 2%;
|
|
@@ -41,8 +41,8 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
41
41
|
transition: all 0.5s ease;
|
|
42
42
|
overflow: hidden;
|
|
43
43
|
z-index: 10000;
|
|
44
|
-
animation: ${({displayChat:e})=>e?
|
|
45
|
-
`,
|
|
44
|
+
animation: ${({displayChat:e})=>e?u:l} 0.3s ease-in-out forwards;
|
|
45
|
+
`,ee=i.div`
|
|
46
46
|
position: absolute;
|
|
47
47
|
top: 5;
|
|
48
48
|
margin-left: 5px;
|
|
@@ -55,7 +55,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
55
55
|
font-size: 14px;
|
|
56
56
|
color: rgb(78, 161, 211);
|
|
57
57
|
padding: 5px;
|
|
58
|
-
`,
|
|
58
|
+
`,te=i.div`
|
|
59
59
|
display: flex;
|
|
60
60
|
flex-direction: column;
|
|
61
61
|
align-items: flex-start;
|
|
@@ -63,7 +63,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
63
63
|
font-weight: 600;
|
|
64
64
|
font-size: 12px;
|
|
65
65
|
color: rgb(78, 161, 211);
|
|
66
|
-
`,
|
|
66
|
+
`,p=i.div`
|
|
67
67
|
position: absolute;
|
|
68
68
|
top: 0;
|
|
69
69
|
right: 0;
|
|
@@ -75,7 +75,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
75
75
|
:hover {
|
|
76
76
|
cursor: pointer;
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,m=i.div`
|
|
79
79
|
position: absolute;
|
|
80
80
|
text-align: center;
|
|
81
81
|
align-items: center;
|
|
@@ -93,7 +93,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
93
93
|
color: white;
|
|
94
94
|
padding: 5px;
|
|
95
95
|
background-color: rgb(78, 161, 211);
|
|
96
|
-
`,
|
|
96
|
+
`,h=i.div`
|
|
97
97
|
position: absolute;
|
|
98
98
|
text-align: center;
|
|
99
99
|
align-items: center;
|
|
@@ -110,7 +110,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
110
110
|
color: white;
|
|
111
111
|
padding: 10px;
|
|
112
112
|
background-color: rgb(78, 161, 211);
|
|
113
|
-
`,ne=
|
|
113
|
+
`,ne=i.div`
|
|
114
114
|
position: absolute;
|
|
115
115
|
top: 80px;
|
|
116
116
|
margin-left: 5px;
|
|
@@ -120,13 +120,13 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
120
120
|
max-height: 83%;
|
|
121
121
|
overflow-x: hidden;
|
|
122
122
|
overflow-y: auto;
|
|
123
|
-
`,re=
|
|
123
|
+
`,re=i.div`
|
|
124
124
|
display: flex;
|
|
125
125
|
width: 100%;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
padding: 15px;
|
|
128
128
|
color: #454552;
|
|
129
|
-
`,
|
|
129
|
+
`,ie=i.div`
|
|
130
130
|
width: 100%;
|
|
131
131
|
display: flex;
|
|
132
132
|
flex-direction: column;
|
|
@@ -152,7 +152,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
152
152
|
font-size: 12px;
|
|
153
153
|
text-align: left;
|
|
154
154
|
}
|
|
155
|
-
`,
|
|
155
|
+
`,g=i.div`
|
|
156
156
|
width: 100%;
|
|
157
157
|
display: flex;
|
|
158
158
|
flex-direction: column;
|
|
@@ -179,7 +179,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
179
179
|
text-align: left;
|
|
180
180
|
background-color: #f5f5f5;
|
|
181
181
|
}
|
|
182
|
-
`,
|
|
182
|
+
`,_=i.div`
|
|
183
183
|
position: absolute;
|
|
184
184
|
display: flex;
|
|
185
185
|
bottom: 10px;
|
|
@@ -189,7 +189,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
189
189
|
align-items: center;
|
|
190
190
|
width: 100%;
|
|
191
191
|
gap: 5px;
|
|
192
|
-
`,
|
|
192
|
+
`,v=i.input`
|
|
193
193
|
bottom: 0;
|
|
194
194
|
width: 70%;
|
|
195
195
|
height: 25px;
|
|
@@ -203,7 +203,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
203
203
|
:focus {
|
|
204
204
|
outline: none;
|
|
205
205
|
}
|
|
206
|
-
`,
|
|
206
|
+
`,y=i.div`
|
|
207
207
|
height: 25px;
|
|
208
208
|
outline: none;
|
|
209
209
|
border: none;
|
|
@@ -219,7 +219,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
219
219
|
font-size: 1rem;
|
|
220
220
|
font-weight: 500;
|
|
221
221
|
cursor: pointer;
|
|
222
|
-
`,
|
|
222
|
+
`,b=i.div`
|
|
223
223
|
position: absolute;
|
|
224
224
|
top: 80px;
|
|
225
225
|
margin-left: 25px;
|
|
@@ -227,7 +227,7 @@ import e from"./info.guestMobile.mjs";import t,{useEffect as n,useRef as r,useSt
|
|
|
227
227
|
height: 65%;
|
|
228
228
|
width: 83%;
|
|
229
229
|
margin-bottom: 25px;
|
|
230
|
-
`,
|
|
230
|
+
`,x=i.i`
|
|
231
231
|
width: 25px;
|
|
232
232
|
font-size: calc(5px + 1vmin);
|
|
233
|
-
`;var
|
|
233
|
+
`;var S,C,w;const T=`optimizetalk.com:8443`,E=({meetingLinkKey:i,customerSupportKey:a})=>{let l=n(null),[u]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[E]=r(u?80:20),[D,O]=r([]),k=n(),[A,j]=r(!0),[M,N]=r(!1),[P,F]=r(!1),[ae,I]=r(null),[L,R]=r(null),[z,B]=r(),[V,H]=r(),[U,W]=r(!1),[G,K]=r(``),q=n(null),J=n(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{S=new WebSocket(`wss://`+T+`/signal`),S.onopen=function(){console.log(`Websocket connection established`),Z(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),C=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),X(e,t),console.log(`WebSocket connection opened to chat room `+G)}},ce=(e,t)=>{F(!0),I(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=L?e:`Guest-`+oe()+`: `+e;R(n),console.log(`Joining : `+n),se(n,t)};function Y(){console.log(`Close the socket`),S!=null&&(console.log(`Send 'leave' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`leave`,data:i}),S.close())}function le(e,t){S.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),W(!0),w||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(w),console.log(`Session key `+r.referenceUsers[0].sessionKey),B(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),H(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),K(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),O(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),F(!1),B(null),H(null),W(!1),Y();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{w=setInterval(()=>{console.log(`Trying to connect customer support team ...`),X(e,t)},1e4)},X=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i},data:a}),console.log(`Meeting join request sent for guest `+e)},de=()=>{J.current.play()};function Z(){S.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(C)}),S.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{l.current?.scrollIntoView({behavior:`smooth`})},fe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:t}),console.log(`Chat message sent `+t),O(e=>[...e,{sender:L,msg:t}]),k.current.value=``)}},pe=()=>{let e=k.current.value;e&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:e}),console.log(`Chat message sent `+e),O(t=>[...t,{sender:L,msg:e}]),k.current.value=``,Q())};function $(e){let t=JSON.stringify(e);S.send(t)}function me(){Y(),j(!1),N(!0),B(null),H(null),W(!1)}function he(){S=new WebSocket(`wss://`+T+`/signal`),B(null),H(null),j(!0),N(!1),F(!1),W(!1),I(null),R(null),O([])}return t(()=>{Q()},[D,z]),c(`div`,{children:[!M&&c(d,{displayChat:A,maxWidth:E,children:[c(ee,{children:[s(te,{children:`OD Customer Support`}),s(p,{onClick:()=>me(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!P&&!z&&!U&&s(e,{startGuestChat:ce,guestEmail:ae}),P&&!z&&!U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:`support@origindetector.com.`})]})]})}),P&&!z&&U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:`support@origindetector.com.`})]})]})}),P&&z&&c(`div`,{children:[s(m,{children:`Live Chat`}),s(ne,{children:c(re,{children:[D&&D.length==0&&s(`div`,{className:`ml-2`,children:` You are connected to our customer support team, how can we help you today? `}),D&&D.length>0&&c(`div`,{children:[D&&D.map(({sender:e,msg:t},n)=>e===L?c(g,{children:[s(`strong`,{children:L}),s(`p`,{children:t})]},n):c(ie,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:l})]})]})}),c(_,{children:[s(v,{ref:k,onKeyUp:fe,placeholder:`Enter your message`}),c(y,{onClick:pe,children:[s(x,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:q,src:`../../alert-sound.mp3`}),s(`audio`,{ref:J,src:`../../ding-small.mp3`})]}),M&&s(f,{className:`cursor-pointer`,onClick:()=>he(),displayChat:A,maxWidth:E,children:s(h,{children:s(`i`,{className:`bx bx-chat`})})})]})};export{E as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useState as e}from"react";import t from"styled-components";import{useForm as n}from"react-hook-form";import{twMerge as r}from"tailwind-merge";import{object as i,string as a}from"zod";import{zodResolver as o}from"@hookform/resolvers/zod";const
|
|
1
|
+
import{useState as e}from"react";import t from"styled-components";import{useForm as n}from"react-hook-form";import{twMerge as r}from"tailwind-merge";import{object as i,string as a}from"zod";import{zodResolver as o}from"@hookform/resolvers/zod";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=t.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
text-align: center;
|
|
4
4
|
align-items: center;
|
|
@@ -14,7 +14,7 @@ import{useState as e}from"react";import t from"styled-components";import{useForm
|
|
|
14
14
|
color: white;
|
|
15
15
|
padding: 5px;
|
|
16
16
|
background-color: rgb(78, 161, 211);
|
|
17
|
-
`,
|
|
17
|
+
`,u=t.div`
|
|
18
18
|
position: absolute;
|
|
19
19
|
top: 40px;
|
|
20
20
|
margin-left: 5px;
|
|
@@ -24,4 +24,4 @@ import{useState as e}from"react";import t from"styled-components";import{useForm
|
|
|
24
24
|
max-height: 100%;
|
|
25
25
|
overflow-x: hidden;
|
|
26
26
|
overflow-y: auto;
|
|
27
|
-
`,
|
|
27
|
+
`,d=i({name:a().min(1,`Name is required`),email:a().min(1,`Email is required`).email(`Invalid email address`)}),f=({startGuestChat:t,guestEmail:i})=>{let[a,f]=e(),p=n({resolver:o(d)}),{handleSubmit:m,formState:{errors:h}}=p;return c(u,{children:[s(l,{children:`Live Chat`}),!!i&&s(`div`,{className:`flex items-center justify-center gap-5 `,children:s(`button`,{onClick:()=>t(i),className:`inline-block rounded bg-green-700 px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]`,children:`Start Chat`})}),!i&&c(`form`,{className:`w-full`,onSubmit:m(async e=>{console.log(`Guest: `+e.name),console.log(`Guest Email: `+e.email),t(e.name,e.email)}),children:[s(`div`,{className:`flex flex-col items-left`,children:s(`div`,{className:`max-w-1xl bg-white`,children:c(`div`,{className:`relative border-slate-300 flex flex-col items-center`,children:[c(`div`,{children:[s(`label`,{className:`block text-gray-700 text-sm mb-1`,htmlFor:`title`,children:`Name`}),s(`input`,{className:r(`appearance-none border border-gray-400 rounded w-40 px-1 py-1 text-sm text-gray-700 mb-1 leading-tight focus:outline-none`,`${h.name&&`border-red-500`}`),...p.register(`name`)}),s(`p`,{className:r(`text-red-500 text-xs italic mb-2 invisible`,`${h.name&&`visible`}`),children:h.name?.message})]}),c(`div`,{children:[s(`label`,{className:`block text-gray-700 text-sm mb-1`,htmlFor:`title`,children:`Email`}),s(`input`,{type:`email`,className:r(`appearance-none border border-gray-400 rounded w-40 px-1 py-1 text-sm text-gray-700 mb-2 leading-tight focus:outline-none`,`${h.email&&`border-red-500`}`),...p.register(`email`)}),s(`p`,{className:r(`text-red-500 text-xs italic mb-2 invisible`,`${h.email&&`visible`}`),children:h.email?.message})]})]})})}),s(`div`,{className:`mb-2 text-gray-600 `,children:s(`h2`,{className:`text-sm text-red-600 font-normal`,children:a})}),s(`div`,{className:`flex items-center justify-center gap-5 `,children:s(`button`,{className:`inline-block rounded bg-green-700 px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]`,children:`Start Chat`})})]})]})};export{f as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useState as e}from"react";import t from"styled-components";import{useForm as n}from"react-hook-form";import{twMerge as r}from"tailwind-merge";import{object as i,string as a}from"zod";import{zodResolver as o}from"@hookform/resolvers/zod";const
|
|
1
|
+
import{useState as e}from"react";import t from"styled-components";import{useForm as n}from"react-hook-form";import{twMerge as r}from"tailwind-merge";import{object as i,string as a}from"zod";import{zodResolver as o}from"@hookform/resolvers/zod";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=t.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
text-align: center;
|
|
4
4
|
align-items: center;
|
|
@@ -14,7 +14,7 @@ import{useState as e}from"react";import t from"styled-components";import{useForm
|
|
|
14
14
|
color: white;
|
|
15
15
|
padding: 5px;
|
|
16
16
|
background-color: rgb(78, 161, 211);
|
|
17
|
-
`,
|
|
17
|
+
`,u=t.div`
|
|
18
18
|
position: absolute;
|
|
19
19
|
top: 40px;
|
|
20
20
|
margin-left: 5px;
|
|
@@ -24,4 +24,4 @@ import{useState as e}from"react";import t from"styled-components";import{useForm
|
|
|
24
24
|
font-size: 14px;
|
|
25
25
|
overflow-x: hidden;
|
|
26
26
|
overflow-y: auto;
|
|
27
|
-
`,
|
|
27
|
+
`,d=i({name:a().min(1,`Name is required`),email:a().min(1,`Email is required`).email(`Invalid email address`)}),f=({startGuestChat:t,guestEmail:i})=>{let[a,f]=e(),p=n({resolver:o(d)}),{handleSubmit:m,formState:{errors:h}}=p;return c(u,{children:[s(l,{children:`Live Chat`}),!!i&&s(`div`,{className:`flex items-center justify-center gap-5 `,children:s(`button`,{onClick:()=>t(i),className:`inline-block rounded bg-green-700 px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]`,children:`Start Chat`})}),!i&&c(`form`,{className:`w-full`,onSubmit:m(async e=>{console.log(`Guest: `+e.name),console.log(`Guest Email: `+e.email),t(e.name,e.email)}),children:[s(`div`,{className:`flex flex-col items-left`,children:s(`div`,{className:`max-w-1xl bg-white`,children:c(`div`,{className:`relative border-slate-300 flex flex-col items-center`,children:[c(`div`,{children:[s(`label`,{className:`block text-gray-700 text-normal mb-1`,htmlFor:`title`,children:`Name`}),s(`input`,{className:r(`appearance-none border border-gray-400 rounded w-full text-gray-700 mb-1 px-1 py-1 leading-tight focus:outline-none`,`${h.name&&`border-red-500`}`),...p.register(`name`)}),s(`p`,{className:r(`text-red-500 text-xs italic invisible`,`${h.name&&`visible`}`),children:h.name?.message})]}),c(`div`,{children:[s(`label`,{className:`block text-gray-700 text-normal mb-1`,htmlFor:`title`,children:`Email`}),s(`input`,{type:`email`,className:r(`appearance-none border border-gray-400 rounded w-full text-gray-700 mb-1 px-1 py-1 leading-tight focus:outline-none`,`${h.email&&`border-red-500`}`),...p.register(`email`)}),s(`p`,{className:r(`text-red-500 text-xs italic mb-2 invisible`,`${h.email&&`visible`}`),children:h.email?.message})]})]})})}),s(`div`,{className:`mb-2 text-gray-600 `,children:s(`h2`,{className:`text-sm text-red-600 font-normal`,children:a})}),s(`div`,{className:`flex items-center justify-center gap-5 `,children:s(`button`,{className:`inline-block rounded bg-green-700 px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]`,children:`Start Chat`})})]})]})};export{f as default};
|