The overlay that is presented when the user is disconnected during the conversation is coded in a static manner, so it is always in English. When we are serving customers that does not understand English, it distracts customer from the conversation. Is it possible to make it variable based so that it can be edited from the endpoint transformers.
|
const DisconnectOverlay = ({ isPermanent, onClose, onConnect }) => { |
|
return ( |
|
<Wrapper> |
|
<Dialog> |
|
{isPermanent ? ( |
|
<> |
|
<DialogHeader>Connection lost</DialogHeader> |
|
{navigator.onLine ? ( |
|
<Button onClick={onConnect} color="primary" style={{ margin: "auto" }}> |
|
Reconnect |
|
</Button> |
|
) : ( |
|
<div>No network connection</div> |
|
)} |
|
</> |
|
) : ( |
|
<div> |
|
<DialogHeader>Connection lost</DialogHeader> |
|
<div>Reconnecting...</div> |
|
</div> |
|
)} |
|
</Dialog> |
|
<HeaderIconButton |
|
data-disconnect-overlay-close-button |
|
onClick={onClose} |
|
className="webchat-header-close-button" |
|
aria-label="Close Warning" |
|
> |
|
<CloseIcon /> |
|
</HeaderIconButton> |
|
</Wrapper> |
|
); |
|
}; |