vn-verdnaturachat/app/views/RoomsListView/ListHeader/OmnichannelStatus.js

84 lines
2.2 KiB
JavaScript

import React, { memo, useState, useEffect } from 'react';
import {
View, Text, StyleSheet, Switch
} from 'react-native';
import PropTypes from 'prop-types';
import Touch from '../../../utils/touch';
import { CustomIcon } from '../../../lib/Icons';
import I18n from '../../../i18n';
import styles from '../styles';
import { themes, SWITCH_TRACK_COLOR } from '../../../constants/colors';
import { withTheme } from '../../../theme';
import UnreadBadge from '../../../presentation/UnreadBadge';
import RocketChat from '../../../lib/rocketchat';
const OmnichannelStatus = memo(({
searching, goQueue, theme, queueSize, inquiryEnabled, user
}) => {
if (searching > 0 || !(RocketChat.isOmnichannelModuleAvailable() && user?.roles?.includes('livechat-agent'))) {
return null;
}
const [status, setStatus] = useState(user?.statusLivechat === 'available');
useEffect(() => {
setStatus(user.statusLivechat === 'available');
}, [user.statusLivechat]);
const toggleLivechat = async() => {
try {
setStatus(v => !v);
await RocketChat.changeLivechatStatus();
} catch {
setStatus(v => !v);
}
};
return (
<Touch
onPress={goQueue}
theme={theme}
style={{ backgroundColor: themes[theme].headerSecondaryBackground }}
>
<View
style={[
styles.dropdownContainerHeader,
{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: themes[theme].separatorColor }
]}
>
<CustomIcon style={[styles.queueIcon, { color: themes[theme].auxiliaryText }]} size={22} name='omnichannel' />
<Text style={[styles.queueToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Omnichannel')}</Text>
{inquiryEnabled
? (
<UnreadBadge
style={styles.queueIcon}
unread={queueSize}
theme={theme}
/>
)
: null}
<Switch
style={styles.omnichannelToggle}
value={status}
trackColor={SWITCH_TRACK_COLOR}
onValueChange={toggleLivechat}
/>
</View>
</Touch>
);
});
OmnichannelStatus.propTypes = {
searching: PropTypes.bool,
goQueue: PropTypes.func,
queueSize: PropTypes.number,
inquiryEnabled: PropTypes.bool,
theme: PropTypes.string,
user: PropTypes.shape({
roles: PropTypes.array,
statusLivechat: PropTypes.string
})
};
export default withTheme(OmnichannelStatus);