implement and style QueueUpdates component

src/webchat-ui/components/WebchatUI.tsx

@@ -65,6 +65,7 @@ import { TeaserMessage } from "./presentational/TeaserMessage";
 import XAppOverlay from "./functional/xapp-overlay/XAppOverlay";
 import { getSourceBackgroundColor } from "../utils/sourceMapping";
 import type { Options } from "@cognigy/socket-client/lib/interfaces/options";
+import QueueUpdates from "./history/QueueUpdates";
 
 export interface WebchatUIProps {
 	currentSession: string;
@@ -1142,6 +1143,7 @@ export class WebchatUI extends React.PureComponent<
 						</h2>
 						{this.renderHistory()}
 					</HistoryWrapper>
+					<QueueUpdates />
 					{this.renderInput()}
 				</>
 			);

src/webchat-ui/components/history/QueueUpdates.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import styled from "@emotion/styled";
+import { Typography } from "@cognigy/chat-components";
+import { useSelector } from "../../../webchat/helper/useSelector";
+import { formatWaitTime } from "../../utils/formatWaitTime";
+
+const StyledQueueUpdates = styled.div(() => ({
+	marginBottom: "var(--webchat-message-margin-block, 24px)",
+	marginInline: "var(--webchat-message-margin-inline, 20px)",
+	padding: "12px",
+	textAlign: "center",
+	color: "var(--cc-black-40, #666)",
+	lineHeight: "140%",
+	"& span": {
+		display: "block",
+	},
+}));
+
+const QueueUpdates: FC = () => {
+	const queueUpdates = useSelector(state => state.queueUpdates ?? {});
+
+	if (!queueUpdates || !queueUpdates?.isQueueActive) return null;
+
+	return (
+		<StyledQueueUpdates>
+			<Typography
+				variant="body-regular"
+				id="webchatQueueUpdates"
+				className="webchat-queue-updates"
+				component="div"
+			>
+				{queueUpdates?.alternativeText ? (
+					<span>{queueUpdates.alternativeText}</span>
+				) : (
+					<>
+						<span>
+							Current queue position: <strong>{queueUpdates?.position || ""}</strong>
+						</span>
+						<span>
+							Estimated waiting time:{" "}
+							<strong>{formatWaitTime(queueUpdates?.estimatedWaitTime)}</strong>
+						</span>
+					</>
+				)}
+			</Typography>
+		</StyledQueueUpdates>
+	);
+};
+
+export default QueueUpdates;

src/webchat-ui/utils/formatWaitTime.ts

@@ -0,0 +1,24 @@
+// used on Queue Updates
+export const formatWaitTime = (ms: number | null) => {
+  if (!ms) return "";
+  const seconds = ms / 1000;
+
+  const getMinutes = (minutes: number) => {
+    return `${minutes} ${minutes > 1 ? "minutes" : "minute"}`;
+  };
+
+  if (seconds < 60) {
+    return `${seconds} seconds`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return getMinutes(minutes);
+  }
+
+  const hours = Math.floor(seconds / 3600);
+  const restMinutes = minutes - hours * 60;
+
+  return `${hours} ${hours > 1 ? "hours" : "hour"}${
+    restMinutes > 0 ? ` and ${getMinutes(restMinutes)}` : ""
+  }`;
+};

src/webchat/store/queue-updates/slice.ts

@@ -5,14 +5,14 @@ export interface IQueueUpdateState {
 	isQueueActive: boolean;
 	position: number | null;
 	estimatedWaitTime: number | null;
-	alternativeMessage: string | null;
+	alternativeText: string | null;
 }
 
 const initialState: IQueueUpdateState = {
 	isQueueActive: false,
 	position: null,
 	estimatedWaitTime: null,
-	alternativeMessage: null,
+	alternativeText: null,
 };
 
 const queueUpdates = createSlice({
@@ -23,7 +23,7 @@ const queueUpdates = createSlice({
 			state.isQueueActive = true;
 			state.position = action.payload?.position || null;
 			state.estimatedWaitTime = action.payload?.estimatedWaitTime || null;
-			state.alternativeMessage = action.payload?.alternativeMessage || null;
+			state.alternativeText = action.payload?.alternativeText || null;
 		},
 		resetQueueData: () => initialState,
 	},