From e1204e90198d0e46a0b0437b276e3e89cb7d38e2 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Tue, 17 Jun 2025 10:01:19 +0700 Subject: [PATCH] fixing tawkto --- app/layout.tsx | 9 ++ app/page.tsx | 10 ++ .../main/dashboard/dashboard-container.tsx | 2 +- components/ui/tawkto/load-tawk.tsx | 32 ++-- components/ui/tawkto/tawkto.js | 12 ++ package-lock.json | 143 ++---------------- package.json | 1 + types/tawk.d.ts | 1 + 8 files changed, 64 insertions(+), 146 deletions(-) create mode 100644 components/ui/tawkto/tawkto.js create mode 100644 types/tawk.d.ts diff --git a/app/layout.tsx b/app/layout.tsx index ef41878..511eb5e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,8 +10,17 @@ import { Providers } from "./providers"; import LoadScript from "@/utils/global"; import { type ReactNode } from "react"; import LoadTawk from "@/components/ui/tawkto/load-tawk"; +import Script from "next/script"; +import dynamic from "next/dynamic"; const inter = Inter({ subsets: ["latin"] }); +// const Tawkto = dynamic( +// () => { +// return import("@/components/ui/tawkto/tawkto"); +// }, +// { ssr: true } +// ); + export const metadata: Metadata = { title: { default: siteConfig.name, diff --git a/app/page.tsx b/app/page.tsx index 2fa4f5a..12e7b0a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,3 +1,4 @@ +"use client"; import InstallPrompt from "@/components/install-promp"; import BannerHumasNew from "@/components/landing/banner-new"; import BodyLayout from "@/components/landing/BodyLayout"; @@ -5,11 +6,20 @@ import AnalyticDrawer from "@/components/landing/drawer"; import FooterNew from "@/components/landing/footer-new"; import HeaderNews from "@/components/landing/HeaderNews"; import NewsTicker from "@/components/landing/NewsTicker"; +import dynamic from "next/dynamic"; import { Suspense } from "react"; +const TawktoEmbed = dynamic( + () => { + return import("@/components/ui/tawkto/tawkto"); + }, + { ssr: true } +); + export default function Home() { return ( <> + {/* */}
{/* */} diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx index 02eca33..87979de 100644 --- a/components/main/dashboard/dashboard-container.tsx +++ b/components/main/dashboard/dashboard-container.tsx @@ -523,7 +523,7 @@ export default function DashboardContainer() { onClick={() => { if (list?.totalArticle !== 0) { setSelectedUnit(child?.userLevelName); - openModalArticle(list?.totalArticle); + // openModalArticle(list?.totalArticle); } }} className={`w-[10%] text-start cursor-pointer ${ diff --git a/components/ui/tawkto/load-tawk.tsx b/components/ui/tawkto/load-tawk.tsx index c8031ba..35cf5fb 100644 --- a/components/ui/tawkto/load-tawk.tsx +++ b/components/ui/tawkto/load-tawk.tsx @@ -1,22 +1,28 @@ "use client"; -import { useEffect } from "react"; +import TawkMessengerReact from "@tawk.to/tawk-messenger-react"; const LoadTawk = () => { - useEffect(() => { - const script = document.createElement("script"); - script.src = "https://embed.tawk.to/5d43069be5ae967ef80df561/default"; - script.async = true; - script.charset = "UTF-8"; - script.setAttribute("crossorigin", "*"); + // useEffect(() => { + // const script = document.createElement("script"); + // script.src = "https://embed.tawk.to/5d43069be5ae967ef80df561/default"; + // script.async = true; + // script.charset = "UTF-8"; + // script.setAttribute("crossorigin", "*"); - document.body.appendChild(script); + // document.body.appendChild(script); - return () => { - document.body.removeChild(script); - }; - }, []); + // return () => { + // document.body.removeChild(script); + // }; + // }, []); - return null; + // return null; + return ( + + ); }; export default LoadTawk; diff --git a/components/ui/tawkto/tawkto.js b/components/ui/tawkto/tawkto.js new file mode 100644 index 0000000..c10960d --- /dev/null +++ b/components/ui/tawkto/tawkto.js @@ -0,0 +1,12 @@ +import TawkMessengerReact from "@tawk.to/tawk-messenger-react"; + +export default function TawktoEmbed() { + return ( +
+ +
+ ); +} diff --git a/package-lock.json b/package-lock.json index 281f315..caaaa30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@hookform/resolvers": "^3.3.4", "@react-aria/ssr": "^3.8.0", "@react-aria/visually-hidden": "^3.8.6", + "@tawk.to/tawk-messenger-react": "^2.0.2", "@types/js-cookie": "^3.0.6", "@types/node": "20.5.7", "@types/react": "19.1.2", @@ -1981,39 +1982,6 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, - "node_modules/@heroui/form/node_modules/framer-motion": { - "version": "12.7.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.7.4.tgz", - "integrity": "sha512-jX0bPsTmU0oPZTYz/dVyD0dmOyEOEJvdn0TaZBE5I8g2GvVnnQnW9f65cJnoVfUkY3WZWNXGXnPbVA9YnaIfVA==", - "peer": true, - "dependencies": { - "motion-dom": "^12.7.4", - "motion-utils": "^12.7.2", - "tslib": "^2.4.0" - }, - "peerDependencies": { - "@emotion/is-prop-valid": "*", - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/is-prop-valid": { - "optional": true - }, - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, - "node_modules/@heroui/form/node_modules/tailwindcss": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", - "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==", - "peer": true - }, "node_modules/@heroui/input": { "version": "2.4.10", "resolved": "https://registry.npmjs.org/@heroui/input/-/input-2.4.10.tgz", @@ -4108,12 +4076,6 @@ "tailwindcss": "*" } }, - "node_modules/@heroui/react/node_modules/tailwindcss": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", - "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==", - "peer": true - }, "node_modules/@heroui/shared-icons": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/@heroui/shared-icons/-/shared-icons-2.1.6.tgz", @@ -4189,33 +4151,6 @@ "react-dom": ">=18 || >=19.0.0-rc.0" } }, - "node_modules/@heroui/snippet/node_modules/@heroui/aria-utils/node_modules/framer-motion": { - "version": "12.7.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.7.4.tgz", - "integrity": "sha512-jX0bPsTmU0oPZTYz/dVyD0dmOyEOEJvdn0TaZBE5I8g2GvVnnQnW9f65cJnoVfUkY3WZWNXGXnPbVA9YnaIfVA==", - "peer": true, - "dependencies": { - "motion-dom": "^12.7.4", - "motion-utils": "^12.7.2", - "tslib": "^2.4.0" - }, - "peerDependencies": { - "@emotion/is-prop-valid": "*", - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/is-prop-valid": { - "optional": true - }, - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, "node_modules/@heroui/snippet/node_modules/@heroui/button": { "version": "2.2.9", "resolved": "https://registry.npmjs.org/@heroui/button/-/button-2.2.9.tgz", @@ -4881,25 +4816,6 @@ "react": ">=18 || >=19.0.0-rc.0" } }, - "node_modules/@heroui/system/node_modules/@heroui/theme": { - "version": "2.4.13", - "resolved": "https://registry.npmjs.org/@heroui/theme/-/theme-2.4.13.tgz", - "integrity": "sha512-W1wm/x3dx9rZXNdyvjQRueK+9ieTpT2icyttGuVEn7NWgzMhpIbEKsAwtTLZGc5zMHJE2cxJQ/jpdCR8HBe0Dw==", - "peer": true, - "dependencies": { - "@heroui/shared-utils": "2.1.7", - "clsx": "^1.2.1", - "color": "^4.2.3", - "color2k": "^2.0.3", - "deepmerge": "4.3.1", - "flat": "^5.0.2", - "tailwind-merge": "2.5.4", - "tailwind-variants": "0.3.0" - }, - "peerDependencies": { - "tailwindcss": ">=3.4.0" - } - }, "node_modules/@heroui/system/node_modules/@react-aria/overlays": { "version": "3.26.1", "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.26.1.tgz", @@ -4930,38 +4846,6 @@ "node": ">=6" } }, - "node_modules/@heroui/system/node_modules/tailwind-merge": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz", - "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==", - "peer": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" - } - }, - "node_modules/@heroui/system/node_modules/tailwind-variants": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.0.tgz", - "integrity": "sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==", - "peer": true, - "dependencies": { - "tailwind-merge": "^2.5.4" - }, - "engines": { - "node": ">=16.x", - "pnpm": ">=7.x" - }, - "peerDependencies": { - "tailwindcss": "*" - } - }, - "node_modules/@heroui/system/node_modules/tailwindcss": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", - "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==", - "peer": true - }, "node_modules/@heroui/theme": { "version": "2.4.5", "resolved": "https://registry.npmjs.org/@heroui/theme/-/theme-2.4.5.tgz", @@ -9473,6 +9357,15 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@tawk.to/tawk-messenger-react": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@tawk.to/tawk-messenger-react/-/tawk-messenger-react-2.0.2.tgz", + "integrity": "sha512-Nl3JMMIrQiyveSSuP8qYWEu1u+coqz4WCA7TfSjOMDcpyWEiORvOdnMWTsSlhz8rae57HWsCAGLzE507fKtzXA==", + "peerDependencies": { + "react": "^18.1.0", + "react-dom": "^18.1.0" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -14400,21 +14293,6 @@ "node": ">=10" } }, - "node_modules/motion-dom": { - "version": "12.7.4", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.7.4.tgz", - "integrity": "sha512-1ZUHAoSUMMxP6jPqyxlk9XUfb6NxMsnWPnH2YGhrOhTURLcXWbETi6eemoKb60Pe32NVJYduL4B62VQSO5Jq8Q==", - "peer": true, - "dependencies": { - "motion-utils": "^12.7.2" - } - }, - "node_modules/motion-utils": { - "version": "12.7.2", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.7.2.tgz", - "integrity": "sha512-XhZwqctxyJs89oX00zn3OGCuIIpVevbTa+u82usWBC6pSHUd2AoNWiYa7Du8tJxJy9TFbZ82pcn5t7NOm1PHAw==", - "peer": true - }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -18750,6 +18628,7 @@ } }, "vendor/ckeditor5": { + "name": "ckeditor5-custom-build", "version": "0.0.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { diff --git a/package.json b/package.json index 944be39..d2aabd5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@hookform/resolvers": "^3.3.4", "@react-aria/ssr": "^3.8.0", "@react-aria/visually-hidden": "^3.8.6", + "@tawk.to/tawk-messenger-react": "^2.0.2", "@types/js-cookie": "^3.0.6", "@types/node": "20.5.7", "@types/react": "19.1.2", diff --git a/types/tawk.d.ts b/types/tawk.d.ts new file mode 100644 index 0000000..77afe28 --- /dev/null +++ b/types/tawk.d.ts @@ -0,0 +1 @@ +declare module "@tawk.to/tawk-messenger-react";