141 lines
2.9 KiB
JavaScript
141 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Text, StyleSheet } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import RocketChat from '../../lib/rocketchat';
|
|
import { withTheme } from '../../theme';
|
|
import CustomFields from './CustomFields';
|
|
import Item from './Item';
|
|
import Timezone from './Timezone';
|
|
import sharedStyles from '../Styles';
|
|
import { themes } from '../../constants/colors';
|
|
import I18n from '../../i18n';
|
|
|
|
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);
|