@alfatech/livechat 2024.12.3-1.1

package/src/features/widget/contexts/page-tracker.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+enum storageKeys {
+	PAGE = "lc-page",
+	HISTORY = "lc-p-history",
+}
+
+type PageTrackerContext = {
+	page: string;
+	setPage: (page: string) => void;
+	history: string[];
+	clearHistory: () => void;
+};
+
+const pageTrackerContext = createContext<PageTrackerContext>(
+	{} as PageTrackerContext,
+);
+
+const getPageStr = () => `${window.location.pathname}_$$_${document.title}`;
+
+export const getPageFromLocalStorage = (): string => {
+	const page = localStorage.getItem(storageKeys.PAGE);
+	if (!page || page === "") {
+		return "/";
+	}
+	return getPageStr();
+};
+
+const getHistoryFromLocalStorage = (): string[] => {
+	const history = localStorage.getItem(storageKeys.HISTORY);
+	if (!history || history === "") {
+		return [];
+	}
+	try {
+		return JSON.parse(history);
+	} catch (e) {
+		return [];
+	}
+};
+
+export default function PageTrackerProvider({ children }: { children: any }) {
+	const [page, setPage] = useState<string>("/");
+	const [history, setHistory] = useState<string[]>(
+		getHistoryFromLocalStorage(),
+	);
+
+	function clearHistory() {
+		setHistory([]);
+		localStorage.removeItem(storageKeys.HISTORY);
+	}
+
+	const onNewPage = (page: string) => {
+		setPage(page);
+		setHistory((prev) => [...new Set([...prev, page])]);
+		localStorage.setItem(storageKeys.PAGE, page);
+		localStorage.setItem(storageKeys.HISTORY, JSON.stringify(history));
+	};
+
+	useEffect(() => {
+		onNewPage(getPageStr());
+	}, []);
+
+	return (
+		<pageTrackerContext.Provider
+			value={{ page, setPage: onNewPage, history, clearHistory }}
+		>
+			{children}
+		</pageTrackerContext.Provider>
+	);
+}
+
+export function usePageTracker() {
+	return useContext(pageTrackerContext);
+}

package/src/features/widget/hooks/page-tracker.tsx

@@ -0,0 +1,57 @@
+import { useWebsocket } from "@/ws/hooks";
+import {
+	getPageFromLocalStorage,
+	usePageTracker,
+} from "../contexts/page-tracker";
+import { useCallback, useEffect, useState } from "react";
+import { useListener } from "@/lib/hooks/dom";
+import { SendEvents } from "@/ws/events";
+
+export function usePageTracking() {
+	const pageTracker = usePageTracker();
+
+	const onPopState = useCallback(() => {
+		const newUrl = window.location.pathname;
+		if (newUrl !== pageTracker.page) {
+			pageTracker.setPage(newUrl);
+		}
+	}, [pageTracker.page]);
+
+	useListener("popstate", onPopState);
+	return null;
+}
+
+export function usePageTrackingWS() {
+	const [onced, setOnced] = useState(false);
+	const socket = useWebsocket();
+	const pageTracker = usePageTracker();
+
+	const onPopState = useCallback(() => {
+		const newUrl = window.location.pathname;
+		if (newUrl !== pageTracker.page) {
+			if (socket) {
+				socket.emit(SendEvents.PageChange, { page: newUrl });
+				return;
+			}
+			pageTracker.setPage(newUrl);
+		}
+	}, [socket, pageTracker.page]);
+
+	useListener("popstate", onPopState);
+
+	useEffect(() => {
+		if (onced || !socket) return;
+		const timeout = setTimeout(() => {
+			const old = getPageFromLocalStorage();
+			if (old !== pageTracker.page) {
+				socket.emit(SendEvents.PageChange, { page: pageTracker.page });
+				setOnced(true);
+			}
+		}, 1000);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [socket, pageTracker.page, onced]);
+
+	return null;
+}

package/src/features/widget/widget.api.ts

@@ -0,0 +1,14 @@
+import { req } from "@/api/base.api";
+import { useQuery } from "@tanstack/react-query";
+import type { WidgetPublicView } from "./widget.types";
+
+export const useWidgetView = (link_id: string) => {
+	return useQuery({
+		queryKey: ["widgets", link_id],
+		queryFn: () => getWidgetByLink(link_id),
+	});
+};
+
+const getWidgetByLink = (link_id: string) => {
+	return req<WidgetPublicView>(`widgets/with-link/${link_id}`);
+};

package/src/features/widget/widget.store.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+import type { WidgetPublicView } from "./widget.types";
+
+type WidgetStore = {
+	widget: WidgetPublicView | null;
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	setWidget: (widget: WidgetPublicView) => void;
+};
+
+export const useWidgetStore = create<WidgetStore>((set) => ({
+	widget: null,
+	open: false,
+	setOpen: (open: boolean) => set({ open }),
+	setWidget: (widget: WidgetPublicView) => set({ widget }),
+}));

package/src/features/widget/widget.types.ts

@@ -0,0 +1,28 @@
+import type { Lang, Timezone } from "@/types/i18n";
+
+export type WidgetPublicView = {
+	public_id: string;
+	link_id: string;
+	client_id: string;
+	name: string;
+	timezone: Timezone;
+	lang: Lang;
+	image_url: string;
+	ticket_proxy_email: string;
+	is_browser_notification_enabled: boolean;
+	is_hidden_on_offline: boolean;
+	is_upload_disabled: boolean;
+	writing_timeout?: number;
+};
+
+export function isWidgetPublicView(obj: any): obj is WidgetPublicView {
+	return (
+		!!obj &&
+		typeof obj.public_id === "string" &&
+		typeof obj.link_id === "string" &&
+		typeof obj.name === "string" &&
+		typeof obj.is_browser_notification_enabled === "boolean" &&
+		typeof obj.is_hidden_on_offline === "boolean" &&
+		typeof obj.is_upload_disabled === "boolean"
+	);
+}

package/src/index.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#livechat {
+	position: fixed;
+	bottom: 1rem;
+	right: 1rem;
+	z-index: 9999;
+	background-color: #f8f9fa;
+}
+
+:root {
+	--scroll-bar-bg: #1c2e45;
+	--scroll-bar-bg-hover: #1c2e45;
+	--scroll-bar-track: #f0f8ff;
+}
+
+::-webkit-scrollbar,
+.scrollbar::-webkit-scrollbar {
+	width: 3px;
+	height: 3px;
+}
+
+::-webkit-scrollbar-thumb,
+.scrollbar::-webkit-scrollbar-thumb {
+	background-color: var(--scroll-bar-bg);
+	border-radius: 5px;
+	transition: background-color 0.2s ease-in-out;
+}
+
+::-webkit-scrollbar-thumb:hover,
+.scrollbar::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scroll-bar-bg-hover);
+}
+
+::-webkit-scrollbar-track,
+.scrollbar::-webkit-scrollbar-track {
+	background-color: var(--scroll-bar-track);
+}

package/src/layouts/auth.tsx

@@ -0,0 +1,17 @@
+import { useWidgetStore } from "@/features/widget/widget.store";
+import type { PropsWithChildren } from "react";
+
+type Props = {};
+
+export default function WidgetAuthLayout({
+	children,
+}: PropsWithChildren<Props>) {
+	const { widget } = useWidgetStore();
+	if (!widget) return null;
+	return (
+		<section className="border h-full w-full rounded-md p-4 relative">
+			<div className="-z-10 h-52 bg-zink-600 absolute top-0 left-0 w-full rounded-t-md flex flex-col gap-4 items-center justify-center"></div>
+			{children}
+		</section>
+	);
+}

package/src/layouts/chat.tsx

@@ -0,0 +1,18 @@
+import { useWidgetStore } from "@/features/widget/widget.store";
+import type { PropsWithChildren } from "react";
+
+type Props = {
+	className?: string;
+};
+
+export default function WidgetChatLayout({
+	children,
+}: PropsWithChildren<Props>) {
+	const { widget } = useWidgetStore();
+	if (!widget) return null;
+	return (
+		<section className="border h-full w-full rounded-md relative">
+			{children}
+		</section>
+	);
+}

package/src/lib/cdn.tsx

@@ -0,0 +1,3 @@
+export const makeUserAvatar = (userId: string) => {
+	return `https://s3.alfatek.dev/avatars/${userId}.png`;
+};

package/src/lib/cookie.tsx

@@ -0,0 +1,7 @@
+export const getCookieVal = (key: string): string | null => {
+	const cookie = document.cookie
+		.split(";")
+		.find((cookie) => cookie.includes(key));
+	if (!cookie) return null;
+	return cookie.split("=")[1];
+};

package/src/lib/debounce.tsx

@@ -0,0 +1,23 @@
+type Timer = ReturnType<typeof setTimeout>;
+
+function debounce<T extends (...args: any[]) => any>(
+	func: T,
+	delay: number,
+): (...args: Parameters<T>) => void {
+	let timer: Timer | undefined;
+	let count = 0;
+
+	return function debouncedFn(...args: Parameters<T>) {
+		count++;
+		const currentCount = count;
+		clearTimeout(timer);
+
+		timer = setTimeout(() => {
+			if (currentCount === count) {
+				func(...args);
+			}
+		}, delay);
+	};
+}
+
+export default debounce;

package/src/lib/hooks/cookie.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+const getCookie = (key: string) => {
+	const cookie = document.cookie
+		.split(";")
+		.find((cookie) => cookie.trim().startsWith(`${key}=`));
+	return cookie ? cookie.split("=")[1] : "";
+};
+
+export const useCookieValue = (key: string) => {
+	const [cookie, setCookie] = useState(getCookie(key));
+
+	useEffect(() => {
+		setCookie(getCookie(key));
+	}, [key]);
+
+	return cookie;
+};
+
+export const setCookie = (key: string, value: string) => {
+	document.cookie = `${key}=${value}`;
+};

package/src/lib/hooks/dayjs.tsx

@@ -0,0 +1,10 @@
+import "dayjs/locale/tr";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import dayjs from "dayjs";
+
+export const useDayJS = (locale = "tr") => {
+	dayjs.extend(relativeTime);
+	dayjs.locale(locale);
+	return dayjs;
+};

package/src/lib/hooks/dom.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+
+export const useBodyClassName = (className: string) => {
+	useEffect(() => {
+		const body = document.body;
+		const classNames = className.split(" ");
+		body.classList.add(...classNames);
+		return () => {
+			body.classList.remove(...classNames);
+		};
+	}, []);
+};
+
+export const useListener = <T extends HTMLElement = HTMLElement>(
+	eventName: string,
+	handler: (event: Event) => void,
+	element?: T,
+) => {
+	const el = typeof window !== "undefined" ? element || window : undefined;
+	useEffect(() => {
+		el!.addEventListener(eventName, handler);
+		return () => {
+			el!.removeEventListener(eventName, handler, false);
+		};
+	}, [eventName, handler, el]);
+};

package/src/lib/hooks/form.tsx

@@ -0,0 +1,26 @@
+import { useFormik } from "formik";
+import type { FormikValues } from "formik/dist/types";
+
+type Props<T = any> = {
+	init: T;
+	schema?: any;
+	action: (values: T) => void | Promise<void>;
+};
+
+export const useForm = <T extends FormikValues = any>({
+	init,
+	schema,
+	action,
+}: Props<T>) => {
+	return useFormik<T>({
+		initialValues: init,
+		validationSchema: schema,
+		validateOnBlur: false,
+		enableReinitialize: true,
+		validateOnChange: false,
+		validateOnMount: false,
+		onSubmit: (values) => {
+			action(values);
+		},
+	});
+};

package/src/lib/hooks/router.tsx

@@ -0,0 +1,31 @@
+import { allRoutes } from "@/router/routes";
+import type { AuthRouteNames } from "@/router/routes/auth-routes";
+import type { ChatRouteNames } from "@/router/routes/chat-routes";
+import { type NavigateOptions, useNavigate } from "react-router-dom";
+
+export type RouteName = AuthRouteNames | ChatRouteNames;
+
+type Result = {
+	push: (name: RouteName, q?: string | object) => void;
+	path: (name: RouteName, q?: string | object) => string;
+};
+
+export const useRouter = (opts?: NavigateOptions): Result => {
+	const navi = useNavigate();
+
+	const path = (name: RouteName, q?: string | object) => {
+		const p = allRoutes.find((r) => r.name === name)?.path ?? "/";
+		if (typeof q === "object" && p.includes(":")) {
+			return Object.entries(q).reduce<string>((acc, [key, value]) => {
+				return acc.replace(`:${key}`, value as string);
+			}, p);
+		}
+		return q ? `${p}?${q}` : p;
+	};
+	return {
+		push: (name, q) => {
+			navi(path(name, q), opts);
+		},
+		path: path,
+	};
+};

package/src/lib/list.tsx

@@ -0,0 +1,14 @@
+export type ListResult<T> = {
+	page: number;
+	limit: number;
+	list: T[];
+};
+
+export function isListResult<T = any>(obj: any): obj is ListResult<T> {
+	return (
+		typeof obj === "object" &&
+		typeof obj.page === "number" &&
+		typeof obj.limit === "number" &&
+		Array.isArray(obj.list)
+	);
+}

package/src/lib/obj.tsx

@@ -0,0 +1,23 @@
+export function checkObjSame(obj1: any, obj2: any, keys?: string[]): boolean {
+	let _keys = keys;
+	if (!_keys) {
+		_keys = Object.keys(obj1);
+	}
+	for (let key of _keys) {
+		if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
+			if (obj1[key].length !== obj2[key].length) {
+				return false;
+			}
+			for (let i = 0; i < obj1[key].length; i++) {
+				if (obj1[key][i] !== obj2[key][i]) {
+					return false;
+				}
+			}
+			continue;
+		}
+		if (obj1[key] !== obj2[key]) {
+			return false;
+		}
+	}
+	return true;
+}

package/src/lib/phone.tsx

@@ -0,0 +1,12 @@
+export const initPhone = (phone: string) => {
+	if (phone.length === 10 && phone.startsWith("5")) {
+		return `+90${phone}`;
+	}
+	if (phone.length === 11 && phone.startsWith("0")) {
+		return `+9${phone}`;
+	}
+	if (phone.length === 12 && phone.startsWith("90")) {
+		return `+${phone}`;
+	}
+	return phone;
+};

package/src/main.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useWidgetView } from "./features/widget/widget.api.ts";
+import { isWidgetPublicView } from "./features/widget/widget.types.ts";
+import AppRouter from "./router/router.tsx";
+import { useWidgetStore } from "./features/widget/widget.store.ts";
+import PageTrackerProvider from "./features/widget/contexts/page-tracker.tsx";
+import { WebSocketProvider } from "./ws/hooks.tsx";
+
+type Props = {
+	link_id: string;
+};
+
+export default function App({ link_id }: Props) {
+	const { setWidget, widget } = useWidgetStore();
+	const { data, isLoading } = useWidgetView(link_id);
+
+	useEffect(() => {
+		if (Array.isArray(data) && isWidgetPublicView(data[0])) {
+			setWidget(data[0]);
+		}
+	}, [data]);
+
+	if (isLoading || !widget) return null;
+	return (
+		<PageTrackerProvider>
+			<WebSocketProvider>
+				<AppRouter />
+			</WebSocketProvider>
+		</PageTrackerProvider>
+	);
+}

package/src/pages/auth/registration-view.tsx

@@ -0,0 +1,67 @@
+import { isSuccess } from "@/api/base.api";
+import WidgetProvider from "@/components/app/WidgetProvider";
+import { chatCheck } from "@/features/chat/chat.api";
+import ChatCreateForm from "@/features/chat/partials/ChatCreateForm";
+import WidgetIcon from "@/features/widget/components/WidgetIcon";
+import { usePageTracking } from "@/features/widget/hooks/page-tracker";
+import { useWidgetStore } from "@/features/widget/widget.store";
+import WidgetAuthLayout from "@/layouts/auth";
+import { useCookieValue } from "@/lib/hooks/cookie";
+import { useRouter } from "@/lib/hooks/router";
+import { useEffect, useState } from "react";
+
+function Tracking() {
+	usePageTracking();
+	return null;
+}
+
+export default function RegistrationView() {
+	const { widget } = useWidgetStore();
+	const [loading, setLoading] = useState(true);
+	const savedEmail = useCookieValue("email");
+	const savedName = useCookieValue("name");
+	const router = useRouter();
+	if (!widget) return null;
+
+	useEffect(() => {
+		chatCheck(widget.client_id)
+			.then(([_, status]) => {
+				if (isSuccess(status)) {
+					router.push("chat");
+				}
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	}, []);
+
+	if (loading) return null;
+
+	return (
+		<>
+			<WidgetProvider>
+				<WidgetAuthLayout>
+					<div className="flex flex-col gap-3 items-center justify-center h-52">
+						<WidgetIcon
+							name={widget.name}
+							image_url={widget.image_url}
+							size="size-24"
+						/>
+						<div className="text-white text-lg font-bold ml-2">
+							{widget.name}
+						</div>
+					</div>
+					<ChatCreateForm
+						clientId={widget.client_id}
+						savedEmail={savedEmail}
+						savedName={savedName}
+						onOk={() => {
+							router.push("chat");
+						}}
+					/>
+				</WidgetAuthLayout>
+			</WidgetProvider>
+			<Tracking />
+		</>
+	);
+}