Ugraded @livechat/developer-ui-react

Author: wojciechdudek-livechat

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json"
+  }
 }

app/(products)/helpdesk/(widgets)/details/layout.tsx

@@ -1,25 +1,26 @@
 "use client";
 
 import { Card } from "@livechat/design-system-react-components";
-import { useApp, useHelpDeskDetails } from "@livechat/developer-ui-react";
+import { HelpDeskDetailsProvider } from "@livechat/developer-ui-react";
 
 export default function Page() {
-  const { app } = useApp();
-  const { widget, ticketInfo } = useHelpDeskDetails();
-
   return (
-    <div>
-      <h1>Ticket Details widget</h1>
+    <HelpDeskDetailsProvider>
+      {({ ticketInfo }) => (
+        <div>
+          <h1>Ticket Details widget</h1>
 
-      <Card title="Ticket info">
-        {ticketInfo ? (
-          <ul>
-            <li>Ticket ID: {ticketInfo.id}</li>
-          </ul>
-        ) : (
-          "Loading ticket info ..."
-        )}
-      </Card>
-    </div>
+          <Card title="Ticket info">
+            {ticketInfo ? (
+              <ul>
+                <li>Ticket ID: {ticketInfo.id}</li>
+              </ul>
+            ) : (
+              "Loading ticket info ..."
+            )}
+          </Card>
+        </div>
+      )}
+    </HelpDeskDetailsProvider>
   );
 }

app/(products)/helpdesk/(widgets)/details/page.tsx

@@ -1,19 +1,24 @@
 "use client";
 
-import { NumericInput } from "@livechat/design-system-react-components";
-import { useApp, useHelpDeskFullscreen } from "@livechat/developer-ui-react";
 import { useEffect, useState } from "react";
+import { NumericInput } from "@livechat/design-system-react-components";
+import {
+  useApp,
+  useHelpDeskFullscreen,
+  HelpDeskFullscreenProvider,
+} from "@livechat/developer-ui-react";
 
-export default function Page() {
+function Widget() {
   const { app } = useApp();
   const { widget } = useHelpDeskFullscreen();
-
   const [notificationsCount, setNotificationsCount] = useState(0);
 
   useEffect(() => {
     widget.setNotificationBadge(notificationsCount);
   }, [widget, notificationsCount]);
 
+  console.log(app);
+
   return (
     <div>
       <h1>Fullscreen widget</h1>
@@ -27,3 +32,11 @@ export default function Page() {
     </div>
   );
 }
+
+export default function Page() {
+  return (
+    <HelpDeskFullscreenProvider>
+      <Widget />
+    </HelpDeskFullscreenProvider>
+  );
+}

app/(products)/helpdesk/(widgets)/fullscreen/layout.tsx

@@ -5,6 +5,8 @@ import { useApp } from "@livechat/developer-ui-react";
 export default function Page() {
   const { app } = useApp();
 
+  console.log(app);
+
   return (
     <div>
       <h1>Fullscreen</h1>

app/(products)/helpdesk/(widgets)/fullscreen/page.tsx

@@ -1,35 +1,36 @@
 "use client";
 
 import { Button, Card } from "@livechat/design-system-react-components";
-import { useApp, useLiveChatDetails } from "@livechat/developer-ui-react";
+import { LiveChatDetailsProvider } from "@livechat/developer-ui-react";
 
 export default function Page() {
-  const { app } = useApp();
-  const { widget, customerProfile } = useLiveChatDetails();
-
   return (
-    <div>
-      <h1>Chat Details widget</h1>
-      <Button
-        kind="primary"
-        type="button"
-        onClick={() => {
-          widget.putMessage("New message");
-        }}
-      >
-        Put a message
-      </Button>
-      <Card title="Customer profile">
-        {customerProfile ? (
-          <ul>
-            <li>Name: {customerProfile.name}</li>
-            <li>Country: {customerProfile.geolocation.country}</li>
-            <li>Timezone: {customerProfile.geolocation.timezone}</li>
-          </ul>
-        ) : (
-          "Loading customer profile ..."
-        )}
-      </Card>
-    </div>
+    <LiveChatDetailsProvider>
+      {({ widget, customerProfile }) => (
+        <div>
+          <h1>Chat Details widget</h1>
+          <Button
+            kind="primary"
+            type="button"
+            onClick={() => {
+              widget.putMessage("New message");
+            }}
+          >
+            Put a message
+          </Button>
+          <Card title="Customer profile">
+            {customerProfile ? (
+              <ul>
+                <li>Name: {customerProfile.name}</li>
+                <li>Country: {customerProfile.geolocation.country}</li>
+                <li>Timezone: {customerProfile.geolocation.timezone}</li>
+              </ul>
+            ) : (
+              "Loading customer profile ..."
+            )}
+          </Card>
+        </div>
+      )}
+    </LiveChatDetailsProvider>
   );
 }

app/(products)/helpdesk/(widgets)/settings/page.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import { Card, NumericInput } from "@livechat/design-system-react-components";
-import { useApp, useLiveChatFullscreen } from "@livechat/developer-ui-react";
 import { useEffect, useState } from "react";
+import { Card, NumericInput } from "@livechat/design-system-react-components";
+import {
+  useApp,
+  useLiveChatFullscreen,
+  LiveChatFullscreenProvider,
+} from "@livechat/developer-ui-react";
 import {
   AgentConfigurationDto,
   LiveChatConfigurationApiError,
 } from "@livechat/developer-studio-api";
 
-export default function Page() {
+function Widget() {
   const { app } = useApp();
   const { widget } = useLiveChatFullscreen();
 
@@ -64,3 +68,11 @@ export default function Page() {
     </div>
   );
 }
+
+export default function Page() {
+  return (
+    <LiveChatFullscreenProvider>
+      <Widget />
+    </LiveChatFullscreenProvider>
+  );
+}