Initial commit

.eslintrc

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

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "all"
+}

README.md

@@ -0,0 +1,58 @@
+# <img src="https://livechat.design/images/livechat/DIGITAL%20%28RGB%29/SVG/Mark_RGB_Orange.svg" widht="24px" height="24px" /> LiveChat Developer App - Next.js Template
+
+> This Next.js template bootstraps your [Developer Console](https://platform.text.com/console) application with a predefined configuration and a sample [LiveChat APIs](https://platform.text.com/docs) code.
+
+## 🚀 Getting Started
+
+First, install dependecies:
+
+```sh
+npm install
+```
+
+Then, log in to your [Developer Console](https://platform.text.com/console) account:
+
+```sh
+npx lcdev login
+```
+
+Now, you can open your [Developer Console](https://platform.text.com/console) app:
+
+```sh
+npx lcdev open
+```
+
+or go to the [Developer Console](https://platform.text.com/console) and see your newly created app in action!
+
+To start local development server, run:
+
+```sh
+npm run dev
+```
+
+## ⚙️ Available Scripts
+
+### `dev`
+
+Runs the app in the development mode.
+Open http://localhost:3000 to view it in your browser.
+The page will reload when you make changes.
+You may also see any lint errors in the console.
+
+### `build`
+
+Builds the app for production to the `.next` folder.
+
+### `start`
+
+Starts production ready Next.js web server.
+
+## 🧑‍💻 [Text Platform](https://platform.text.com/): who are we?
+
+Behind [Text](https://www.text.com/), there’s a [team of passionate people](https://www.text.com/team/) building online customer service software with online chat, help desk software, chatbot, and web analytics capabilities.
+
+With a suite of five products ([LiveChat](https://www.livechat.com), [ChatBot](https://chatbot.com/), [HelpDesk](https://helpdesk.com/), [KnowledgeBase](https://www.knowledgebase.com/), and [OpenWidget](https://openwidget.com/)) and their powerful APIs, we power customer communication for 36,000 companies in 150 countries.
+
+[The Platform](https://platform.text.com/) is a range of products and services that can be used to build a variety of communication tools for businesses. Our [Developer Program](https://platform.text.com/developer-program) and [Marketplace](https://www.livechat.com/marketplace/) create an open ecosystem for developers, partners, and customers. With our [advanced APIs](https://platform.text.com/) and comprehensive [documentation](https://platform.text.com/docs), you can shape the future of communication with us — starting today.
+
+[Join our Discord](https://discord.com/invite/NcfJu3a9kM) to learn, get inspired, and meet other developers!

components/FullScreenLoader.tsx

@@ -0,0 +1,11 @@
+import { Loader } from '@livechat/design-system'
+
+function FullScreenLoader() {
+  return (
+    <div className="full-screen-loader">
+      <Loader size="large" />
+    </div>
+  )
+}
+
+export default FullScreenLoader

components/ViewContainer.tsx

@@ -0,0 +1,9 @@
+type Props = {
+  children: React.ReactNode
+}
+
+function ViewContainer({ children }: Props) {
+  return <div className="view-container">{children}</div>
+}
+
+export default ViewContainer

hooks/app/useDeveloperApp.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+import { DeveloperApp, DeveloperAppConfig } from '@livechat/developer-sdk'
+import lcConfig from '../../livechat.config.json'
+
+function useDeveloperApp() {
+  const [developerApp, setDeveloperApp] = useState<DeveloperApp | null>(null)
+
+  useEffect(() => {
+    DeveloperApp.init(lcConfig as DeveloperAppConfig)
+      .then(async (app) => {
+        await app.authorize()
+
+        return app
+      })
+      .then(setDeveloperApp)
+  }, [])
+
+  return developerApp
+}
+
+export default useDeveloperApp

hooks/products/helpdesk/useDetailsWidget.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react'
+import { createDetailsWidget, ITicketInfo, IDetailsWidget, ISection } from '@livechat/helpdesk-sdk'
+
+function useHelpDeskDetailsWidget(onSectionLoad?: () => ISection) {
+  const [widget, setWidget] = useState<IDetailsWidget | null>(null)
+  const [ticketInfo, setTicketInfo] = useState<ITicketInfo | null>(null)
+
+  const widgetButtonHandler = useCallback(() => {
+    // Handler for widget buttons
+  }, [])
+
+  useEffect(() => {
+    createDetailsWidget().then(setWidget)
+  }, [])
+
+  useEffect(() => {
+    if (widget) {
+      setTicketInfo(widget.getTicketInfo())
+
+      if (onSectionLoad) {
+        widget.modifySection(onSectionLoad())
+      }
+
+      widget.on('ticket_info', setTicketInfo)
+      widget.on('customer_details_section_button_click', widgetButtonHandler)
+
+      return () => {
+        widget.off('ticket_info', setTicketInfo)
+        widget.off('customer_details_section_button_click', widgetButtonHandler)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widget, widgetButtonHandler])
+
+  return { widget, ticketInfo }
+}
+
+export default useHelpDeskDetailsWidget

hooks/products/helpdesk/useFullscreenWidget.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import { createFullscreenWidget, IFullscreenWidget } from '@livechat/helpdesk-sdk'
+
+function useHelpDeskFullscreenWidget(): IFullscreenWidget | null {
+  const [widget, setWidget] = useState<IFullscreenWidget | null>(null)
+
+  useEffect(() => {
+    createFullscreenWidget().then(setWidget)
+  }, [])
+
+  return widget
+}
+
+export default useHelpDeskFullscreenWidget

hooks/products/livechat/useDetailsWidget.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react'
+import { createDetailsWidget, ICustomerProfile, IDetailsWidget, ISection } from '@livechat/agent-app-sdk'
+
+function useLiveChatDetailsWidget(onSectionLoad?: () => ISection) {
+  const [widget, setWidget] = useState<IDetailsWidget | null>(null)
+  const [customerProfile, setCustomerProfile] = useState<ICustomerProfile | null>(null)
+
+  const widgetButtonHandler = useCallback(() => {
+    // Handler for widget buttons
+  }, [])
+
+  useEffect(() => {
+    createDetailsWidget().then(setWidget)
+  }, [])
+
+  useEffect(() => {
+    if (widget) {
+      setCustomerProfile(widget.getCustomerProfile())
+
+      if (onSectionLoad) {
+        widget.modifySection(onSectionLoad())
+      }
+
+      widget.on('customer_profile', setCustomerProfile)
+      widget.on('customer_details_section_button_click', widgetButtonHandler)
+
+      return () => {
+        widget.off('customer_profile', setCustomerProfile)
+        widget.off('customer_details_section_button_click', widgetButtonHandler)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widget, widgetButtonHandler])
+
+  return { widget, customerProfile }
+}
+
+export default useLiveChatDetailsWidget

hooks/products/livechat/useFullscreenWidget.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import { createFullscreenWidget, IFullscreenWidget } from '@livechat/agent-app-sdk'
+
+function useLiveChatFullscreenWidget(): IFullscreenWidget | null {
+  const [widget, setWidget] = useState<IFullscreenWidget | null>(null)
+
+  useEffect(() => {
+    createFullscreenWidget().then(setWidget)
+  }, [])
+
+  return widget
+}
+
+export default useLiveChatFullscreenWidget

hooks/products/livechat/useMessageBoxWidget.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react'
+import { createMessageBoxWidget, ICustomerProfile, IMessageBoxWidget } from '@livechat/agent-app-sdk'
+
+function useLiveChatMessageBoxWidget() {
+  const [widget, setWidget] = useState<IMessageBoxWidget | null>(null)
+  const [customerProfile, setCustomerProfile] = useState<ICustomerProfile | null>(null)
+
+  const widgetButtonHandler = useCallback(() => {
+    // Handler for widget buttons
+  }, [])
+
+  useEffect(() => {
+    createMessageBoxWidget().then((widget) => {
+      widget.on('customer_profile', setCustomerProfile)
+
+      setWidget(widget)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (widget) {
+      setCustomerProfile(widget.getCustomerProfile())
+
+      widget.on('customer_profile', setCustomerProfile)
+
+      return () => {
+        widget.off('customer_profile', setCustomerProfile)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widget, widgetButtonHandler])
+
+  return { widget, customerProfile }
+}
+
+export default useLiveChatMessageBoxWidget

livechat.config.json

@@ -0,0 +1 @@
+{}

module.d.ts

@@ -0,0 +1 @@
+declare module '@livechat/accounts-sdk'

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  webpack: (config) => {
+    config.devtool = 'source-map'
+
+    return config
+  },
+}
+
+module.exports = nextConfig