452 lines
13 KiB
TypeScript
452 lines
13 KiB
TypeScript
import React, {
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { isEmpty } from 'radash';
|
|
import { useQuery } from '@apollo/client';
|
|
import {
|
|
JoinErrorCodeTable,
|
|
MeetingEndedTable,
|
|
openLearningDashboardUrl,
|
|
setLearningDashboardCookie,
|
|
} from './service';
|
|
import { MeetingEndDataResponse, getMeetingEndData } from './queries';
|
|
import useAuthData from '/imports/ui/core/local-states/useAuthData';
|
|
import Icon from '/imports/ui/components/common/icon/icon-ts/component';
|
|
import Styled from './styles';
|
|
import Rating from '../rating/component';
|
|
import { LoadingContext } from '../../common/loading-screen/loading-screen-HOC/component';
|
|
import logger from '/imports/startup/client/logger';
|
|
|
|
const intlMessage = defineMessages({
|
|
410: {
|
|
id: 'app.meeting.ended',
|
|
description: 'message when meeting is ended',
|
|
},
|
|
403: {
|
|
id: 'app.error.removed',
|
|
description: 'Message to display when user is removed from the conference',
|
|
},
|
|
430: {
|
|
id: 'app.error.meeting.ended',
|
|
description: 'user logged conference',
|
|
},
|
|
'acl-not-allowed': {
|
|
id: 'app.error.removed',
|
|
description: 'Message to display when user is removed from the conference',
|
|
},
|
|
messageEnded: {
|
|
id: 'app.meeting.endedMessage',
|
|
description: 'message saying to go back to home screen',
|
|
},
|
|
messageEndedByUser: {
|
|
id: 'app.meeting.endedByUserMessage',
|
|
description: 'message informing who ended the meeting',
|
|
},
|
|
messageEndedByNoModeratorSingular: {
|
|
id: 'app.meeting.endedByNoModeratorMessageSingular',
|
|
description: 'message informing that the meeting was ended due to no moderator present (singular)',
|
|
},
|
|
messageEndedByNoModeratorPlural: {
|
|
id: 'app.meeting.endedByNoModeratorMessagePlural',
|
|
description: 'message informing that the meeting was ended due to no moderator present (plural)',
|
|
},
|
|
buttonOkay: {
|
|
id: 'app.meeting.endNotification.ok.label',
|
|
description: 'label okay for button',
|
|
},
|
|
title: {
|
|
id: 'app.feedback.title',
|
|
description: 'title for feedback screen',
|
|
},
|
|
subtitle: {
|
|
id: 'app.feedback.subtitle',
|
|
description: 'subtitle for feedback screen',
|
|
},
|
|
textarea: {
|
|
id: 'app.feedback.textarea',
|
|
description: 'placeholder for textarea',
|
|
},
|
|
confirmDesc: {
|
|
id: 'app.leaveConfirmation.confirmDesc',
|
|
description: 'adds context to confim option',
|
|
},
|
|
sendLabel: {
|
|
id: 'app.feedback.sendFeedback',
|
|
description: 'send feedback button label',
|
|
},
|
|
sendDesc: {
|
|
id: 'app.feedback.sendFeedbackDesc',
|
|
description: 'adds context to send feedback option',
|
|
},
|
|
[JoinErrorCodeTable.DUPLICATE_USER]: {
|
|
id: 'app.meeting.logout.duplicateUserEjectReason',
|
|
description: 'message for duplicate users',
|
|
},
|
|
[JoinErrorCodeTable.PERMISSION_FAILED]: {
|
|
id: 'app.meeting.logout.permissionEjectReason',
|
|
description: 'message for whom was kicked by doing something without permission',
|
|
},
|
|
[JoinErrorCodeTable.EJECT_USER]: {
|
|
id: 'app.meeting.logout.ejectedFromMeeting',
|
|
description: 'message when the user is removed by someone',
|
|
},
|
|
[JoinErrorCodeTable.SYSTEM_EJECT_USER]: {
|
|
id: 'app.meeting.logout.ejectedFromMeeting',
|
|
description: 'message when the user is removed by the system',
|
|
},
|
|
[JoinErrorCodeTable.MAX_PARTICIPANTS]: {
|
|
id: 'app.meeting.logout.maxParticipantsReached',
|
|
description: 'message when the user is rejected due to max participants limit',
|
|
},
|
|
[JoinErrorCodeTable.VALIDATE_TOKEN]: {
|
|
id: 'app.meeting.logout.validateTokenFailedEjectReason',
|
|
description: 'invalid auth token',
|
|
},
|
|
[JoinErrorCodeTable.USER_INACTIVITY]: {
|
|
id: 'app.meeting.logout.userInactivityEjectReason',
|
|
description: 'message to whom was kicked by inactivity',
|
|
},
|
|
[JoinErrorCodeTable.USER_LOGGED_OUT]: {
|
|
id: 'app.feedback.title',
|
|
description: 'message to whom was kicked by logging out',
|
|
},
|
|
[JoinErrorCodeTable.BANNED_USER_REJOINING]: {
|
|
id: 'app.error.userBanned',
|
|
description: 'message to whom was banned',
|
|
},
|
|
open_activity_report_btn: {
|
|
id: 'app.learning-dashboard.clickHereToOpen',
|
|
description: 'description of link to open activity report',
|
|
},
|
|
[MeetingEndedTable.ENDED_FROM_API]: {
|
|
id: 'app.meeting.endedFromAPI',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_WHEN_NOT_JOINED]: {
|
|
id: 'app.meeting.endedWhenNoUserJoined',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_WHEN_LAST_USER_LEFT]: {
|
|
id: 'app.meeting.endedWhenLastUserLeft',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_AFTER_USER_LOGGED_OUT]: {
|
|
id: 'app.meeting.endedWhenLastUserLeft',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_AFTER_EXCEEDING_DURATION]: {
|
|
id: 'app.meeting.endedAfterExceedingDuration',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.BREAKOUT_ENDED_EXCEEDING_DURATION]: {
|
|
id: 'app.meeting.breakoutEndedAfterExceedingDuration',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.BREAKOUT_ENDED_BY_MOD]: {
|
|
id: 'app.meeting.breakoutEndedByModerator',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_DUE_TO_NO_AUTHED_USER]: {
|
|
id: 'app.meeting.endedDueNoAuthed',
|
|
description: '',
|
|
},
|
|
[MeetingEndedTable.ENDED_DUE_TO_NO_MODERATOR]: {
|
|
id: 'app.meeting.endedDueNoModerators',
|
|
description: '',
|
|
},
|
|
});
|
|
|
|
interface MeetingEndedContainerProps {
|
|
endedBy: string;
|
|
meetingEndedCode: string;
|
|
joinErrorCode: string;
|
|
}
|
|
|
|
interface MeetingEndedProps extends MeetingEndedContainerProps {
|
|
allowDefaultLogoutUrl: boolean;
|
|
askForFeedbackOnLogout: boolean
|
|
learningDashboardAccessToken: string;
|
|
role: string;
|
|
learningDashboardBase: string;
|
|
isBreakout: boolean;
|
|
}
|
|
|
|
const MeetingEnded: React.FC<MeetingEndedProps> = ({
|
|
endedBy,
|
|
joinErrorCode,
|
|
meetingEndedCode,
|
|
allowDefaultLogoutUrl,
|
|
askForFeedbackOnLogout,
|
|
learningDashboardAccessToken,
|
|
role,
|
|
learningDashboardBase,
|
|
isBreakout,
|
|
}) => {
|
|
const loadingContextInfo = useContext(LoadingContext);
|
|
const intl = useIntl();
|
|
const [{
|
|
authToken,
|
|
meetingId,
|
|
logoutUrl,
|
|
userName,
|
|
userId,
|
|
}] = useAuthData();
|
|
const [selectedStars, setSelectedStars] = useState(0);
|
|
const [dispatched, setDispatched] = useState(false);
|
|
|
|
const generateEndMessage = useCallback((joinErrorCode: string, meetingEndedCode: string, endedBy: string) => {
|
|
if (!isEmpty(endedBy)) {
|
|
return intl.formatMessage(intlMessage.messageEndedByUser, { 0: endedBy });
|
|
}
|
|
// OR opetaror always returns the first truthy value
|
|
|
|
const code = meetingEndedCode || joinErrorCode || '410';
|
|
return intl.formatMessage(intlMessage[code]);
|
|
}, []);
|
|
|
|
const sendFeedback = useCallback(() => {
|
|
const textarea = document.getElementById('feedbackComment') as HTMLTextAreaElement;
|
|
const comment = (textarea?.value || '').trim();
|
|
|
|
const message = {
|
|
rating: selectedStars,
|
|
userId,
|
|
userName,
|
|
authToken,
|
|
meetingId,
|
|
comment,
|
|
userRole: role,
|
|
};
|
|
const url = './feedback';
|
|
const options = {
|
|
method: 'POST',
|
|
body: JSON.stringify(message),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
};
|
|
setDispatched(true);
|
|
|
|
fetch(url, options).then(() => {
|
|
if (role === 'VIEWER') {
|
|
const REDIRECT_WAIT_TIME = 5000;
|
|
setTimeout(() => {
|
|
window.location.href = logoutUrl;
|
|
}, REDIRECT_WAIT_TIME);
|
|
}
|
|
}).catch((e) => {
|
|
logger.warn({
|
|
logCode: 'user_feedback_not_sent_error',
|
|
extraInfo: {
|
|
errorName: e.name,
|
|
errorMessage: e.message,
|
|
},
|
|
}, `Unable to send feedback: ${e.message}`);
|
|
});
|
|
}, [selectedStars]);
|
|
|
|
const confirmRedirect = (isBreakout: boolean, allowRedirect: boolean) => {
|
|
if (isBreakout) window.close();
|
|
if (allowRedirect) {
|
|
window.location.href = logoutUrl;
|
|
}
|
|
};
|
|
|
|
const logoutButton = useMemo(() => {
|
|
const { locale } = intl;
|
|
return (
|
|
(
|
|
<Styled.Wrapper>
|
|
{
|
|
learningDashboardAccessToken && role === 'moderator'
|
|
// Always set cookie in case Dashboard is already opened
|
|
&& setLearningDashboardCookie(learningDashboardAccessToken, meetingId) === true
|
|
? (
|
|
<Styled.Text>
|
|
<Styled.MeetingEndedButton
|
|
color="default"
|
|
onClick={() => openLearningDashboardUrl(learningDashboardAccessToken,
|
|
meetingId,
|
|
authToken,
|
|
learningDashboardBase,
|
|
locale)}
|
|
aria-description={intl.formatMessage(intlMessage.open_activity_report_btn)}
|
|
>
|
|
<Icon
|
|
iconName="multi_whiteboard"
|
|
/>
|
|
</Styled.MeetingEndedButton>
|
|
</Styled.Text>
|
|
) : null
|
|
}
|
|
<Styled.Text>
|
|
{intl.formatMessage(intlMessage.messageEnded)}
|
|
</Styled.Text>
|
|
|
|
<Styled.MeetingEndedButton
|
|
color="primary"
|
|
onClick={() => confirmRedirect(isBreakout, allowDefaultLogoutUrl)}
|
|
aria-description={intl.formatMessage(intlMessage.confirmDesc)}
|
|
>
|
|
{intl.formatMessage(intlMessage.buttonOkay)}
|
|
</Styled.MeetingEndedButton>
|
|
</Styled.Wrapper>
|
|
)
|
|
);
|
|
}, [learningDashboardAccessToken, role, meetingId, authToken, learningDashboardBase]);
|
|
|
|
const feedbackScreen = useMemo(() => {
|
|
const shouldShowFeedback = askForFeedbackOnLogout && !dispatched;
|
|
const noRating = selectedStars === 0;
|
|
return (
|
|
<>
|
|
<Styled.Text>
|
|
{shouldShowFeedback
|
|
? intl.formatMessage(intlMessage.subtitle)
|
|
: intl.formatMessage(intlMessage.messageEnded)}
|
|
</Styled.Text>
|
|
|
|
{shouldShowFeedback ? (
|
|
<div data-test="rating">
|
|
<Rating
|
|
total="5"
|
|
onRate={setSelectedStars}
|
|
/>
|
|
{!noRating ? (
|
|
<Styled.TextArea
|
|
rows={5}
|
|
id="feedbackComment"
|
|
placeholder={intl.formatMessage(intlMessage.textarea)}
|
|
aria-describedby="textareaDesc"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
{noRating ? (
|
|
<Styled.MeetingEndedButton
|
|
color="primary"
|
|
onClick={() => setDispatched(true)}
|
|
aria-description={intl.formatMessage(intlMessage.confirmDesc)}
|
|
>
|
|
{intl.formatMessage(intlMessage.buttonOkay)}
|
|
</Styled.MeetingEndedButton>
|
|
) : null}
|
|
{!noRating ? (
|
|
<Styled.MeetingEndedButton
|
|
onClick={sendFeedback}
|
|
aria-description={intl.formatMessage(intlMessage.sendDesc)}
|
|
>
|
|
{intl.formatMessage(intlMessage.sendLabel)}
|
|
</Styled.MeetingEndedButton>
|
|
) : null}
|
|
</>
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadingContextInfo.setLoading(false, '');
|
|
}, []);
|
|
|
|
return (
|
|
<Styled.Parent>
|
|
<Styled.Modal data-test="meetingEndedModal">
|
|
<Styled.Content>
|
|
<Styled.Title>
|
|
{generateEndMessage(joinErrorCode, meetingEndedCode, endedBy)}
|
|
</Styled.Title>
|
|
{allowDefaultLogoutUrl && !askForFeedbackOnLogout ? logoutButton : null}
|
|
{askForFeedbackOnLogout ? feedbackScreen : null}
|
|
</Styled.Content>
|
|
</Styled.Modal>
|
|
</Styled.Parent>
|
|
);
|
|
};
|
|
|
|
const MeetingEndedContainer: React.FC<MeetingEndedContainerProps> = ({
|
|
endedBy,
|
|
meetingEndedCode,
|
|
joinErrorCode,
|
|
}) => {
|
|
const {
|
|
loading: meetingEndLoading,
|
|
error: meetingEndError,
|
|
data: meetingEndData,
|
|
} = useQuery<MeetingEndDataResponse>(getMeetingEndData);
|
|
|
|
if (meetingEndLoading || !meetingEndData) {
|
|
return (
|
|
<MeetingEnded
|
|
endedBy=""
|
|
joinErrorCode=""
|
|
meetingEndedCode=""
|
|
allowDefaultLogoutUrl={false}
|
|
askForFeedbackOnLogout={false}
|
|
learningDashboardAccessToken=""
|
|
// eslint-disable-next-line jsx-a11y/aria-role
|
|
role=""
|
|
learningDashboardBase=""
|
|
isBreakout={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (meetingEndError) {
|
|
logger.error('Error on fetching meeting end data: ', meetingEndError);
|
|
return (
|
|
<MeetingEnded
|
|
endedBy=""
|
|
joinErrorCode=""
|
|
meetingEndedCode=""
|
|
allowDefaultLogoutUrl={false}
|
|
askForFeedbackOnLogout={false}
|
|
learningDashboardAccessToken=""
|
|
// eslint-disable-next-line jsx-a11y/aria-role
|
|
role=""
|
|
learningDashboardBase=""
|
|
isBreakout={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const {
|
|
user_current,
|
|
} = meetingEndData;
|
|
const {
|
|
role,
|
|
meeting,
|
|
} = user_current[0];
|
|
|
|
const {
|
|
learningDashboard,
|
|
isBreakout,
|
|
clientSettings,
|
|
} = meeting;
|
|
|
|
const {
|
|
askForFeedbackOnLogout,
|
|
allowDefaultLogoutUrl,
|
|
learningDashboardBase,
|
|
} = clientSettings;
|
|
|
|
return (
|
|
<MeetingEnded
|
|
endedBy={endedBy}
|
|
joinErrorCode={joinErrorCode}
|
|
meetingEndedCode={meetingEndedCode}
|
|
allowDefaultLogoutUrl={allowDefaultLogoutUrl}
|
|
askForFeedbackOnLogout={askForFeedbackOnLogout}
|
|
learningDashboardAccessToken={learningDashboard?.learningDashboardAccessToken}
|
|
role={role}
|
|
learningDashboardBase={learningDashboardBase}
|
|
isBreakout={isBreakout}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default MeetingEndedContainer;
|