import React, { useEffect, useState } from 'react'; import { StyleSheet, Text } from 'react-native'; import PropTypes from 'prop-types'; import RocketChat from '../../lib/rocketchat'; import { withTheme } from '../../theme'; import sharedStyles from '../Styles'; import { themes } from '../../constants/colors'; import I18n from '../../i18n'; import CustomFields from './CustomFields'; import Item from './Item'; import Timezone from './Timezone'; const styles = StyleSheet.create({ title: { fontSize: 16, paddingHorizontal: 20, ...sharedStyles.textMedium } }); const Title = ({ title, theme }) => <Text style={[styles.title, { color: themes[theme].titleText }]}>{title}</Text>; Title.propTypes = { title: PropTypes.string, theme: PropTypes.string }; const Livechat = ({ room, roomUser, theme }) => { const [department, setDepartment] = useState({}); const getDepartment = async id => { if (id) { const result = await RocketChat.getDepartmentInfo(id); if (result.success) { setDepartment(result.department); } } }; const getRoom = () => { if (room.departmentId) { getDepartment(room.departmentId); } }; useEffect(() => { getRoom(); }, [room]); return ( <> <Title title={I18n.t('User')} theme={theme} /> <Timezone utcOffset={roomUser.utc} theme={theme} /> <Item label={I18n.t('Username')} content={roomUser.username} theme={theme} /> <Item label={I18n.t('Email')} content={roomUser.visitorEmails?.map(email => email.address).reduce((ret, item) => `${ret}${item}\n`)} theme={theme} /> <Item label={I18n.t('Phone')} content={roomUser.phone?.map(phone => phone.phoneNumber).reduce((ret, item) => `${ret}${item}\n`)} theme={theme} /> <Item label={I18n.t('IP')} content={roomUser.ip} theme={theme} /> <Item label={I18n.t('OS')} content={roomUser.os} theme={theme} /> <Item label={I18n.t('Browser')} content={roomUser.browser} theme={theme} /> <CustomFields customFields={roomUser.livechatData} theme={theme} /> <Title title={I18n.t('Conversation')} theme={theme} /> <Item label={I18n.t('Agent')} content={room.servedBy?.username} theme={theme} /> <Item label={I18n.t('Facebook')} content={room.facebook?.page.name} theme={theme} /> <Item label={I18n.t('SMS')} content={room.sms && 'SMS Enabled'} theme={theme} /> <Item label={I18n.t('Topic')} content={room.topic} theme={theme} /> <Item label={I18n.t('Tags')} content={room.tags?.join(', ')} theme={theme} /> <Item label={I18n.t('Department')} content={department.name} theme={theme} /> <CustomFields customFields={room.livechatData} theme={theme} /> </> ); }; Livechat.propTypes = { room: PropTypes.object, roomUser: PropTypes.object, theme: PropTypes.string }; export default withTheme(Livechat);