feat(livechat): cleanup waiting room and style fixes

virtualidentityag · Aug 8, 2024 · 0cb3f01 · 0cb3f01
1 parent cbc989b
commit 0cb3f01
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 29 deletions.
diff --git a/src/components/session/SessionStream.tsx b/src/components/session/SessionStream.tsx
@@ -11,7 +11,6 @@ import { useParams, useHistory } from 'react-router-dom';
 import { Loading } from '../app/Loading';
 import { SessionItemComponent } from './SessionItemComponent';
 import {
-	AnonymousConversationFinishedContext,
 	AUTHORITIES,
 	ConsultantListContext,
 	E2EEContext,
@@ -22,7 +21,6 @@ import {
 	UserDataContext,
 	ActiveSessionContext
 } from '../../globalState';
-import { STATUS_FINISHED } from '../../globalState/interfaces';
 import {
 	apiGetAgencyConsultantList,
 	apiGetSessionData,
@@ -75,9 +73,6 @@ export const SessionStream = ({
 	const { userData } = useContext(UserDataContext);
 	const { subscribe, unsubscribe } = useContext(RocketChatContext);
 	const { getSetting } = useContext(RocketChatGlobalSettingsContext);
-	const { anonymousConversationFinished } = useContext(
-		AnonymousConversationFinishedContext
-	);
 	const { rcGroupId } = useParams<{ rcGroupId: string }>();
 
 	const subscribed = useRef(false);
@@ -148,7 +143,7 @@ export const SessionStream = ({
 	 */
 	const handleRoomMessage = useCallback(
 		(args) => {
-			if (args.length === 0 || anonymousConversationFinished) return;
+			if (args.length === 0) return;
 
 			args
 				// Map collected from debounce callback
@@ -180,7 +175,6 @@ export const SessionStream = ({
 		},
 
 		[
-			anonymousConversationFinished,
 			checkMutedUserForThisSession,
 			isE2eeEnabled,
 			activeSession.isGroup,
@@ -268,11 +262,6 @@ export const SessionStream = ({
 		} else {
 			subscribed.current = true;
 
-			if (anonymousConversationFinished) {
-				setLoading(false);
-				return;
-			}
-
 			// check if any user needs to be added when opening session view
 			addNewUsersToEncryptedRoom().then();
 
@@ -372,7 +361,6 @@ export const SessionStream = ({
 	}, [
 		activeSession,
 		addNewUsersToEncryptedRoom,
-		anonymousConversationFinished,
 		fetchSessionMessages,
 		handleChatStopped,
 		handleLiveChatStopped,

diff --git a/src/components/videoConference/WaitingRoom.tsx b/src/components/videoConference/WaitingRoom.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactComponent as ErrorIllustration } from '../../resources/img/illustrations/not-found.svg';
 import { ReactComponent as WelcomeIllustration } from '../../resources/img/illustrations/welcome.svg';
 import { ReactComponent as WaitingIllustration } from '../../resources/img/illustrations/waiting.svg';
-import './../waitingRoom/waitingRoom.styles';
+import './waitingRoom.styles';
 import { useContext, useEffect } from 'react';
 import {
 	STATUS_CREATED,
@@ -11,7 +11,7 @@ import {
 } from '../../globalState/interfaces';
 import { useTranslation } from 'react-i18next';
 import { StageLayout } from '../stageLayout/StageLayout';
-import { WaitingRoomContent } from '../waitingRoom/WaitingRoomContent';
+import { WaitingRoomContent } from './WaitingRoomContent';
 import { Button, BUTTON_TYPES, ButtonItem } from '../button/Button';
 import { LegalLinksContext } from '../../globalState/provider/LegalLinksProvider';
 import { Text } from '../text/Text';

diff --git a/...onents/waitingRoom/WaitingRoomContent.tsx → ...ts/videoConference/WaitingRoomContent.tsx b/...onents/waitingRoom/WaitingRoomContent.tsx → ...ts/videoConference/WaitingRoomContent.tsx
diff --git a/src/components/videoConference/waitingRoom.styles.scss b/src/components/videoConference/waitingRoom.styles.scss
@@ -0,0 +1,155 @@
+.waitingRoom {
+	display: flex;
+	justify-content: center;
+	min-height: 100%;
+	overflow: hidden;
+
+	&__headline {
+		margin-bottom: 12px;
+	}
+
+	&__subline {
+		font-size: $font-size-h4;
+		font-weight: $font-weight-regular;
+		line-height: 28px;
+	}
+
+	&__button {
+		text-align: left;
+		margin-top: $grid-base-four;
+	}
+
+	&__illustration-wrapper {
+		height: 200px;
+		width: 200px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			fill: none;
+			height: 100%;
+		}
+
+		@include breakpoint($fromLarge) {
+			margin-left: $grid-base-five;
+		}
+	}
+
+	&__action {
+		border: $notice-border;
+		border-radius: 4px;
+		padding: $grid-base-two $grid-base-five;
+		margin-top: $grid-base-five;
+		display: flex;
+		flex-wrap: wrap-reverse;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+
+		@include breakpoint($fromLarge) {
+			flex-wrap: nowrap;
+			justify-content: space-between;
+		}
+
+		&-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			p {
+				text-align: center;
+
+				a {
+					text-decoration: underline;
+				}
+			}
+
+			@include breakpoint($fromLarge) {
+				display: block;
+
+				p {
+					text-align: left;
+				}
+			}
+		}
+	}
+
+	&__redirect {
+		&-title {
+			margin: $grid-base-five 0 14px;
+			color: $text-high-emphasis;
+		}
+
+		&-text {
+			color: $text-low-emphasis;
+
+			a {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&__waitingIllustration {
+		.steam {
+			opacity: 0;
+			animation-duration: 4s;
+			animation-iteration-count: infinite;
+
+			&--1 {
+				animation-name: fadeSteam;
+				transform: translateY(4px);
+			}
+
+			&--2 {
+				animation-name: fadeSteam;
+				transform: translateY(1px);
+				animation-delay: 0.6s;
+			}
+
+			&--3 {
+				animation-name: fadeSteam;
+				transform: translateY(0);
+				animation-delay: 1s;
+			}
+		}
+
+		.foot {
+			transform-origin: 20px 71px;
+			animation-name: moveFoot;
+			animation-duration: 5s;
+			animation-iteration-count: infinite;
+			animation-timing-function: ease-in-out;
+		}
+	}
+}
+
+@keyframes fadeSteam {
+	0% {
+		opacity: 0;
+	}
+
+	25% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+}
+
+@keyframes moveFoot {
+	0% {
+		transform: rotate(-10deg);
+	}
+
+	50% {
+		transform: rotate(20deg);
+	}
+
+	100% {
+		transform: rotate(-10deg);
+	}
+}
diff --git a/src/hooks/useSession.tsx b/src/hooks/useSession.tsx
@@ -1,13 +1,9 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
 	apiGetSessionRoomBySessionId,
 	apiGetSessionRoomsByGroupIds
 } from '../api/apiGetSessionRooms';
-import {
-	AnonymousConversationFinishedContext,
-	buildExtendedSession,
-	ExtendedSessionInterface
-} from '../globalState';
+import { buildExtendedSession, ExtendedSessionInterface } from '../globalState';
 import { apiSetSessionRead, FETCH_ERRORS } from '../api';
 import { apiGetChatRoomById } from '../api/apiGetChatRoomById';
 
@@ -23,9 +19,6 @@ export const useSession = (
 } => {
 	const [ready, setReady] = useState(false);
 	const [session, setSession] = useState<ExtendedSessionInterface>(null);
-	const { anonymousConversationFinished } = useContext(
-		AnonymousConversationFinishedContext
-	);
 	const repetitiveId = useRef(null);
 	const abortController = useRef<AbortController>(null);
 
@@ -48,10 +41,6 @@ export const useSession = (
 			return;
 		}
 
-		if (anonymousConversationFinished) {
-			return;
-		}
-
 		if (chatId) {
 			promise = apiGetChatRoomById(
 				chatId,
@@ -92,7 +81,7 @@ export const useSession = (
 				setSession(null);
 				setReady(true);
 			});
-	}, [rid, sessionId, chatId, anonymousConversationFinished]);
+	}, [rid, sessionId, chatId]);
 
 	const readSession = useCallback(() => {
 		if (!session) {