Merge branch 'develop' into fix/omni-removed-room-msg

packages/livechat/src/components/Alert/index.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useEffect } from 'preact/hooks';
+import type { JSXInternal } from 'preact/src/jsx';
+import { useTranslation } from 'react-i18next';
+
+import CloseIcon from '../../icons/close.svg';
+import { createClassName } from '../helpers';
+import styles from './styles.scss';
+
+type AlertProps = {
+	id?: string;
+	onDismiss?: (id?: string) => void;
+	success?: boolean;
+	warning?: boolean;
+	error?: boolean;
+	color?: string;
+	hideCloseButton?: boolean;
+	className?: string;
+	style?: JSXInternal.CSSProperties;
+	children?: JSXInternal.Element[];
+	timeout?: number;
+};
+
+const Alert = ({
+	id,
+	onDismiss,
+	success,
+	warning,
+	error,
+	color,
+	hideCloseButton = false,
+	className,
+	style = {},
+	children,
+	timeout = 3000,
+}: AlertProps) => {
+	const { t } = useTranslation();
+	const handleDismiss = useCallback(() => {
+		onDismiss?.(id);
+	}, [id, onDismiss]);
+
+	useEffect(() => {
+		let dismissTimeout: ReturnType<typeof setTimeout> | undefined;
+		if (Number.isFinite(timeout) && timeout > 0) {
+			dismissTimeout = setTimeout(handleDismiss, timeout);
+		}
+		return () => clearTimeout(dismissTimeout);
+	}, [handleDismiss, timeout]);
+
+	return (
+		<div
+			role='alert'
+			className={createClassName(styles, 'alert', { success, warning, error }, [className])}
+			style={{
+				...style,
+				...(color && { backgroundColor: color }),
+			}}
+		>
+			<div className={createClassName(styles, 'alert__content')}>{children}</div>
+			{!hideCloseButton && (
+				<button onClick={handleDismiss} className={createClassName(styles, 'alert__close')} aria-label={t('dismiss_this_alert')}>
+					<CloseIcon width={20} height={20} />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default Alert;

packages/livechat/src/definitions/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: Preact.FunctionComponent<Preact.SVGAttributes<SVGElement>>;
+	export default content;
+}

packages/livechat/src/i18next.js

@@ -26,5 +26,7 @@ export default i18next
 			fallbackLng: 'en',
 			react: {
 				useSuspense: false,
+				bindI18n: 'loaded languageChanged',
+				bindI18nStore: 'added',
 			}
 		});

packages/livechat/src/lib/connection.js

@@ -26,9 +26,9 @@ const Connection = {
 
 	async connect() {
 		try {
+			await import('../i18next');
 			this.clearListeners();
 			await loadConfig();
-			await import('../i18next');
 			// await Livechat.connection.connect();
 			this.addListeners();
 			this.clearAlerts();