Merge pull request #11 from eduzz/feature-add-types-in-HyperflowSuppo…

…rtChat chore: Refactor HyperflowSupportChat to use types
eduzz · Aug 20, 2024 · d41f878 · d41f878
2 parents 1df0bfb + 077d5d3
commit d41f878
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Eduzz UI
+
 UI padrão das aplicações, aqui você vai encontrar:
+
 * [Layout](#layout)
 * [App Loader](#app-loader)
 
@@ -131,6 +133,7 @@ function MyComponent() {
 ## Props
 
 ### Layout props
+
 | prop                    | tipo                                   | obrigatório | padrão    | descrição                                                                        |
 |-------------------------|----------------------------------------|-------------|-----------|----------------------------------------------------------------------------------|
 | mode                    | `'light' \| 'dark'`                    | `false`     | `'light'` | Modo (Dark ou Light mode)                                                        |
@@ -182,15 +185,43 @@ function MyComponent() {
 
 | prop            | tipo     | obrigatório | padrão | descrição                                            |
 |-----------------|----------|-------------|--------|------------------------------------------------------|
-| hyperflowConfig | `object` | `true`      | -      | Tokens dos canais do Hyperflow                       |
+| hyperflowConfig | `HyperflowConfig` | `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 |
+| currentUser     | `CurrentUser` | `true`      | -      | Dados do usuário que serão enviados para o Hyperflow |
+
+```ts
+export type CurrentUser = {
+  tag: string;
+  belt: string;
+  isClubeBlack: boolean;
+  id: number;
+  name: string;
+  email: string;
+  isAccessPolicy: boolean;
+} & (
+  | {
+      isAccessPolicy: true;
+      originalUserId: number;
+      originalUserName: string;
+      originalUserEmail: string;
+    }
+  | { isAccessPolicy: false }
+);
+
+type HyperflowConfig = {
+  chatUnityID: string;
+  chatBlackID: string;
+  chatEliteID: string;
+  flowId: string;
+};
+```
 
 ### Topbar.ModeSwitcher props
+
 | prop               | tipo     | obrigatório | padrão | descrição                                                   |
 |--------------------|----------|-------------|--------|-------------------------------------------------------------|
-| tooltip               | `string`    | `false`     | `'Tema'`      |  Texto para o tooltip do botão. mode)                                     |
-| badgeDot         | `boolean`    | `false`     | `false`      | Se um badgeDot deve ser adicionado ao botão .                           |
+| tooltip| `string`| `false`| `'Tema'`|  Texto para o tooltip do botão. mode |
+| badgeDot| `boolean`| `false`| `false`| Se um badgeDot deve ser adicionado ao botão .|
 
 ### Sidebar props
 
@@ -225,7 +256,6 @@ function MyComponent() {
 <br/>
 <br/>
 
-
 # App Loader
 
 Loader de aplicação padrão.
@@ -280,4 +310,4 @@ function App() {
 | prop         | tipo             | obrigatório | padrão       |
 |--------------|------------------|-------------|--------------|
 | logo         | `url\|ReactNode` | `false`     | `Eduzz Logo` |
-| logoDarkMode | `url\|ReactNode` | `false`     | `Eduzz Logo` |
+| logoDarkMode | `url\|ReactNode` | `false`     | `Eduzz Logo` |
diff --git a/Topbar/HyperflowSupportChat/chat.tsx b/Topbar/HyperflowSupportChat/chat.tsx
@@ -1,23 +1,7 @@
 import useExternalScript from './import';
+import { CurrentUser, HyperflowConfig, HyperflowParams, SupportChatProps } from './types';
 
-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) {
+function getChatTokenID(currentUser: CurrentUser, hyperflowConfig: HyperflowConfig) {
   const chatUnityID = hyperflowConfig.chatUnityID;
   const chatBlackID = hyperflowConfig.chatBlackID;
   const chatEliteID = hyperflowConfig.chatEliteID;
@@ -33,26 +17,26 @@ const HyperflowSupportChat: React.FC<SupportChatProps> = ({ jwtToHyperflow, curr
   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);
-    });
+  if (hyperflow !== 'ready') {
+    return null;
   }
 
-  return null;
+  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);
+  });
 };
 
 export default HyperflowSupportChat;
diff --git a/Topbar/HyperflowSupportChat/index.tsx b/Topbar/HyperflowSupportChat/index.tsx
@@ -1,18 +1,12 @@
 import HyperflowSupportChat from './chat';
-
-export interface TopbarHyperflowSupportChatProps {
-  jwtToHyperflow?: string;
-  currentUser?: any;
-  hyperflowConfig?: any;
-}
+import { TopbarHyperflowSupportChatProps } from './types';
 
 const TopbarHyperflowSupportChat = ({
   jwtToHyperflow,
   currentUser,
   hyperflowConfig
 }: TopbarHyperflowSupportChatProps) => {
   if (!jwtToHyperflow) return null;
-
   return (
     <HyperflowSupportChat jwtToHyperflow={jwtToHyperflow} currentUser={currentUser} hyperflowConfig={hyperflowConfig} />
   );

diff --git a/Topbar/HyperflowSupportChat/types.ts b/Topbar/HyperflowSupportChat/types.ts
@@ -0,0 +1,46 @@
+export type CurrentUser = {
+  tag: string;
+  belt: string;
+  isClubeBlack: boolean;
+  id: number;
+  name: string;
+  email: string;
+  isAccessPolicy: boolean;
+} & (
+  | {
+      isAccessPolicy: true;
+      originalUserId: number;
+      originalUserName: string;
+      originalUserEmail: string;
+    }
+  | { isAccessPolicy: false }
+);
+
+export type HyperflowConfig = {
+  chatUnityID: string;
+  chatBlackID: string;
+  chatEliteID: string;
+  flowId: string;
+};
+
+export type TopbarHyperflowSupportChatProps = {
+  jwtToHyperflow: string;
+  currentUser: CurrentUser;
+  hyperflowConfig: HyperflowConfig;
+};
+
+export type HyperflowParams = {
+  id: number;
+  name: string;
+  email: string;
+  original_id?: number;
+  original_name?: string;
+  original_email?: string;
+  sender: string;
+};
+
+export type SupportChatProps = {
+  jwtToHyperflow: string;
+  currentUser: CurrentUser;
+  hyperflowConfig: HyperflowConfig;
+};
diff --git a/_dev/App.tsx b/_dev/App.tsx
@@ -37,7 +37,27 @@ function App() {
           }}
         >
           <Topbar.UnitySupportChat />
-          <Topbar.HyperflowSupportChat />
+          <Topbar.HyperflowSupportChat
+            currentUser={{
+              tag: 'unity',
+              belt: 'Red Belt',
+              isClubeBlack: false,
+              id: 1,
+              name: 'QA-ORBITA-NAO-ALTERAR-NAO-ALTERAR',
+              email: '[email protected]',
+              isAccessPolicy: true,
+              originalUserId: 1,
+              originalUserName: 'QA-ORBITA-NAO-ALTERAR-NAO-ALTERAR',
+              originalUserEmail: '[email protected]'
+            }}
+            hyperflowConfig={{
+              chatBlackID: 'bla',
+              chatEliteID: 'bla',
+              chatUnityID: 'bla',
+              flowId: 'bla'
+            }}
+            jwtToHyperflow='bla'
+          />
 
           <Topbar.Search onEnter={onSearchEnter} />
           <Topbar.ModeSwitcher />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/ui-layout",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "keywords": [
     "eduzz",
     "react",