+
+
+ Lựa chọn
+ +Thông tin khách hàng
+ +Trợ giúp setHelpClose(true)} title={'Đóng'} />
+ {txt}
);
+
+ let list_messages: string[] = [];
+
+ // in-chat notification: user typing
+ if (network_connection === 'offline') {
+ list_messages.push(NOTIFICATIONS['network_offline']);
+ }
+
+ // notify user offline
+ if (!user_info.online) {
+ list_messages.push(NOTIFICATIONS['user_offline']);
+ }
+
+ if(list_messages.length > 0) {
+ return (
+
+ {
+ list_messages.map((txt, index) => NotiMessage(txt, index))
+ }
+
+ )
+ }
+
+ // default nothing
+ return null;
+ }
+
+ handleChatboxScroll = debounce((event: any) => {
+
+ console.log('start handleChatboxScroll at ' + new Date().getSeconds());
+ //console.log(event);
+
+ if(!event.target) {
+ console.log('handleChatboxScroll: event.currentTarget');
+ return;
+ }
+
+ if(this.noMoreHistoryMessage) {
+ console.log('handleChatboxScroll: noMoreHistoryMessage');
+ return;
+ }
+
+ // user is scrolling up, so disable bottom scrolling for user to read old messages without interruption
+ if(this.trackLastScrollTop > event.target.scrollTop) {
+ this.disableScrollBottom = true;
+ }
+
+ // track again
+ this.trackLastScrollTop = event.target.scrollTop;
+
+ // load history on top
+ if (event.target.scrollTop === 0 && this.loadingHistoryStatus === 'idle') {
+ this.loadingHistoryStatus = 'loading';
+ this.disableScrollBottom = true;
+ console.log('handleChatboxScroll should get the history now ... ');
+ this.getChatHistory(true).then();
+ }
+ }, 300)
+
+
+ sendMessage = (typed_message: string) => {
+ //alert(typed_message);
+ const { user_info, dispatch, network_connection } = this.props; // , admin_info, user_info
+
+ //const {typed_message} = this.state;
+ if(typed_message === '') {
+ return;
+ }
+
+ // reset when user send new message
+ if(this.disableScrollBottom) {
+ this.disableScrollBottom = false;
+ }
+
+ // cannot send message when network_connection is offline
+ // and restore message to the input
+ if(network_connection === 'offline') {
+ console.log("network_connection =offline");
+ return;
+ }
+
+ // let composed_message = composeNewSendingMessage(txt);
+ // add locally
+ let composed_message = {
+ id: '',
+ from: 'me',
+ content: typed_message,
+ time: getCurrentUTCTimestamp(true),
+ // sequence: local_sequence,
+ deliveryStatus: 0,
+ } as ChatboxTextMessage;
+
+ dispatch(actions.addCurrentMessage({[user_info.id] : [composed_message]}));
+
+ // pass to networking layer to send to server
+ let send_to = (user_info.online) ? [user_info.id, user_info.node].join('-').trim() : '';
+ sendTextMessageToServer(send_to, typed_message);
+ }
+
+ showLoadingHistory = () => {
+ const {loadingHistory} = this.state;
+
+ if(loadingHistory) {
+ return (
+ Loading ...
+ )
+ }
+
+ // default
+ return null;
+ }
+
+
+ render() {
+
+ const { network_connection, user_info, chat_messages} = this.props;
+ const admin_info = getAdminInfo();
+
+ return (
+
+
+
+
+
+
+ { this.showLoadingHistory() }
+
+ {
+ chat_messages.map((message, index) =>
+
+ { this.showNotification() }
+
+
+
+ Không có quản trị online
+ }
+ Bạn chắc chắn chứ?} + onConfirm={removeChat} + //onCancel={() => {}} + okText="Yes" + cancelText="No" + > +
Bạn chắc chắn muốn bỏ chứ?} + onConfirm={removeChat} + //onCancel={() => {}} + okText="Yes" + cancelText="No" + > +
+
+
+ )
+ }
+
+ if (image !== '') {
+ if(_isImageUploadedToOurServer(image)) {
+ html = `
+ {from}{showUnixTime(time_in_second)}
+
+
+ )
+ }
+
+ html = `${image}`
+ return (
+
+ {from}{showUnixTime(time_in_second)}
+
+
+ )
+ }
+
+ if(validURL(content)) {
+ html = `${content}`
+ return (
+ (Ảnh chưa kiểm định. Cần thận trọng khi xem)
+
+ {from}{showUnixTime(time_in_second)}
+
+
+ )
+ }
+
+
+ // todo: remove this
+ let random_number = randomBetween(1, 100);
+ let message_from_me = random_number % 2 === 0;
+
+ return (
+
+ (Link chưa kiểm định. Cần thận trọng khi xem)
+
+
+
+ )
+}
+
+
+// format the display of each message on the chatbox
+function _isImageUploadedToOurServer(image: string) : boolean{
+ //check images uploaded to chat server
+ let img_regex_1 = /(\/user_upload\/([0-9]{4}-[0-9]{2}-[0-9]{1,2})\/([a-z0-9_]+)\.(jpg|jpeg|gif|png))$/g;
+ //let img_regex_2 = /(\/file\.php\?f=([0-9]{4}-[0-9]{2}-[0-9]{1,2})&(amp;)?n=([a-z0-9_]+)\.(jpg|jpeg|gif|png))$/g;
+ let img_regex_2 = /(\/file\.php\?f=([0-9]{4}-[0-9]{2}-[0-9]{1,2})&(amp;)?n=([a-z0-9_]+)\.(jpg|jpeg|gif|png)&(amp;)?o=([A-Za-z0-9_.-]+)\.(jpg|jpeg|gif|png))$/g;
+
+ return (img_regex_1.test(image) || img_regex_2.test(image))
+}
diff --git a/src/components/Chatbox/ver/Sample.tsx b/src/components/Chatbox/ver/Sample.tsx
new file mode 100644
index 0000000..acfd414
--- /dev/null
+++ b/src/components/Chatbox/ver/Sample.tsx
@@ -0,0 +1,219 @@
+import React, {useEffect, useState} from "react";
+import ToolbarButton from "@/components/ToolbarButton";
+import moment from "moment";
+
+import './Chatbox.css';
+
+const WINDOW_HEIGHT = global.window.innerHeight;
+const CHATBOX_HEIGHT = WINDOW_HEIGHT - 220;
+const MY_USER_ID = 'apple';
+
+const SAMPLE_MESSAGES = [
+ {
+ id: 1,
+ author: 'apple',
+ message: 'Hello world! This is a long message that will hopefully get wrapped by our message bubble component! We will see how well it works.',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 2,
+ author: 'orange',
+ message: 'It looks like it wraps exactly as it is supposed to. Lets see what a reply looks like!',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 3,
+ author: 'orange',
+ message: 'Hello world! This is a long message that will hopefully get wrapped by our message bubble component! We will see how well it works.',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 4,
+ author: 'apple',
+ message: 'It looks like it wraps exactly as it is supposed to. Lets see what a reply looks like!',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 5,
+ author: 'apple',
+ message: 'Hello world! This is a long message that will hopefully get wrapped by our message bubble component! We will see how well it works.',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 6,
+ author: 'apple',
+ message: 'It looks like it wraps exactly as it is supposed to. Lets see what a reply looks like!',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 7,
+ author: 'orange',
+ message: 'Hello world! This is a long message that will hopefully get wrapped by our message bubble component! We will see how well it works.',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 8,
+ author: 'orange',
+ message: 'It looks like it wraps exactly as it is supposed to. Lets see what a reply looks like!',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 9,
+ author: 'apple',
+ message: 'Hello world! This is a long message that will hopefully get wrapped by our message bubble component! We will see how well it works.',
+ timestamp: new Date().getTime()
+ },
+ {
+ id: 10,
+ author: 'orange',
+ message: 'It looks like it wraps exactly as it is supposed to. Lets see what a reply looks like!',
+ timestamp: new Date().getTime()
+ },
+];
+
+
+function Compose(props: any) {
+ return (
+
+ {from}: { showUnixTime(time_in_second) }
+
+
+
+
+ {
+ deliveryStatus === 5 && (
+ { content }
+
+ (Lỗi xảy ra, tin nhắn chưa được gửi)
)
+ }
+
+ deliveryStatus :{deliveryStatus} | sq:{props.sequence}
+
+
+
+ {
+ props.rightItems
+ }
+
+ )
+}
+
+
+function MessageList(props: {customer_id: string|number}) {
+ const [messages, setMessages] = useState
+ { renderMessages() }
+
+ )
+}
+
+function Message(props: any) {
+ const {
+ data,
+ isMine,
+ startsSequence,
+ endsSequence,
+ showTimestamp
+ } = props;
+
+ const friendlyTimestamp = moment(data.timestamp).format('LLLL');
+ return (
+
+ {
+ showTimestamp &&
+
+ );
+}
+
+
+export default function Chatbox({customer_id}: {customer_id: string|number}) {
+ return (
+ <>
+
+ { friendlyTimestamp }
+
+ }
+
+
+
+
+ { data.message }
+
+
+
+
+
+
+
+
+ );
+}
+
+export default CommentList;
diff --git a/src/components/ConversationList/ConversationList.css b/src/components/ConversationList/ConversationList.css
new file mode 100644
index 0000000..348be8a
--- /dev/null
+++ b/src/components/ConversationList/ConversationList.css
@@ -0,0 +1,63 @@
+.conversation-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.conversation-search {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+}
+
+.conversation-search-input {
+ background: #f4f4f8;
+ padding: 8px 10px;
+ border-radius: 10px;
+ border: none;
+ font-size: 14px;
+}
+
+.conversation-search-input::placeholder {
+ text-align: center;
+}
+
+.conversation-search-input:focus::placeholder {
+ text-align: left;
+}
+
+
+.conversation-list-item {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+}
+
+.conversation-list-item-selected {
+ background: #ffcc00;
+}
+
+.conversation-list-item:hover {
+ background: #ffcc00;
+ cursor: pointer;
+}
+
+.conversation-photo {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin-right: 10px;
+}
+
+.conversation-title {
+ font-size: 14px;
+ font-weight: bold;
+ text-transform: capitalize;
+ margin: 0;
+}
+
+.conversation-snippet {
+ font-size: 14px;
+ color: #CCCCCC;
+ margin: 0;
+}
\ No newline at end of file
diff --git a/src/components/ConversationList/index.tsx b/src/components/ConversationList/index.tsx
new file mode 100644
index 0000000..eaf922a
--- /dev/null
+++ b/src/components/ConversationList/index.tsx
@@ -0,0 +1,143 @@
+import React, {createRef, useState} from 'react';
+import debounce from "lodash/debounce";
+import {Image, Input} from "antd";
+import classNames from "classnames";
+import {useDispatch, useSelector} from 'react-redux';
+
+import {AppState} from "@/store/typing";
+import {UserInfo} from "@/typings/user";
+import {actions} from "@/store/actions";
+import {DEFAULT_AVATAR} from "@/config";
+import BadgeStatus from "@/components/BadgeStatus";
+
+import Toolbar from '../Toolbar';
+import ToolbarButton from '../ToolbarButton';
+import TYPING_ANIMATION_IMAGE from "@/assets/typing-animation.gif";
+
+import './ConversationList.css';
+import {isFound} from "@/lib/vietnamese";
+
+import {user_list} from "@/test/test_state";
+
+
+//Note: this component has been well-tested, do NOT change it!!
+const ConversationSearch = ({setKeyword} : {setKeyword: (keyword: string) => void}) => {
+ const search_wait_time = 300; // milli seconds
+ const inputRef = createRef();
+ const startSearch = () => {
+ //const time = new Date().getSeconds();
+ const keyword = (inputRef.current) ? inputRef.current.input.value : '';
+ //console.log('Keyword = ' + keyword + ' at ' + time);
+ setKeyword(keyword);
+ }
+
+ return (
+ Nhận xét ({item_list.length})
+ +
+
+
+ );
+}
+
+
+const ConversationListItem = (props: { user: UserInfo, unread: { total: number, messages: string[] } }) => {
+ /*useEffect(() => {
+ shave('.conversation-snippet', 20);
+ })*/
+
+ const chatting_with_user = useSelector((state: AppState) => state.chatting_with_user);
+ const dispatch = useDispatch();
+
+ const { user, unread } = props;
+ const avatar = user.avatar || DEFAULT_AVATAR;
+ const pickUserToChat = () => {
+ dispatch(actions.chatWithUser(user.id));
+ }
+
+ const containerClass = classNames({
+ 'conversation-list-item': true,
+ 'conversation-list-item-selected': chatting_with_user === user.id
+ })
+
+ return (
+ pickUserToChat()} title={unread.messages.join('\n')}>
+
+
+ 
+
+
+
+ );
+}
+
+
+const ConversationList = () => {
+
+ const [keyword, setKeyword] = useState
+
+ { user.name } ({user.location})
+{user.id}
+ {
+ user.typing &&
+
+
+ );
+}
+
+export default ConversationList;
diff --git a/src/components/CustomComponent/guide.txt b/src/components/CustomComponent/guide.txt
new file mode 100644
index 0000000..2b6f1f8
--- /dev/null
+++ b/src/components/CustomComponent/guide.txt
@@ -0,0 +1,67 @@
+27-April-2021
+
+- Summary: we can allow customers to create a custom-built component to replace a built-in component and run on our app.
+
+- Steps:
++ Step 1: develop component as a normal react component in an react app. Make sure it is bug-free. Example
+ const TestComponent = () => {
+ const [counter, setCounter] = useState
+
+ )
+ }
+
++ Step 2: use https://babeljs.io/repl to transpire into js. The above will produce:
+ var TestComponent = function Test() {
+ var _useState = React.useState(0),
+ counter = _useState[0],
+ setCounter = _useState[1];
+
+ var handleClick = function handleClick() {
+ alert('hello there');
+ };
+
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "Counter: ", counter, " ", /*#__PURE__*/React.createElement("span", {
+ onClick: function onClick() {
+ return setCounter(counter + 1);
+ }
+ }, "[+]")), /*#__PURE__*/React.createElement("div", null, "Click v\xE0o \u0111\xE2y \u0111\u1EC3 th\u1EED nh\xE9 ", /*#__PURE__*/React.createElement("span", {
+ style: {
+ color: 'green'
+ },
+ onClick: handleClick
+ }, "Click")));
+ };
+
++ Step 3: Insert the js code in database to produce in our app's html files. Example:
+
+
+
+
+
+
+
+
+
+
++ Step 4: In our app, use the code like CustomComponent/index.tsx
+The app will check if there is a custom component, it will run!
+
+- Trouble Shooting:
++ Error: React is not defined
+Cause: React is built in because of webpack and custom components only can access React from window.React. To make React exposed to Window, in our app we can expose it (for example in the app's entry file index.tst)
+
+//src/index.tsx:
+import React from 'react';
+...
+window.React = React; // export React for outside world
+...other
diff --git a/src/components/CustomComponent/index.tsx b/src/components/CustomComponent/index.tsx
new file mode 100644
index 0000000..e8284c9
--- /dev/null
+++ b/src/components/CustomComponent/index.tsx
@@ -0,0 +1,24 @@
+import React, {useState} from "react";
+
+
+const Test = () => {
+
+ const [external, setExternal] = useStateCounter: {counter} setCounter(counter + 1)}>[+]
+Click vào đây để thử nhé Click
+ No external
+ }
+ setExternal(true) }>Show TestExternalComponent
+
+ )
+}
+
+export default Test;
diff --git a/src/components/CustomerInfo/components/BrowseHistory.tsx b/src/components/CustomerInfo/components/BrowseHistory.tsx
new file mode 100644
index 0000000..b73945a
--- /dev/null
+++ b/src/components/CustomerInfo/components/BrowseHistory.tsx
@@ -0,0 +1,91 @@
+import {Table} from "antd";
+import React, {useEffect,useState} from "react";
+import {BrowseInfo} from "@/typings";
+import api from "@/lib/api";
+import Loading from "@/components/Loading";
+import {showUnixTime, subStr} from "@/lib/utils";
+
+
+const BrowseHistory = ({customer_id}: {customer_id: string|number}) => {
+
+ const [loading, setLoading] = useState