Skip to content

Commit

Permalink
Nada/p2 ps 1656/chat bot message fix (binary-com#10326)
Browse files Browse the repository at this point in the history 
* fix: chat bot message changed to static message, removed admin messages

* fix: updated react.fragment

* fix: changed shorthand to react.fragment

* fix: remove unwanted file changes
  • Loading branch information
@nada-deriv
nada-deriv committed Oct 25, 2023
1 parent b66ad9b commit 9ff6169
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 64 deletions.
10 changes: 0 additions & 10 deletions packages/p2p/src/components/order-details/order-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import MyProfileSeparatorContainer from 'Pages/my-profile/my-profile-separator-c
import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/format-value';
import { getDateAfterHours } from 'Utils/date-time';
import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
import ChatMessage, { admin_message } from 'Utils/chat-message';
import 'Components/order-details/order-details.scss';

const OrderDetails = observer(() => {
Expand Down Expand Up @@ -66,11 +65,6 @@ const OrderDetails = observer(() => {
} = order_store?.order_information;

const { chat_channel_url } = sendbird_store;
const should_send_admin_message =
buy_sell_store.is_create_order_subscribed &&
sendbird_store.chat_messages.length === 0 &&
sendbird_store.chat_channel_url &&
!sendbird_store.is_chat_loading;

const [should_expand_all, setShouldExpandAll] = React.useState(false);
const [remaining_review_time, setRemainingReviewTime] = React.useState(null);
Expand Down Expand Up @@ -202,10 +196,6 @@ const OrderDetails = observer(() => {
);
const rate_amount = removeTrailingZeros(formatMoney(local_currency, rate, true, 6));

if (should_send_admin_message) {
sendbird_store.sendMessage(admin_message, ChatMessage.TYPE_ADMIN);
}

return (
<OrderDetailsWrapper page_title={page_title}>
{should_show_lost_funds_banner && (
Expand Down
9 changes: 5 additions & 4 deletions packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import ChatMessage, { admin_message } from 'Utils/chat-message';
import ChatMessage from 'Utils/chat-message';
import ChatMessages from '../chat-messages';

const mock_use_store_values = {
Expand All @@ -15,13 +15,13 @@ const mock_use_store_values = {
channel_url: 'test',
file_type: '',
id: 1,
message: admin_message,
message: 'test',
message_type: 'user',
name: 'test',
sender_user_id: 'test',
url: 'test',
status: 2,
custom_type: 'admin',
custom_type: '',
}),
],
onMessagesScroll: jest.fn(),
Expand All @@ -41,6 +41,7 @@ describe('<ChatMessages />', () => {
/Hello! This is where you can chat with the counterparty to confirm the order details. Note: In case of a dispute, we'll use this chat as a reference./
);
expect(bot_message).toBeInTheDocument();
expect(screen.getByTestId('dt_chat_message')).toHaveClass('chat-messages-item--admin');
expect(bot_message).toHaveStyle('--text-lh: var(--text-lh-xl)');
expect(bot_message).toHaveStyle('--text-size: var(--text-size-xxs)');
});
});
106 changes: 57 additions & 49 deletions packages/p2p/src/pages/orders/chat/chat-messages.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,22 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Text, ThemedScrollbars, Icon } from '@deriv/components';
import { formatMilliseconds } from '@deriv/shared';
import { observer } from 'mobx-react-lite';
import { observer } from '@deriv/stores';
import { Localize } from 'Components/i18next';
import ChatMessageReceipt from 'Pages/orders/chat/chat-message-receipt.jsx';
import ChatMessageText from 'Pages/orders/chat/chat-message-text.jsx';
import { useStores } from 'Stores';
import ChatMessage from 'Utils/chat-message';
import ChatMessage, { admin_message } from 'Utils/chat-message';
import { convertToMB, isImageType, isPDFType } from 'Utils/file-uploader';
import './chat-messages.scss';

const AdminMessage = () => (
<div className='chat-messages-item chat-messages-item--admin'>
<ChatMessageText color='general' type='admin'>
<Localize i18n_default_text={admin_message} />
</ChatMessageText>
</div>
);
const ChatMessages = observer(() => {
const { sendbird_store } = useStores();
const scroll_ref = React.useRef(null);
Expand Down Expand Up @@ -73,63 +81,63 @@ const ChatMessages = observer(() => {
refSetter={scroll_ref}
onScroll={event => sendbird_store.onMessagesScroll(event)}
>
{sendbird_store.chat_messages.map(chat_message => {
const is_admin_message = chat_message.custom_type === ChatMessage.TYPE_ADMIN;
const is_my_message =
chat_message.sender_user_id === sendbird_store.chat_info.user_id && !is_admin_message;
const message_date = formatMilliseconds(chat_message.created_at, 'MMMM D, YYYY');
const message_color = is_my_message ? 'colored-background' : 'general';
const should_render_date =
current_date !== message_date && Boolean(!is_admin_message && (current_date = message_date));
<React.Fragment>
<AdminMessage />
{sendbird_store.chat_messages.map(chat_message => {
const is_my_message = chat_message.sender_user_id === sendbird_store.chat_info.user_id;
const message_date = formatMilliseconds(chat_message.created_at, 'MMMM D, YYYY');
const message_color = is_my_message ? 'colored-background' : 'general';
const should_render_date =
current_date !== message_date && Boolean((current_date = message_date));

return (
<React.Fragment key={chat_message.id}>
{should_render_date && (
<div className='chat-messages-date'>
<Text align='center' color='less-prominent' lh='m' size='xs' weight='bold'>
{message_date}
</Text>
</div>
)}
<div
className={classNames(
'chat-messages-item',
`chat-messages-item--${
is_admin_message ? 'admin' : is_my_message ? 'outgoing' : 'incoming'
}`
)}
data-testid='dt_chat_message'
>
{chat_message.message_type === ChatMessage.TYPE_USER && (
<ChatMessageText color={message_color} type={chat_message.custom_type}>
{chat_message.message}
</ChatMessageText>
return (
<React.Fragment key={chat_message.id}>
{should_render_date && (
<div className='chat-messages-date'>
<Text align='center' color='less-prominent' lh='m' size='xs' weight='bold'>
{message_date}
</Text>
</div>
)}
{chat_message.message_type === ChatMessage.TYPE_FILE &&
getMessageFormat(chat_message, message_color)}
<div className={`order-chat__messages-item-timestamp`}>
{!is_admin_message && (
<div
className={classNames(
'chat-messages-item',
`chat-messages-item--${is_my_message ? 'outgoing' : 'incoming'}`
)}
>
{chat_message.message_type === ChatMessage.TYPE_USER && (
<ChatMessageText color={message_color} type={chat_message.custom_type}>
{chat_message.message}
</ChatMessageText>
)}
{chat_message.message_type === ChatMessage.TYPE_FILE &&
getMessageFormat(chat_message, message_color)}
<div className={`order-chat__messages-item-timestamp`}>
<Text color='less-prominent' line_height='s' size='xxxs'>
{formatMilliseconds(chat_message.created_at, 'HH:mm', true)}
</Text>
)}
{is_my_message && (
<ChatMessageReceipt
message={chat_message}
chat_channel={sendbird_store.active_chat_channel}
sendbird_user_id={sendbird_store.chat_info.user_id}
/>
)}
{is_my_message && (
<ChatMessageReceipt
message={chat_message}
chat_channel={sendbird_store.active_chat_channel}
sendbird_user_id={sendbird_store.chat_info.user_id}
/>
)}
</div>
</div>
</div>
</React.Fragment>
);
})}
</React.Fragment>
);
})}
</React.Fragment>
</ThemedScrollbars>
);
}

return <div className='chat-messages' />;
return (
<div className='chat-messages'>
<AdminMessage />
</div>
);
});

ChatMessages.displayName = 'ChatMessages';
Expand Down
2 changes: 1 addition & 1 deletion packages/p2p/src/stores/sendbird-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export default class SendbirdStore extends BaseStore {

const is_inclusive_of_timestamp = false;
const reverse_results = this.chat_messages.length > 0;
const custom_type = ['', 'admin'];
const custom_type = [''];
const result_size = 50;

const messages_timestamp =
Expand Down

0 comments on commit 9ff6169

Please sign in to comment.