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

Author: wojciechdudek-livechat

.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 { 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,88 @@
+"use client";
+
+import { Fragment, useEffect, useState } from "react";
+import { Button, Card } from "@livechat/design-system-react-components";
+import {
+  deleteCustomerProfile,
+  fetchCustomers,
+  saveCustomerProfile,
+} from "lib/api";
+import { useApp, useLiveChatDetails } from "@livechat/developer-ui-react";
+
+export interface CustomerProfile {
+  [key: string]: {
+    default_value: string;
+  };
+}
+
+export default function LiveChatChatDetails() {
+  const { app } = useApp();
+  const { customerProfile } = useLiveChatDetails();
+  const [customers, setCustomers] = useState<CustomerProfile>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    fetchCustomerProfiles();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fetchCustomerProfiles = async () => {
+    const customers = await fetchCustomers(app);
+    setCustomers(customers);
+  };
+
+  const handleSaveCustomerProfile = async () => {
+    if (!customerProfile) {
+      return;
+    }
+
+    setIsLoading(true);
+    await saveCustomerProfile(app, customerProfile);
+    await fetchCustomerProfiles();
+    setIsLoading(false);
+  };
+
+  const handleDeleteCustomerProfile = async () => {
+    if (!customerProfile) {
+      return;
+    }
+
+    setIsLoading(true);
+    await deleteCustomerProfile(app, customerProfile.id);
+    await fetchCustomerProfiles();
+    setIsLoading(false);
+  };
+
+  const customerExists = customerProfile && customerProfile?.id in customers;
+
+  return (
+    <div>
+      <Card title="Customer profile">
+        {customerProfile ? (
+          <Fragment>
+            <ul>
+              <li>Name: {customerProfile.name}</li>
+              <li>Email: {customerProfile.email}</li>
+              <li>Country: {customerProfile.geolocation.country}</li>
+              <li>Timezone: {customerProfile.geolocation.timezone}</li>
+              <li>ID: {customerProfile.id}</li>
+            </ul>
+            <Button
+              loading={isLoading}
+              kind="primary"
+              onClick={
+                customerExists
+                  ? handleDeleteCustomerProfile
+                  : handleSaveCustomerProfile
+              }
+            >
+              {customerExists ? "Delete customer" : "Save customer"}
+            </Button>
+          </Fragment>
+        ) : (
+          "Loading customer profile"
+        )}
+      </Card>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { App } from "@livechat/developer-sdk";
+import { deleteCustomerProfile, fetchCustomers } from "lib/api";
+import { Button } from "@livechat/design-system-react-components";
+import { useApp, useLiveChatFullscreen } from "@livechat/developer-ui-react";
+
+interface Customer {
+  name: string;
+  email: string;
+  id: string;
+}
+
+export default function Page() {
+  const { app } = useApp();
+  const { widget } = useLiveChatFullscreen();
+  const [notificationsCount, setNotificationsCount] = useState(0);
+  const [customers, setCustomers] = useState<Customer[]>([]);
+
+  const handleFetchCustomers = async (app: App) => {
+    const customers = await fetchCustomers(app);
+    const formattedCustomers = Object.keys(customers).map((customer) => ({
+      name: customers[customer].default_value.split(";")[0],
+      email: customers[customer].default_value.split(";")[1],
+      id: customer,
+    }));
+    setCustomers(formattedCustomers);
+    setNotificationsCount(3);
+  };
+
+  const handleDeleteCustomerProfile = async (app: App, customerId: string) => {
+    await deleteCustomerProfile(app, customerId);
+    await handleFetchCustomers(app);
+  };
+
+  useEffect(() => {
+    widget.setNotificationBadge(notificationsCount);
+  }, [widget, notificationsCount]);
+
+  useEffect(() => {
+    handleFetchCustomers(app);
+  }, [app]);
+
+  return (
+    <div>
+      <h1>Customers list</h1>
+      <table className="customer-list">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>ID</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {customers.map((customer) => (
+            <tr key={customer.id}>
+              <td>{customer.name}</td>
+              <td>{customer.email}</td>
+              <td>{customer.id}</td>
+              <td>
+                <Button
+                  kind="secondary"
+                  onClick={async () =>
+                    await handleDeleteCustomerProfile(app, customer.id)
+                  }
+                >
+                  Delete user
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -1,29 +1,18 @@
-@import url('@livechat/design-system/dist/design-system.css');
-@import url('@livechat/design-system-react-components/dist/style.css');
+@import url("@livechat/design-system-react-components/dist/style.css");
+@import url("@livechat/developer-ui-react/dist/index.css");
 
 html,
 body {
   padding: 0;
   margin: 0;
   font-family: sans-serif;
+  background-color: #ffffff;
 }
 
 * {
   box-sizing: border-box;
 }
 
-.full-screen-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-}
-
-.view-container {
-  padding: 16px;
-}
-
 .customer-list {
   width: 100%;
 }

styles/main.css app/globals.cssstyles/main.css renamed to app/globals.css

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { AppProvider } from "@livechat/developer-ui-react";
+import { AppConfig } from "@livechat/developer-sdk";
+import config from "livechat.config.json";
+
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Developer app template (NextJs)",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AppProvider config={config as unknown as AppConfig}>
+          {children}
+        </AppProvider>
+      </body>
+    </html>
+  );
+}