From 97a738b3a3ba81333b1217ca1796f7778bbd2b85 Mon Sep 17 00:00:00 2001
From: Dustin Kroger <dustin.kroger.ext@ovhcloud.com>
Date: Fri, 17 Jan 2025 15:21:56 +0100
Subject: [PATCH] feat(container): refacor livechat component

ref: MANAGER-15587

Signed-off-by: Dustin Kroger <dustin.kroger.ext@ovhcloud.com>
---
 .../container/src/components/LiveChat.tsx     |  95 +++++++---
 .../container/src/components/VirtualAgent.tsx |  75 ++++----
 .../livechat/LiveChat.component.tsx           | 173 ++++++++++++++++++
 .../src/components/livechat/LiveChat.spec.tsx |   0
 .../components/livechat/liveChat.constants.ts |   3 +
 .../apps/container/src/container/index.tsx    |   6 +-
 .../UsefulLinks/useUsefulLinks.ts             |   1 -
 .../src/core/container/ContainerProvider.tsx  |   1 +
 8 files changed, 290 insertions(+), 64 deletions(-)
 create mode 100644 packages/manager/apps/container/src/components/livechat/LiveChat.component.tsx
 create mode 100644 packages/manager/apps/container/src/components/livechat/LiveChat.spec.tsx
 create mode 100644 packages/manager/apps/container/src/components/livechat/liveChat.constants.ts

diff --git a/packages/manager/apps/container/src/components/LiveChat.tsx b/packages/manager/apps/container/src/components/LiveChat.tsx
index 6385566292ae..2b282f03c706 100644
--- a/packages/manager/apps/container/src/components/LiveChat.tsx
+++ b/packages/manager/apps/container/src/components/LiveChat.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import VirtualAgent from './VirtualAgent';
 
 interface LiveChatProps {
@@ -11,6 +11,8 @@ interface LiveChatProps {
   onReduce?: () => void;
 }
 
+type LiveChatType = 'Adrielly' | 'SNOW';
+
 const getCustomerLevel = (level: string) => {
   switch (level) {
     case 'standard':
@@ -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;
diff --git a/packages/manager/apps/container/src/components/VirtualAgent.tsx b/packages/manager/apps/container/src/components/VirtualAgent.tsx
index e0ef1f49c62c..bea40ed0a778 100644
--- a/packages/manager/apps/container/src/components/VirtualAgent.tsx
+++ b/packages/manager/apps/container/src/components/VirtualAgent.tsx
@@ -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;
@@ -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);
@@ -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);
@@ -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 = (
@@ -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(() => {
@@ -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
@@ -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`}
@@ -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
@@ -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>
             )}
@@ -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
@@ -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>
diff --git a/packages/manager/apps/container/src/components/livechat/LiveChat.component.tsx b/packages/manager/apps/container/src/components/livechat/LiveChat.component.tsx
new file mode 100644
index 000000000000..5e1e9ba96712
--- /dev/null
+++ b/packages/manager/apps/container/src/components/livechat/LiveChat.component.tsx
@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react';
+import useContainer from '@/core/container';
+import { OsdsButton, OsdsText, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_SIZE, ODS_TEXT_LEVEL, ODS_TEXT_SIZE, ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+
+import { v6 } from '@ovh-ux/manager-core-api';
+
+import { ADRIELLY_CHAT_URL, ADRIELLY_CHAT_ORIGIN, SNOW_INSTANCE_URL } from './liveChat.constants';
+
+type LiveChatProps = {
+  closeLiveChat: () => void;
+};
+type LiveChatType = 'Adrielly' | 'SNOW';
+// re-render on key-change or setState change
+
+type Token = {
+  token: string;
+};
+
+const fetchAuthToken = async (): Promise<string | null> => {
+  try {
+    const request = await v6.post<Token>('/auth/token');
+    return request.data.token;
+  } catch (error) {
+    return null;
+  }
+};
+
+type ChatDialogProps = {
+  url: string;
+  visible: boolean;
+  title: string;
+  showHeader?: boolean;
+}
+
+type SnowChatContext = {
+  skip_load_history?: string;
+  live_agent_only?: string;
+  language?: string;
+  queue?: string;
+  branding_key?: string;
+  session_id?: string;
+  interface_type?: string;
+  interface_name?: string;
+}
+
+/**
+ * Utility function to construct query parameters
+ * @param {Record<string, string>} params - An object containing query parameters as key-value pairs
+ * @returns {string} - A query string
+ */
+const constructQueryParams = (params: Record<string, string>): string => {
+  return Object.entries(params)
+    .map(([key, value]) => `sysparm_${key}=${encodeURIComponent(value)}`)
+    .join('&');
+};
+
+const generateSnowChatUrl = (instance: string, context: SnowChatContext) => {
+  return `${instance}/sn_va_web_client_app_embed.do?${constructQueryParams(context)}`;
+}
+
+
+// const ServiceNowChatComponent = ({context}: {context: SnowChatContext}) => {
+//   useEffect(() => {
+//     const loadChatModule = async () => {
+//       const Module = await import(`${SNOW_INSTANCE_URL}/uxasset/externals/now-requestor-chat-popover-app/index.jsdbx?sysparm_substitute=false`);
+
+//       const chat = new Module.default({
+//         instance: SNOW_INSTANCE_URL,
+//         context,
+//         offsetX: 0,
+//         offsetY: 0,
+//         translations: 'fr_FR',
+//       });
+//       chat.open();
+//     };
+
+//     loadChatModule();
+//   }, []);
+
+//   return <div>Loading chat...</div>;
+// };
+
+/**
+ * rounded-t-lg rounded-b-lg separated due to osds
+ */
+function ChatDialog({ url, visible, title, showHeader = true }: ChatDialogProps): JSX.Element {
+  return (
+    <div className={`w-96 h-[600px] bg-white rounded-t-lg rounded-b-lg shadow-md flex flex-col ${visible ? '' : 'hidden'}`}>
+      {showHeader && <div className='h-16 rounded-t-lg flex justify-center items-center' style={{ background: 'radial-gradient(circle at bottom left, #000e9c, #00185e)' }}>
+        <OsdsText color={ODS_THEME_COLOR_INTENT.default} hue={ODS_THEME_COLOR_HUE._000} level={ODS_TEXT_LEVEL.heading} size={ODS_TEXT_SIZE._600}>{title}</OsdsText>
+      </div>}
+      <iframe
+        // ref={mainFrame}
+        title={title}
+        src={url}
+        className={`flex-grow w-full h-full rounded-lg border-none`} // done to tw
+        sandbox="allow-scripts allow-top-navigation allow-forms allow-popups allow-same-origin allow-downloads"
+      ></iframe>
+    </div>
+  )
+}
+
+export default function LiveChat({ closeLiveChat }: LiveChatProps): JSX.Element {
+
+  const { chatbotOpen, chatbotReduced, setChatbotOpen, setChatbotReduced } = useContainer();
+
+  const [chatType, setChatType] = useState<LiveChatType>('Adrielly');
+
+  const handleCloseChat = () => {
+    setChatType('Adrielly');
+    closeLiveChat();
+  }
+
+  const snowContext: SnowChatContext = {
+    skip_load_history: 'false',
+    live_agent_only: 'true',
+    language: 'fr_FR',
+    queue: 'keepbiz',
+    branding_key: 'adrielly',
+    session_id: ''
+  };
+
+  useEffect(() => {
+
+      fetchAuthToken().then((token) => {
+        snowContext.session_id = token;
+      });
+
+      const livechatMessageEventHandler = (ev: MessageEvent<{ event: string, queue: string }>) => {
+
+        if (ev.origin !== ADRIELLY_CHAT_ORIGIN) return;
+        ev.stopPropagation();
+
+        if (typeof ev.data !== 'object' || ev.data.event !== 'open_agent_chat') return
+        console.log(snowContext);
+        setChatType('SNOW');
+      }
+
+      window.addEventListener('message', livechatMessageEventHandler)
+      return () => window.removeEventListener('message', livechatMessageEventHandler);
+    }, []);
+
+  return (
+    <div className='absolute bottom-5 right-5 z-[960]'>
+      {chatbotOpen && <>
+          {chatType === 'Adrielly' && <ChatDialog title="OVHcloud Chat" visible={!chatbotReduced} url={ADRIELLY_CHAT_URL} key={chatType} />}
+          {chatType === 'SNOW' && <ChatDialog title={chatType} showHeader={false} visible={!chatbotReduced} url={generateSnowChatUrl(SNOW_INSTANCE_URL, snowContext)} key={chatType} /> }
+          <div className='relative p-3 flex flex-row justify-end'>
+
+            {!chatbotReduced && (
+              <OsdsButton circle color={ODS_THEME_COLOR_INTENT.primary} onClick={() => setChatbotReduced(true)}>
+                <OsdsIcon name={ODS_ICON_NAME.SPEECH_BUBBLE_CONCEPT} size={ODS_ICON_SIZE.md} className='m-2 bg-white' />
+              </OsdsButton>
+            )}
+            {chatbotReduced && (
+              <>
+                <OsdsButton circle color={ODS_THEME_COLOR_INTENT.primary} onClick={() => setChatbotReduced(false)}>
+                  <OsdsIcon name={ODS_ICON_NAME.SPEECH_BUBBLE_CONCEPT} size={ODS_ICON_SIZE.md} className='m-2 bg-white' />
+                </OsdsButton>
+                <OsdsButton circle contrasted className='absolute top-0 right-0 p-2 z-10' onClick={handleCloseChat}>
+                  <OsdsIcon name={ODS_ICON_NAME.CLOSE} size={ODS_ICON_SIZE.xxs} color={ODS_THEME_COLOR_INTENT.primary} />
+                 </OsdsButton>
+              </>
+            )}
+          </div>
+      </>}
+
+      {/* {chatType === 'SNOW' && <ServiceNowChatComponent context={snowContext} key={chatType} />} */}
+    </div>
+  );
+}
diff --git a/packages/manager/apps/container/src/components/livechat/LiveChat.spec.tsx b/packages/manager/apps/container/src/components/livechat/LiveChat.spec.tsx
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/manager/apps/container/src/components/livechat/liveChat.constants.ts b/packages/manager/apps/container/src/components/livechat/liveChat.constants.ts
new file mode 100644
index 000000000000..179185b7370f
--- /dev/null
+++ b/packages/manager/apps/container/src/components/livechat/liveChat.constants.ts
@@ -0,0 +1,3 @@
+export const ADRIELLY_CHAT_URL = 'https://chat.ovh.com/system/templates/pre-prod/prepa_prod/STD/FR_fr/docs/index2.html';
+export const ADRIELLY_CHAT_ORIGIN = 'https://chat.ovh.com';
+export const SNOW_INSTANCE_URL = 'https://help.build-ovhcloud.tools';
diff --git a/packages/manager/apps/container/src/container/index.tsx b/packages/manager/apps/container/src/container/index.tsx
index e56c26a88084..7b4566ddd281 100644
--- a/packages/manager/apps/container/src/container/index.tsx
+++ b/packages/manager/apps/container/src/container/index.tsx
@@ -12,6 +12,7 @@ import SSOAuthModal from '@/sso-auth-modal/SSOAuthModal';
 import PaymentModal from '@/payment-modal/PaymentModal';
 import LiveChat from '@/components/LiveChat';
 import { IdentityDocumentsModal } from '@/identity-documents-modal/IdentityDocumentsModal';
+import NewLiveChat from '@/components/livechat/LiveChat.component';
 
 export default function Container(): JSX.Element {
   const {
@@ -66,7 +67,7 @@ export default function Container(): JSX.Element {
             <LegacyContainer />
           </>
         )}
-        <LiveChat
+        {/* <LiveChat
           supportLevel={supportLevel?.level}
           language={language}
           subsidiary={ovhSubsidiary}
@@ -75,7 +76,8 @@ export default function Container(): JSX.Element {
           onReduce={() => setChatbotReduced(true)}
           onClose={() => shell.getPlugin('ux').closeChatbot()}
           style={{ position: 'absolute' }}
-        ></LiveChat>
+        ></LiveChat> */}
+        <NewLiveChat closeLiveChat={() => shell.getPlugin('ux').closeChatbot()}></NewLiveChat>
       </ProgressProvider>
 
       <Suspense fallback="">
diff --git a/packages/manager/apps/container/src/container/legacy/account-sidebar/UsefulLinks/useUsefulLinks.ts b/packages/manager/apps/container/src/container/legacy/account-sidebar/UsefulLinks/useUsefulLinks.ts
index 1d928361a8aa..27e0a260da6b 100644
--- a/packages/manager/apps/container/src/container/legacy/account-sidebar/UsefulLinks/useUsefulLinks.ts
+++ b/packages/manager/apps/container/src/container/legacy/account-sidebar/UsefulLinks/useUsefulLinks.ts
@@ -56,7 +56,6 @@ const useUsefulLinks = (): UseUsefulLinks => {
             id: 'chatbot',
             action: () => {
               shell.getPlugin('ux').openLiveChat();
-              setChatbotReduced(false);
             },
             icon: getOdsIcon(ODS_ICON_NAME.SPEECH_BUBBLE_CONCEPT),
           },
diff --git a/packages/manager/apps/container/src/core/container/ContainerProvider.tsx b/packages/manager/apps/container/src/core/container/ContainerProvider.tsx
index d6a5af497ddc..bcf399697752 100644
--- a/packages/manager/apps/container/src/core/container/ContainerProvider.tsx
+++ b/packages/manager/apps/container/src/core/container/ContainerProvider.tsx
@@ -133,6 +133,7 @@ export const ContainerProvider = ({ children }: { children: JSX.Element }) => {
       const chatbotVisibility = await uxPlugin.isChatbotVisible();
       if (isLivechatEnabled) {
         setChatbotOpen(chatbotVisibility);
+        setChatbotReduced(false);
       }
     });
   }, [isLivechatEnabled]);