Skip to content

Commit

Permalink
feat(container): refacor livechat component
Browse files Browse the repository at this point in the history 
ref: MANAGER-15587

Signed-off-by: Dustin Kroger <[email protected]>
  • Loading branch information
@aottr
aottr committed Jan 17, 2025
1 parent 078784d commit 97a738b
Show file tree
Hide file tree
Showing 8 changed files with 290 additions and 64 deletions.
95 changes: 74 additions & 21 deletions packages/manager/apps/container/src/components/LiveChat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import VirtualAgent from './VirtualAgent';

interface LiveChatProps {
Expand All @@ -11,6 +11,8 @@ interface LiveChatProps {
onReduce?: () => void;
}

type LiveChatType = 'Adrielly' | 'SNOW';

const getCustomerLevel = (level: string) => {
switch (level) {
case 'standard':
Expand All @@ -31,27 +33,78 @@ const getCustomerLevel = (level: string) => {
const LiveChat: React.FC<ComponentProps<LiveChatProps>> = (
{ language, open, reduced, subsidiary, supportLevel, ...rest }: LiveChatProps,
): JSX.Element => {

const [chatType, setChatType] = useState<LiveChatType>('Adrielly');

console.log('lc','open', open, 'reduced', reduced);

const customerLevel = getCustomerLevel(supportLevel);
const url = `https://chat.ovh.com/system/templates/liveChat-manager/${customerLevel}/${subsidiary}_${language}/docs/index2.html`;

return (
<VirtualAgent
name="LiveChat"
title="OVHcloud Chat"
url={url}
agentStarted={open}
agentReduced={reduced}
useStorage
buttonColor="#ed642a"
headerColor="radial-gradient(circle at bottom left, #f98841, #f75a56)"
customStyles={{
position: 'absolute',
bottom: '10px',
right: '10px',
}}
{...rest}
/>
);
// const url = `https://chat.ovh.com/system/templates/liveChat-manager/${customerLevel}/${subsidiary}_${language}/docs/index2.html`;
const url = `https://chat.ovh.com/system/templates/pre-prod/prepa_prod/STD/FR_fr/docs/index2.html`;


useEffect(() => {
if (open) {
setChatType('Adrielly');
}
}, [open])

useEffect(() => {

const livechatMessageEventHandler = (ev: MessageEvent<{ event: string, queue: string }>) => {

if (ev.origin !== 'https://chat.ovh.com') return;
ev.stopPropagation();

if (typeof ev.data !== 'object' || ev.data.event !== 'open_agent_chat') return
setChatType('SNOW');

}

window.addEventListener('message', livechatMessageEventHandler)
return () => window.removeEventListener('message', livechatMessageEventHandler);
}, [])

if (chatType === 'Adrielly') {
return (<>
<VirtualAgent
name="LiveChat"
title={'Adrielly'}
url={url}
agentStarted={open}
agentReduced={reduced}
useStorage
buttonColor="#000e9c"
headerColor="radial-gradient(circle at bottom left, #f98841, #f75a56)"
customStyles={{
position: 'absolute',
bottom: '10px',
right: '10px',
}}
{...rest}
/>
</>)
}
else if (chatType === 'SNOW') {
return (<>
<VirtualAgent
name="LiveChat"
title={'SNOW'}
url={url}
agentStarted={open}
agentReduced={reduced}
useStorage
buttonColor="#ed642a"
headerColor="radial-gradient(circle at bottom left, #f98841, #f75a56)"
customStyles={{
position: 'absolute',
bottom: '10px',
right: '10px',
}}
{...rest}
/>
</>)
}
};

export default LiveChat;
75 changes: 35 additions & 40 deletions packages/manager/apps/container/src/components/VirtualAgent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import dialogPolyfill from 'dialog-polyfill';
import { useMediaQuery } from 'react-responsive';

import styles from './virtualAgentStyles.module.scss';
import useContainer from '@/core/container';

interface VirtualAgentProps {
name: string;
Expand Down Expand Up @@ -41,9 +42,15 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
buttonIcon = 'oui-icon-chat',
customStyles,
onClose,
onStart,
onReduce,
} = props;

const {
chatbotOpen,
chatbotReduced,
setChatbotOpen,
setChatbotReduced,
} = useContainer();

const dialog = useRef(null);
const mainFrame = useRef<HTMLIFrameElement>(null);
const [started, setStarted] = useState(agentStarted);
Expand All @@ -58,8 +65,8 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
});

const toggle = () => {
setReduced(!reduced);
if (onReduce) onReduce();
setChatbotReduced(!chatbotReduced);
// if (onReduce) onReduce();
};
const stop = () => {
setStarted(false);
Expand All @@ -69,8 +76,7 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (

const start = (startedValue: boolean, reducedValue: boolean) => {
setStarted(startedValue);
setReduced(reducedValue);
if (onStart) onStart();
setChatbotReduced(reducedValue);
};

const setCustomStyleOnMobile = (
Expand All @@ -89,18 +95,18 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
useEffect(() => {
dialogPolyfill.registerDialog(dialog.current);

if (useStorage) {
if (storage) {
start(
storage === 'started' || storage === 'reduced',
storage === 'reduced',
);
} else {
start(agentStarted, !agentStarted);
}
} else {
start(agentStarted, !agentStarted);
}
// if (useStorage) {
// if (storage) {
// start(
// storage === 'started' || storage === 'reduced',
// storage === 'reduced',
// );
// } else {
// start(agentStarted, !agentStarted);
// }
// } else {
start(agentStarted, false);
//}
}, []);

useEffect(() => {
Expand All @@ -110,14 +116,7 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
}, [agentStarted]);

useEffect(() => {
if (!agentReduced) {
setReduced(false);
if (onReduce) onReduce();
}
}, [agentReduced]);

useEffect(() => {
if (started && !reduced) {
if (started && !chatbotReduced) {
dialog.current.show();
// This next line is for the focus when clicking with the keyboard
// The native dialog API seem to focus right with the mouse click but not with the keyboard
Expand All @@ -128,16 +127,16 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
} else {
if (dialog?.current?.open) dialog.current.close();

if (started && reduced) setStorage('reduced');
if (started && chatbotReduced) setStorage('reduced');
else removeStorage();
}
}, [reduced, started]);
}, [chatbotReduced, started]);

return (
<div
style={customStyles}
className={`${
!reduced
!chatbotReduced
? styles.virtualAgent
: `${styles.virtualAgent} ${styles.fitHeight}`
} d-flex flex-column justify-content-end`}
Expand All @@ -154,14 +153,10 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
className={`${styles.dialog_content} d-flex h-100 flex-column`}
>
<header
style={{
background: headerColor,
}}
style={{ background: 'radial-gradient(circle at bottom left, #000e9c, #00185e)' }}
title={title}
className={
headerColor
? styles.header
: `${styles.header} oui-background-p-500`
`${styles.header} bg-gradient-to-r from-[#000e9c] to-[#00185e]`
}
>
<button
Expand All @@ -180,7 +175,7 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
ref={mainFrame}
title={`${title} main view`}
src={url}
className={`${styles.main_frame} w-100 h-100 border-0`}
className={`${styles.main_frame} w-full h-full border-none`} // done to tw
sandbox="allow-scripts allow-top-navigation allow-forms allow-popups allow-same-origin allow-downloads"
></iframe>
)}
Expand All @@ -190,7 +185,7 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
{started && (
<div
role="group"
className={`${styles.group} d-xl-flex justify-content-end`}
className={`${styles.group} xl:flex justify-end`}
style={setCustomStyleOnMobile(headerColor)}
>
<button
Expand All @@ -209,15 +204,15 @@ const VirtualAgent: React.FC<ComponentProps<VirtualAgentProps>> = (
>
<span
className={
!reduced ? 'oui-icon oui-icon-close' : `oui-icon ${buttonIcon}`
!chatbotReduced ? 'oui-icon oui-icon-close' : `oui-icon ${buttonIcon}`
}
></span>
<span className="sr-only">{`Toggle ${title}`}</span>
</button>
{reduced && (
{chatbotReduced && (
<button
title={`Close ${title}`}
className={`${styles.group_close_button} oui-button p-0`}
className={`${styles.group_close_button} oui-button z-10 p-0`} // fix cross below dot
onClick={() => stop()}
>
<span className="oui-icon oui-icon-close m-auto"></span>
Expand Down
Loading

0 comments on commit 97a738b

Please sign in to comment.