verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: extract `on-hold` Omnichannel to `RoomView`

This commit is contained in:
Gerzon Z 2022-04-26 17:23:32 -04:00
parent 1778f34198
commit 1645bc33b0
3 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/stacks/types.ts
View File

@ -46,6 +46,7 @@ export type ChatsStackParamList = {
canForwardGuest: boolean; canForwardGuest: boolean;
canReturnQueue: boolean; canReturnQueue: boolean;
canViewCannedResponse: boolean; canViewCannedResponse: boolean;
canPlaceLivechatOnHold: boolean;
}; };
}; };
SelectListView: { SelectListView: {

32
app/views/RoomActionsView/index.tsx
View File

@ -79,8 +79,6 @@ interface IRoomActionsViewState {
canCreateTeam: boolean; canCreateTeam: boolean;
canAddChannelToTeam: boolean; canAddChannelToTeam: boolean;
canConvertTeam: boolean; canConvertTeam: boolean;
canPlaceLivechatOnHold: boolean;
isOnHold: boolean;
} }
class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomActionsViewState> { class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomActionsViewState> {
@ -92,6 +90,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
canForwardGuest: boolean; canForwardGuest: boolean;
canReturnQueue: boolean; canReturnQueue: boolean;
canViewCannedResponse: boolean; canViewCannedResponse: boolean;
canPlaceLivechatOnHold: boolean;
}; };
private roomObservable?: Observable<TSubscriptionModel>; private roomObservable?: Observable<TSubscriptionModel>;
private subscription?: Subscription; private subscription?: Subscription;
@ -131,15 +130,13 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
canToggleEncryption: false, canToggleEncryption: false,
canCreateTeam: false, canCreateTeam: false,
canAddChannelToTeam: false, canAddChannelToTeam: false,
canConvertTeam: false, canConvertTeam: false
canPlaceLivechatOnHold: false,
isOnHold: false
}; };
if (room && room.observe && room.rid) { if (room && room.observe && room.rid) {
this.roomObservable = room.observe(); this.roomObservable = room.observe();
this.subscription = this.roomObservable.subscribe(changes => { this.subscription = this.roomObservable.subscribe(changes => {
if (this.mounted) { if (this.mounted) {
this.setState({ room: changes, isOnHold: !!changes?.onHold }); this.setState({ room: changes });
} else { } else {
// @ts-ignore // @ts-ignore
this.state.room = changes; this.state.room = changes;
@ -207,25 +204,6 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
canAddChannelToTeam, canAddChannelToTeam,
canConvertTeam canConvertTeam
}); });
// livechat permissions
if (room.t === 'l') {
const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
this.setState({ canPlaceLivechatOnHold });
}
}
}
componentDidUpdate(prevProps: IRoomActionsViewProps, prevState: IRoomActionsViewState) {
const { livechatAllowManualOnHold } = this.props;
const { room, isOnHold } = this.state;
if (
room.t === 'l' &&
(isOnHold !== prevState.isOnHold || prevProps.livechatAllowManualOnHold !== livechatAllowManualOnHold)
) {
const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
this.setState({ canPlaceLivechatOnHold });
} }
} }
@ -1010,7 +988,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
}; };
renderOmnichannelSection = () => { renderOmnichannelSection = () => {
const { room, canPlaceLivechatOnHold } = this.state; const { room } = this.state;
const { rid, t } = room; const { rid, t } = room;
const { theme } = this.props; const { theme } = this.props;
@ -1037,7 +1015,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
</> </>
) : null} ) : null}
{['l'].includes(t) && !this.isOmnichannelPreview && canPlaceLivechatOnHold ? ( {this.omnichannelPermissions.canPlaceLivechatOnHold ? (
<> <>
<List.Item <List.Item
title='Place_chat_on_hold' title='Place_chat_on_hold'

57
app/views/RoomView/index.tsx
View File

@ -68,6 +68,7 @@ import {
IApplicationState, IApplicationState,
IAttachment, IAttachment,
IBaseScreen, IBaseScreen,
ILastMessage,
ILoggedUser, ILoggedUser,
IMessage, IMessage,
IOmnichannelSource, IOmnichannelSource,
@ -143,6 +144,7 @@ interface IRoomViewProps extends IBaseScreen<ChatsStackParamList, 'RoomView'> {
insets: EdgeInsets; insets: EdgeInsets;
transferLivechatGuestPermission?: string[]; // TODO: Check if its the correct type transferLivechatGuestPermission?: string[]; // TODO: Check if its the correct type
viewCannedResponsesPermission?: string[]; // TODO: Check if its the correct type viewCannedResponsesPermission?: string[]; // TODO: Check if its the correct type
livechatAllowManualOnHold?: boolean;
} }
type TRoomUpdate = typeof roomAttrsUpdate[number]; type TRoomUpdate = typeof roomAttrsUpdate[number];
@ -152,7 +154,17 @@ interface IRoomViewState {
joined: boolean; joined: boolean;
room: room:
| TSubscriptionModel | TSubscriptionModel
| { rid: string; t: string; name?: string; fname?: string; prid?: string; joinCodeRequired?: boolean; status?: boolean }; | {
rid: string;
t: string;
name?: string;
fname?: string;
prid?: string;
joinCodeRequired?: boolean;
status?: boolean;
lastMessage?: ILastMessage;
onHold?: boolean;
};
roomUpdate: { roomUpdate: {
[K in TRoomUpdate]?: any; // TODO: get type from TSubscriptionModel [K in TRoomUpdate]?: any; // TODO: get type from TSubscriptionModel
}; };
@ -242,7 +254,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
roomUserId, roomUserId,
canViewCannedResponses: false, canViewCannedResponses: false,
canForwardGuest: false, canForwardGuest: false,
canReturnQueue: false canReturnQueue: false,
canPlaceLivechatOnHold: false,
isOnHold: false
}; };
this.setHeader(); this.setHeader();
@ -292,9 +306,10 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
} }
if (this.t === 'l') { if (this.t === 'l') {
const canForwardGuest = this.canForwardGuest(); const canForwardGuest = this.canForwardGuest();
const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
const canReturnQueue = this.canReturnQueue(); const canReturnQueue = this.canReturnQueue();
const canViewCannedResponse = this.canViewCannedResponse(); const canViewCannedResponse = this.canViewCannedResponse();
this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse }); this.setState({ canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold });
} }
}); });
if (isTablet) { if (isTablet) {
@ -331,8 +346,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
} }
componentDidUpdate(prevProps: IRoomViewProps, prevState: IRoomViewState) { componentDidUpdate(prevProps: IRoomViewProps, prevState: IRoomViewState) {
const { roomUpdate, joined } = this.state; const { roomUpdate, joined, isOnHold } = this.state;
const { appState, insets, route } = this.props; const { appState, insets, route, livechatAllowManualOnHold } = this.props;
if (route?.params?.jumpToMessageId && route?.params?.jumpToMessageId !== prevProps.route?.params?.jumpToMessageId) { if (route?.params?.jumpToMessageId && route?.params?.jumpToMessageId !== prevProps.route?.params?.jumpToMessageId) {
this.jumpToMessage(route?.params?.jumpToMessageId); this.jumpToMessage(route?.params?.jumpToMessageId);
@ -364,6 +379,11 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
) { ) {
this.setHeader(); this.setHeader();
} }
if (isOnHold !== prevState.isOnHold || prevProps.livechatAllowManualOnHold !== livechatAllowManualOnHold) {
const canPlaceLivechatOnHold = this.canPlaceLivechatOnHold();
this.setState({ canPlaceLivechatOnHold });
}
} }
if (roomUpdate.teamMain !== prevState.roomUpdate.teamMain || roomUpdate.teamId !== prevState.roomUpdate.teamId) { if (roomUpdate.teamMain !== prevState.roomUpdate.teamMain || roomUpdate.teamId !== prevState.roomUpdate.teamId) {
this.setHeader(); this.setHeader();
@ -441,13 +461,20 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
canForwardGuest = async () => { canForwardGuest = async () => {
const { transferLivechatGuestPermission } = this.props; const { transferLivechatGuestPermission } = this.props;
const permissions = await RocketChat.hasPermission([transferLivechatGuestPermission], this.rid); const permissions = await RocketChat.hasPermission([transferLivechatGuestPermission], this.rid);
return permissions[0]; return permissions[0] as boolean;
};
canPlaceLivechatOnHold = () => {
const { livechatAllowManualOnHold } = this.props;
const { room } = this.state;
return !!(livechatAllowManualOnHold && !room?.lastMessage?.token && room?.lastMessage?.u && !room.onHold);
}; };
canViewCannedResponse = async () => { canViewCannedResponse = async () => {
const { viewCannedResponsesPermission } = this.props; const { viewCannedResponsesPermission } = this.props;
const permissions = await RocketChat.hasPermission([viewCannedResponsesPermission], this.rid); const permissions = await RocketChat.hasPermission([viewCannedResponsesPermission], this.rid);
return permissions[0]; return permissions[0] as boolean;
}; };
canReturnQueue = async () => { canReturnQueue = async () => {
@ -465,7 +492,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
} }
setHeader = () => { setHeader = () => {
const { room, unreadsCount, roomUserId, joined, canForwardGuest, canReturnQueue } = this.state; const { room, unreadsCount, roomUserId, joined, canForwardGuest, canReturnQueue, canPlaceLivechatOnHold } = this.state;
const { navigation, isMasterDetail, theme, baseUrl, user, insets, route } = this.props; const { navigation, isMasterDetail, theme, baseUrl, user, insets, route } = this.props;
const { rid, tmid } = this; const { rid, tmid } = this;
if (!room.rid) { if (!room.rid) {
@ -519,7 +546,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
numIconsRight = 3; numIconsRight = 3;
} }
const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight }); const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight });
const omnichannelPermissions = { canForwardGuest, canReturnQueue }; const omnichannelPermissions = { canForwardGuest, canReturnQueue, canPlaceLivechatOnHold };
navigation.setOptions({ navigation.setOptions({
headerShown: true, headerShown: true,
headerTitleAlign: 'left', headerTitleAlign: 'left',
@ -579,10 +606,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
goRoomActionsView = (screen?: string) => { goRoomActionsView = (screen?: string) => {
logEvent(events.ROOM_GO_RA); logEvent(events.ROOM_GO_RA);
const { room, member, joined, canForwardGuest, canReturnQueue, canViewCannedResponse } = this.state; const { room, member, joined, canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold } = this.state;
const { navigation, isMasterDetail } = this.props; const { navigation, isMasterDetail } = this.props;
if (isMasterDetail) { if (isMasterDetail) {
// @ts-ignore TODO: find a way to make it work
navigation.navigate('ModalStackNavigator', { navigation.navigate('ModalStackNavigator', {
// @ts-ignore // @ts-ignore
screen: screen ?? 'RoomActionsView', screen: screen ?? 'RoomActionsView',
@ -594,7 +620,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
member, member,
showCloseModal: !!screen, showCloseModal: !!screen,
joined, joined,
omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse } omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold }
} }
}); });
} else if (this.rid && this.t) { } else if (this.rid && this.t) {
@ -604,7 +630,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
room: room as TSubscriptionModel, room: room as TSubscriptionModel,
member, member,
joined, joined,
omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse } omnichannelPermissions: { canForwardGuest, canReturnQueue, canViewCannedResponse, canPlaceLivechatOnHold }
}); });
} }
}; };
@ -720,7 +746,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
return ret; return ret;
}, {}); }, {});
if (this.mounted) { if (this.mounted) {
this.internalSetState({ room: changes, roomUpdate }); this.internalSetState({ room: changes, roomUpdate, isOnHold: !!changes?.onHold });
} else { } else {
// @ts-ignore // @ts-ignore
this.state.room = changes; this.state.room = changes;
@ -1494,7 +1520,8 @@ const mapStateToProps = (state: IApplicationState) => ({
Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled as boolean, Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled as boolean,
Hide_System_Messages: state.settings.Hide_System_Messages as string[], Hide_System_Messages: state.settings.Hide_System_Messages as string[],
transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'], transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'],
viewCannedResponsesPermission: state.permissions['view-canned-responses'] viewCannedResponsesPermission: state.permissions['view-canned-responses'],
livechatAllowManualOnHold: state.settings.Livechat_allow_manual_on_hold as boolean
}); });
export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomView)))); export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomView))));