Skip to content

Commit 451c0c2

Browse files
jannosternjannostern
authored
Implement delete and resend for failed messages (#1171)
1 parent 59a0cd9 commit 451c0c2

File tree

5 files changed

+170
-65
lines changed

5 files changed

+170
-65
lines changed

‎GUI/src/components/Chat/Chat.scss

+48-26
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173

174174
:any-link {
175175
background: url('../../static/icons/link-external-blue.svg')
176-
no-repeat right center;
176+
no-repeat right center;
177177
padding-right: 1.25em;
178178
color: blue;
179179
text-decoration: underline;
@@ -213,7 +213,7 @@
213213

214214
:any-link {
215215
background: url('../../static/icons/link-external-white.svg')
216-
no-repeat right center;
216+
no-repeat right center;
217217
padding-right: 1.25em;
218218
color: white;
219219
text-decoration: underline;
@@ -328,7 +328,7 @@
328328

329329
:any-link {
330330
background: url('../../static/icons/link-external-blue.svg') no-repeat
331-
right center;
331+
right center;
332332
padding-right: 1.25em;
333333
color: blue;
334334
text-decoration: underline;
@@ -358,6 +358,28 @@
358358
user-select: none;
359359
}
360360

361+
&__message-failed-wrapper {
362+
gap: 2px;
363+
margin-left: -22px;
364+
}
365+
366+
&__message-failed {
367+
color: red;
368+
display: flex;
369+
font-size: 11px;
370+
line-height: $veera-line-height-500;
371+
}
372+
373+
&__message-failed-content {
374+
margin-top: 4px;
375+
}
376+
377+
&__message-failed-buttons {
378+
display: flex;
379+
gap: 20px;
380+
justify-content: center;
381+
}
382+
361383
&__message-status {
362384
color: get-color(black-coral-6);
363385
font-size: 11px;
@@ -377,31 +399,31 @@
377399
}
378400

379401
.edit-toolbar {
380-
display: grid;
381-
grid-template-columns: 2fr 1fr;
382-
grid-template-rows: auto auto;
383-
gap: 10px;
402+
display: grid;
403+
grid-template-columns: 2fr 1fr;
404+
grid-template-rows: auto auto;
405+
gap: 10px;
384406

385-
&__header {
386-
align-items: center;
387-
display: flex;
388-
grid-column: 1;
389-
grid-row: 1;
390-
}
407+
&__header {
408+
align-items: center;
409+
display: flex;
410+
grid-column: 1;
411+
grid-row: 1;
412+
}
391413

392-
&__textarea {
393-
grid-column: 1;
394-
grid-row: 2;
395-
}
414+
&__textarea {
415+
grid-column: 1;
416+
grid-row: 2;
417+
}
396418

397-
&__edit-actions {
398-
display: flex;
399-
grid-column: 2;
400-
grid-row: 2;
401-
gap: 10px;
402-
justify-content: flex-end;
403-
}
419+
&__edit-actions {
420+
display: flex;
421+
grid-column: 2;
422+
grid-row: 2;
423+
gap: 10px;
424+
justify-content: flex-end;
404425
}
426+
}
405427

406428
.title {
407429
font-size: 13px;
@@ -426,7 +448,7 @@
426448
}
427449

428450
.reset p {
429-
margin: 0 0 0.5rem;
451+
margin: 0 0 0.5rem;
430452
padding: 0;
431453
}
432454

@@ -444,4 +466,4 @@
444466
.reset a {
445467
text-decoration: none;
446468
color: inherit;
447-
}
469+
}

‎GUI/src/components/Chat/ChatMessage.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,14 @@ const ChatMessage: FC<ChatMessageProps> = ({
154154
>
155155
<div>
156156
<time
157-
dateTime={message.created}
157+
dateTime={message.created ?? message.authorTimestamp}
158158
className="active-chat__message-date"
159159
style={{ alignSelf: 'center' }}
160160
>
161-
{format(new Date(message.created), 'HH:mm:ss')}
161+
{format(
162+
new Date(message.created ?? message.authorTimestamp),
163+
'HH:mm:ss'
164+
)}
162165
</time>
163166
</div>
164167
{message.event === CHAT_EVENTS.WAITING_VALIDATION &&

‎GUI/src/components/Chat/index.tsx

+111-35
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
MdOutlineAttachFile,
1010
MdOutlineCreate,
1111
MdOutlineSend,
12+
MdOutlineErrorOutline,
1213
} from 'react-icons/md';
1314
import { Button, Icon, Label, Track } from 'components';
1415
import { ReactComponent as BykLogoWhite } from 'assets/logo-white.svg';
@@ -515,23 +516,32 @@ const Chat: FC<ChatProps> = ({
515516
};
516517

517518
if (responseText !== '') {
518-
const res = await postMessageMutation.mutateAsync({
519-
message: newMessage,
520-
editing: editMessage,
521-
});
522-
const message = { ...res.data.response, id: res.data.response.baseId };
523-
if (selectedMessage) {
524-
const index = messagesList.findIndex(
525-
(m) => m.id === selectedMessage.id
526-
);
527-
const updatedMessages = [...messagesList];
528-
updatedMessages[index] = message;
529-
setMessagesList(updatedMessages);
530-
} else {
531-
setMessagesList((oldMessages) => [...oldMessages, message]);
519+
try {
520+
const res = await postMessageMutation.mutateAsync({
521+
message: newMessage,
522+
editing: editMessage,
523+
});
524+
const message = {
525+
...res.data.response,
526+
id: res.data.response.baseId,
527+
};
528+
529+
if (selectedMessage) {
530+
const index = messagesList.findIndex(
531+
(m) => m.id === selectedMessage.id
532+
);
533+
const updatedMessages = [...messagesList];
534+
updatedMessages[index] = message;
535+
setMessagesList(updatedMessages);
536+
} else {
537+
setMessagesList((oldMessages) => [...oldMessages, message]);
538+
}
539+
} catch (error) {
540+
setMessagesList((oldMessages) => [...oldMessages, newMessage]);
541+
} finally {
542+
setResponseText('');
543+
setSelectedMessage(null);
532544
}
533-
setResponseText('');
534-
setSelectedMessage(null);
535545
}
536546
};
537547

@@ -566,6 +576,51 @@ const Chat: FC<ChatProps> = ({
566576
}
567577
};
568578

579+
const checkIsMessageEditable = (message: Message): boolean => {
580+
return (
581+
isChatEditingAllowed &&
582+
chat.customerSupportId === userInfo.idCode &&
583+
message.authorId === userInfo.idCode &&
584+
message.id
585+
);
586+
};
587+
588+
const deleteMessageFromList = (message: Message) => {
589+
setMessagesList((oldMessages) => {
590+
const filteredMessages = oldMessages.filter(
591+
(m) => m.authorTimestamp !== message.authorTimestamp
592+
);
593+
return filteredMessages;
594+
});
595+
};
596+
597+
const handleRetry = async (message: Message) => {
598+
deleteMessageFromList(message);
599+
const retryMessage = {
600+
...message,
601+
authorTimestamp: new Date().toISOString(),
602+
};
603+
604+
try {
605+
const res = await postMessageMutation.mutateAsync({
606+
message: retryMessage,
607+
editing: false,
608+
});
609+
setMessagesList((oldMessages) => {
610+
const updatedMessages = [
611+
...oldMessages,
612+
{
613+
...res.data.response,
614+
id: res.data.response.baseId,
615+
},
616+
];
617+
return updatedMessages;
618+
});
619+
} catch (error) {
620+
setMessagesList((oldMessages) => [...oldMessages, retryMessage]);
621+
}
622+
};
623+
569624
useQuery<{ config: BotConfig }>({
570625
queryKey: ['configs/bot-config', 'prod'],
571626
onSuccess(data: any) {
@@ -634,25 +689,46 @@ const Chat: FC<ChatProps> = ({
634689

635690
<div className="active-chat__messages">
636691
{group.messages.map((message, i) => (
637-
<ChatMessage
638-
message={message}
639-
readStatus={messageReadStatusRef}
640-
key={`${message.id ?? ''}-${i}`}
641-
onSelect={(m) => {
642-
if (
643-
isChatEditingAllowed &&
644-
chat.customerSupportId === userInfo.idCode &&
645-
message.authorId === userInfo.idCode
646-
)
647-
handleSelectMessage(m);
648-
}}
649-
selected={selectedMessage?.id === message.id}
650-
editableMessage={
651-
isChatEditingAllowed &&
652-
chat.customerSupportId === userInfo.idCode &&
653-
message.authorId === userInfo.idCode
654-
}
655-
/>
692+
<div key={`${message.authorTimestamp}-${i}`}>
693+
<ChatMessage
694+
message={message}
695+
readStatus={messageReadStatusRef}
696+
onSelect={(m) => {
697+
if (checkIsMessageEditable(message))
698+
handleSelectMessage(m);
699+
}}
700+
selected={selectedMessage?.id === message.id}
701+
editableMessage={checkIsMessageEditable(message)}
702+
/>
703+
{!message.id && (
704+
<div className="active-chat__message-failed-wrapper active-chat__message-failed">
705+
<MdOutlineErrorOutline fontSize={22} />
706+
<div className="active-chat__message-failed-content">
707+
<span>
708+
{t('chat.active.messageSendingFailed')}
709+
</span>
710+
<div className="active-chat__message-failed-buttons">
711+
<Button
712+
appearance="text"
713+
className="active-chat__message-failed"
714+
onClick={() => handleRetry(message)}
715+
>
716+
<strong>{t('chat.active.sendAgain')}</strong>
717+
</Button>
718+
<Button
719+
appearance="text"
720+
className="active-chat__message-failed"
721+
onClick={() => {
722+
deleteMessageFromList(message);
723+
}}
724+
>
725+
<strong>{t('global.delete')}</strong>
726+
</Button>
727+
</div>
728+
</div>
729+
</div>
730+
)}
731+
</div>
656732
))}
657733
</div>
658734
</>

‎GUI/translations/en/common.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,9 @@
147147
"start": "Start",
148148
"service": "Service",
149149
"ContactedUser": "Contacted User",
150-
"couldNotReachUser": "Could Not Reach User"
150+
"couldNotReachUser": "Could Not Reach User",
151+
"messageSendingFailed": "Message sending failed!",
152+
"sendAgain": "Send again"
151153
},
152154
"history": {
153155
"title": "History",

‎GUI/translations/et/common.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,9 @@
147147
"start": "Alusta",
148148
"service": "Teenus",
149149
"ContactedUser": "Kasutajaga ühendust võetud",
150-
"couldNotReachUser": "Kasutajaga ei õnnestunud ühendust saada"
150+
"couldNotReachUser": "Kasutajaga ei õnnestunud ühendust saada",
151+
"messageSendingFailed": "Sõnumi saatmine ebaõnnestus!",
152+
"sendAgain": "Saada uuesti"
151153
},
152154
"history": {
153155
"title": "Ajalugu",

0 commit comments

Comments
 (0)