Added @livechat/developer-ui-react. Upgraded next to v14

Author: wojciechdudek-livechat

.eslintrc

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

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,16 +24,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,9 @@
+import { HelpDeskDetailsProvider } from "@livechat/developer-ui-react";
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <HelpDeskDetailsProvider>{children}</HelpDeskDetailsProvider>;
+}

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

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

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

@@ -0,0 +1,9 @@
+import { HelpDeskFullscreenProvider } from "@livechat/developer-ui-react";
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <HelpDeskFullscreenProvider>{children}</HelpDeskFullscreenProvider>;
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { NumericInput } from "@livechat/design-system-react-components";
+import { useApp, useHelpDeskFullscreen } from "@livechat/developer-ui-react";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+  const { app } = useApp();
+  const { widget } = useHelpDeskFullscreen();
+
+  const [notificationsCount, setNotificationsCount] = useState(0);
+
+  useEffect(() => {
+    widget.setNotificationBadge(notificationsCount);
+  }, [widget, notificationsCount]);
+
+  return (
+    <div>
+      <h1>Fullscreen widget</h1>
+      <NumericInput
+        min={0}
+        max={99}
+        id="notifications-count"
+        value={String(notificationsCount)}
+        onChange={(value) => setNotificationsCount(Number(value))}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { useApp } from "@livechat/developer-ui-react";
+
+export default function Page() {
+  const { app } = useApp();
+
+  return (
+    <div>
+      <h1>Fullscreen</h1>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { LiveChatDetailsProvider } from "@livechat/developer-ui-react";
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <LiveChatDetailsProvider>{children}</LiveChatDetailsProvider>;
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button, Card } from "@livechat/design-system-react-components";
+import { useApp, useLiveChatDetails } 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>
+  );
+}