Merge pull request #7 from eduzz/feature-ct2-726

Hyperflow on topbar

README.md

@@ -178,6 +178,14 @@ function MyComponent() {
 |-------|----------|-------------|--------|---------------------------------------------------|
 | token | `string` | `false`     | -      | Token gerado pelo servidor para uso do LiveHelper |
 
+### Topbar.HyperflowSupportChat props
+
+| prop            | tipo     | obrigatório | padrão | descrição                                            |
+|-----------------|----------|-------------|--------|------------------------------------------------------|
+| hyperflowConfig | `object` | `true`      | -      | Tokens dos canais do Hyperflow                       |
+| flowId          | `string` | `true`      | -      | Id do flow do Hyperflow                              |
+| currentUser     | `object` | `true`      | -      | Dados do usuário que serão enviados para o Hyperflow |
+
 ### Topbar.ModeSwitcher props
 | prop               | tipo     | obrigatório | padrão | descrição                                                   |
 |--------------------|----------|-------------|--------|-------------------------------------------------------------|

Topbar/HyperflowSupportChat/chat.tsx

@@ -0,0 +1,58 @@
+import useExternalScript from './import';
+
+type HyperflowParams = {
+  id?: number;
+  name?: string;
+  email?: string;
+  eliteChatToken?: string;
+  original_id?: number;
+  original_name?: string;
+  original_email?: string;
+  sender?: string;
+};
+
+interface SupportChatProps {
+  jwtToHyperflow: string;
+  currentUser: any;
+  hyperflowConfig: any;
+}
+
+function getChatTokenID(currentUser: any, hyperflowConfig: any) {
+  const chatUnityID = hyperflowConfig.chatUnityID;
+  const chatBlackID = hyperflowConfig.chatBlackID;
+  const chatEliteID = hyperflowConfig.chatEliteID;
+  const beltsCanViewChatBlack = ['Black', 'Golden', 'Sensei'];
+  const beltUserCanViewChatBlack = beltsCanViewChatBlack.includes((currentUser?.belt || '').split(' ')[0]);
+
+  if (currentUser?.tag === 'unity') return chatUnityID;
+  if (beltUserCanViewChatBlack || currentUser?.isClubeBlack) return chatBlackID;
+  return chatEliteID;
+}
+
+const HyperflowSupportChat: React.FC<SupportChatProps> = ({ jwtToHyperflow, currentUser, hyperflowConfig }) => {
+  const hyperflow = useExternalScript('https://webchat.hyperflow.global/sdk.js');
+  const chatToken = getChatTokenID(currentUser, hyperflowConfig);
+
+  if (hyperflow === 'ready') {
+    Hyperflow.init(chatToken).on('getStarted', () => {
+      const params: HyperflowParams = {
+        id: currentUser?.id,
+        name: currentUser?.name.split(' ')[0],
+        email: currentUser?.email,
+        sender: jwtToHyperflow
+      };
+
+      if (currentUser?.isAccessPolicy) {
+        params.original_id = currentUser?.originalUserId;
+        params.original_name = currentUser?.originalUserName?.split(' ')[0];
+        params.original_email = currentUser?.originalUserEmail;
+      }
+
+      Hyperflow.initFlow(hyperflowConfig.flowId, params);
+    });
+  }
+
+  return null;
+};
+
+export default HyperflowSupportChat;

Topbar/HyperflowSupportChat/import.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+const useExternalScript = url => {
+  const [state, setState] = useState(url ? 'loading' : 'idle');
+
+  useEffect(() => {
+    if (!url) {
+      setState('idle');
+      return;
+    }
+
+    let script = document.querySelector(`script[src="${url}"]`);
+
+    const handleScript = e => {
+      setState(e.type === 'load' ? 'ready' : 'error');
+    };
+
+    if (!script) {
+      script = document.createElement('script');
+      script.type = 'application/javascript';
+      script.src = url;
+      script.async = true;
+      document.body.appendChild(script);
+    }
+
+    script.addEventListener('load', handleScript);
+    script.addEventListener('error', handleScript);
+
+    return () => {
+      script.removeEventListener('load', handleScript);
+      script.removeEventListener('error', handleScript);
+    };
+  }, [url]);
+
+  return state;
+};
+
+export default useExternalScript;

Topbar/HyperflowSupportChat/index.tsx

@@ -0,0 +1,21 @@
+import HyperflowSupportChat from './chat';
+
+export interface TopbarHyperflowSupportChatProps {
+  jwtToHyperflow?: string;
+  currentUser?: any;
+  hyperflowConfig?: any;
+}
+
+const TopbarHyperflowSupportChat = ({
+  jwtToHyperflow,
+  currentUser,
+  hyperflowConfig
+}: TopbarHyperflowSupportChatProps) => {
+  if (!jwtToHyperflow) return null;
+
+  return (
+    <HyperflowSupportChat jwtToHyperflow={jwtToHyperflow} currentUser={currentUser} hyperflowConfig={hyperflowConfig} />
+  );
+};
+
+export default TopbarHyperflowSupportChat;

Topbar/index.tsx

@@ -7,6 +7,7 @@ import Actions from './Actions';
 import Apps from './Apps';
 import Belt from './Belt';
 import TopbarContext, { TopbarContextType } from './context';
+import HyperflowSupportChat from './HyperflowSupportChat';
 import Logo from './Logo';
 import ModeSwitcher from './ModeSwitcher';
 import Search from './Search';
@@ -43,6 +44,7 @@ export interface TopbarProps extends HTMLAttributes<HTMLDivElement> {
     isClubeBlack?: boolean;
     isSupport?: boolean;
     supportId?: number;
+    ssid?: string;
   };
 }
 
@@ -129,6 +131,7 @@ const Topbar = memo<TopbarProps>(
 export default nestedComponent(Topbar, {
   Action,
   UnitySupportChat,
+  HyperflowSupportChat,
   UserMenu,
   UserMenuItem,
   UserMenuDivider,

_dev/App.tsx

@@ -32,10 +32,12 @@ function App() {
             tag: 'unity',
             supportId: 1,
             isSupport: true,
-            avatar: 'https://cdn.testzz.ninja/myeduzz/upload/3c/8e/3c8e5fc487944315a4ccdc3d95e6bda7'
+            avatar: 'https://cdn.testzz.ninja/myeduzz/upload/3c/8e/3c8e5fc487944315a4ccdc3d95e6bda7',
+            ssid: '0000aaaa-11bb-22cc-33dd-444444eeeeee'
           }}
         >
           <Topbar.UnitySupportChat />
+          <Topbar.HyperflowSupportChat />
 
           <Topbar.Search onEnter={onSearchEnter} />
           <Topbar.ModeSwitcher />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/ui-layout",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "keywords": [
     "eduzz",
     "react",