From 8d87401185ee17f84d3815cc65b6809a7cb9c8f1 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Thu, 14 Apr 2022 12:38:06 -0400 Subject: [PATCH] add: kebab and bottom sheet for omnichannel --- app/i18n/locales/en.json | 2 + app/utils/log/events.ts | 1 + app/views/RoomView/RightButtons.tsx | 119 ++++++++++++++++++++++++++-- app/views/RoomView/index.tsx | 8 +- 4 files changed, 121 insertions(+), 9 deletions(-) diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 2f416a609..c9cfb223b 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -243,6 +243,7 @@ "Forgot_password": "Forgot your password?", "Forgot_Password": "Forgot Password", "Forward": "Forward", + "Forward_chat": "Forward chat", "Forward_Chat": "Forward Chat", "Forward_to_department": "Forward to department", "Forward_to_user": "Forward to user", @@ -429,6 +430,7 @@ "resetting_password": "resetting password", "RESET": "RESET", "Return": "Return", + "Return_to_waiting_line": "Return to waiting line", "Review_app_title": "Are you enjoying this app?", "Review_app_desc": "Give us 5 stars on {{store}}", "Review_app_yes": "Sure!", diff --git a/app/utils/log/events.ts b/app/utils/log/events.ts index 82dd3079d..8daf63ab3 100644 --- a/app/utils/log/events.ts +++ b/app/utils/log/events.ts @@ -193,6 +193,7 @@ export default { ROOM_AUDIO_FINISH_F: 'room_audio_finish_f', ROOM_AUDIO_CANCEL: 'room_audio_cancel', ROOM_AUDIO_CANCEL_F: 'room_audio_cancel_f', + ROOM_SHOW_MORE_ACTIONS: 'room_show_more_actions', ROOM_SHOW_BOX_ACTIONS: 'room_show_box_actions', ROOM_BOX_ACTION_PHOTO: 'room_box_action_photo', ROOM_BOX_ACTION_PHOTO_F: 'room_box_action_photo_f', diff --git a/app/views/RoomView/RightButtons.tsx b/app/views/RoomView/RightButtons.tsx index 079e46682..55ea27ad0 100644 --- a/app/views/RoomView/RightButtons.tsx +++ b/app/views/RoomView/RightButtons.tsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { dequal } from 'dequal'; import { Observable, Subscription } from 'rxjs'; +import { Dispatch } from 'redux'; import { StackNavigationProp } from '@react-navigation/stack'; import * as HeaderButton from '../../containers/HeaderButton'; @@ -11,18 +12,27 @@ import { events, logEvent } from '../../utils/log'; import { isTeamRoom } from '../../utils/room'; import { IApplicationState, SubscriptionType, TMessageModel, TSubscriptionModel } from '../../definitions'; import { ChatsStackParamList } from '../../stacks/types'; +import { withActionSheet } from '../../containers/ActionSheet'; +import i18n from '../../i18n'; +import { showConfirmationAlert, showErrorAlert } from '../../utils/info'; +import { closeRoom } from '../../actions/room'; +import RocketChat from '../../lib/rocketchat'; interface IRightButtonsProps { userId?: string; threadsEnabled: boolean; - rid?: string; + rid: string; t: string; tmid?: string; teamId?: string; isMasterDetail: boolean; toggleFollowThread: Function; joined: boolean; + status?: string; + dispatch: Dispatch; encrypted?: boolean; + showActionSheet: Function; // TODO: Change to proper type + transferLivechatGuestPermission: boolean; navigation: StackNavigationProp; } @@ -31,6 +41,8 @@ interface IRigthButtonsState { tunread: string[]; tunreadUser: string[]; tunreadGroup: string[]; + canReturnQueue: boolean; + canForwardGuest: boolean; } class RightButtonsContainer extends Component { @@ -43,12 +55,14 @@ class RightButtonsContainer extends Component { + const { transferLivechatGuestPermission, rid } = this.props; + const permissions = await RocketChat.hasPermission([transferLivechatGuestPermission], rid); + return permissions[0]; + }; + + canReturnQueue = async () => { + try { + const { returnQueue } = await RocketChat.getRoutingConfig(); + return returnQueue; + } catch { + return false; + } + }; + + returnLivechat = () => { + const { rid } = this.props; + showConfirmationAlert({ + message: i18n.t('Would_you_like_to_return_the_inquiry'), + confirmationText: i18n.t('Yes'), + onPress: async () => { + try { + await RocketChat.returnLivechat(rid); + } catch (e: any) { + showErrorAlert(e.reason, i18n.t('Oops')); + } + } + }); + }; + + closeLivechat = () => { + const { dispatch, rid } = this.props; + + dispatch(closeRoom(rid)); + }; + + showMoreActions = () => { + logEvent(events.ROOM_SHOW_MORE_ACTIONS); + const { showActionSheet, rid, navigation } = this.props; + const { canReturnQueue, canForwardGuest } = this.state; + + const options = [ + canForwardGuest && { + title: i18n.t('Forward_Chat'), + icon: 'chat-forward', + onPress: () => navigation.navigate('ForwardLivechatView', { rid }) + }, + canReturnQueue && { + title: i18n.t('Return_to_waiting_line'), + icon: 'move-to-the-queue', + onPress: () => this.returnLivechat() + }, + { + title: i18n.t('Close'), + icon: 'chat-close', + onPress: () => this.closeLivechat(), + danger: true + } + ]; + + showActionSheet({ options }); + }; + goSearchView = () => { logEvent(events.ROOM_GO_SEARCH); const { rid, t, navigation, isMasterDetail, encrypted } = this.props; @@ -185,8 +280,17 @@ class RightButtonsContainer extends Component + + + ); + } return null; } if (tmid) { @@ -222,7 +326,8 @@ class RightButtonsContainer extends Component ({ userId: getUserSelector(state).id, threadsEnabled: state.settings.Threads_enabled as boolean, - isMasterDetail: state.app.isMasterDetail + isMasterDetail: state.app.isMasterDetail, + transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'] }); -export default connect(mapStateToProps)(RightButtonsContainer); +export default connect(mapStateToProps)(withActionSheet(RightButtonsContainer)); diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 994538e42..13182add2 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -115,7 +115,8 @@ const roomAttrsUpdate = [ 'visitor', 'joinCodeRequired', 'teamMain', - 'teamId' + 'teamId', + 'status' ] as const; interface IRoomViewProps extends IBaseScreen { @@ -142,7 +143,9 @@ type TRoomUpdate = typeof roomAttrsUpdate[number]; interface IRoomViewState { [key: string]: any; joined: boolean; - room: TSubscriptionModel | { rid: string; t: string; name?: string; fname?: string; prid?: string; joinCodeRequired?: boolean }; + room: + | TSubscriptionModel + | { rid: string; t: string; name?: string; fname?: string; prid?: string; joinCodeRequired?: boolean; status?: boolean }; roomUpdate: { [K in TRoomUpdate]?: any; // TODO: get type from TSubscriptionModel }; @@ -512,6 +515,7 @@ class RoomView extends React.Component { tmid={tmid} teamId={teamId} joined={joined} + status={room.status} t={this.t || t} encrypted={encrypted} navigation={navigation}