Upgraded developer-sdk to 1.4.0

Author: wojciechdudek-livechat

hooks/app/useDeveloperApp.ts

@@ -10,7 +10,6 @@ function useDeveloperApp() {
   useEffect(() => {
     const app = DeveloperApp.init(config)
 
-    app.authorization
     if (config.auth?.clientId) {
       app.authorize().then(() => setDeveloperApp(app))
     } else {

package-lock.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@livechat/agent-app-sdk": "^1.6.5",
     "@livechat/design-system-react-components": "^1.12.0",
-    "@livechat/developer-sdk": "^1.3.63",
+    "@livechat/developer-sdk": "^1.4.3",
     "@livechat/helpdesk-sdk": "^1.0.3",
     "@livechat/moments-sdk": "^1.8.2",
     "camelcase": "^6.3.0",
@@ -20,7 +20,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@livechat/developer-cli": "^1.2.128",
+    "@livechat/developer-cli": "^1.2.164",
     "@types/node": "^17.0.21",
     "@types/react": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.14.0",

package.json

@@ -4,18 +4,12 @@ import FullScreenLoader from 'components/FullScreenLoader'
 import ViewContainer from 'components/ViewContainer'
 import useDeveloperApp from 'hooks/app/useDeveloperApp'
 import useHelpDeskFullscreenWidget from 'hooks/products/helpdesk/useFullscreenWidget'
-
-type Agent = {
-  id: string
-  name: string
-  role: string
-  avatar: string
-}
+import { AgentConfigurationDto, LiveChatConfigurationApiError } from '@livechat/developer-studio-api'
 
 function HelpDeskFullscreen() {
   const developerApp = useDeveloperApp()
   const fullscreenWidget = useHelpDeskFullscreenWidget()
-  const [agents, setAgents] = useState<Agent[] | null>(null)
+  const [agents, setAgents] = useState<AgentConfigurationDto[] | null>(null)
   const [notificationsCount, setNotificationsCount] = useState(0)
 
   useEffect(() => {
@@ -25,28 +19,21 @@ function HelpDeskFullscreen() {
   }, [fullscreenWidget, notificationsCount])
 
   useEffect(() => {
-    if (developerApp && developerApp.authorization?.data) {
-      fetch(`${developerApp.urls.liveChatApi}/configuration/action/list_agents`, {
-        method: 'POST',
-        body: '{}',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `${developerApp.authorization.data.token_type} ${developerApp.authorization.data.access_token}`,
-        },
-      })
-        .then(async (response) => {
-          const data = await response.json();
-
-          if (response.ok) {
-            return data
-          }
+    if (!developerApp?.authorization) {
+      return
+    }
 
-          await developerApp.features.reporting.sendError("4xx", `Problem with agent list request [${data.error?.message ?? response.status}]`)
+    developerApp.api.products.livechat.configuration.agents
+      .getAgents()
+      .then(({ data }) => {
+        setAgents(data)
+      })
+      .catch(async (error) => {
+        const apiError = error.response.data.error as LiveChatConfigurationApiError | undefined
+        const eventMessage = apiError ? `${apiError.type}: ${apiError.message}` : 'Unknown error'
 
-          return []
-        })
-        .then(setAgents)
-    }
+        await developerApp.features.reports.sendError('4xx', eventMessage)
+      })
   }, [developerApp])
 
   if (fullscreenWidget === null || developerApp === null || agents === null) {

pages/helpdesk/fullscreen.tsx

@@ -4,18 +4,12 @@ import FullScreenLoader from 'components/FullScreenLoader'
 import ViewContainer from 'components/ViewContainer'
 import useDeveloperApp from 'hooks/app/useDeveloperApp'
 import useLiveChatFullscreenWidget from 'hooks/products/livechat/useFullscreenWidget'
-
-type Agent = {
-  id: string
-  name: string
-  role: string
-  avatar: string
-}
+import { AgentConfigurationDto, LiveChatConfigurationApiError } from '@livechat/developer-studio-api'
 
 function LiveChatFullscreen() {
   const developerApp = useDeveloperApp()
   const fullscreenWidget = useLiveChatFullscreenWidget()
-  const [agents, setAgents] = useState<Agent[] | null>(null)
+  const [agents, setAgents] = useState<AgentConfigurationDto[] | null>(null)
   const [notificationsCount, setNotificationsCount] = useState(0)
 
   useEffect(() => {
@@ -25,28 +19,22 @@ function LiveChatFullscreen() {
   }, [fullscreenWidget, notificationsCount])
 
   useEffect(() => {
-    if (developerApp && developerApp.authorization?.data) {
-      fetch(`${developerApp.urls.liveChatApi}/configuration/action/list_agents`, {
-        method: 'POST',
-        body: '{}',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `${developerApp.authorization.data.token_type} ${developerApp.authorization.data.access_token}`,
-        },
-      })
-        .then(async (response) => {
-          const data = await response.json();
+    if (!developerApp?.authorization) {
+      return
+    }
 
-          if (response.ok) {
-            return data
-          }
+    developerApp.api.products.livechat.configuration.agents
+      .getAgents()
+      .then(({ data }) => {
+        setAgents(data)
+      })
+      .catch(async (error) => {
+        const apiError = error.response.data.error as LiveChatConfigurationApiError | undefined
+        const eventMessage = apiError ? `${apiError.type}: ${apiError.message}` : 'Unknown error'
 
-          await developerApp.features.reporting.sendError("4xx", `Problem with agent list request [${data.error?.message ?? response.status}]`)
+        await developerApp.features.reports.sendError('4xx', eventMessage)
 
-          return []
-        })
-        .then(setAgents)
-    }
+      })
   }, [developerApp])
 
   if (fullscreenWidget === null || developerApp === null || agents === null) {