feat: chat box message after order creation

packages/p2p/src/components/order-details/order-details.jsx

@@ -21,6 +21,7 @@ import MyProfileSeparatorContainer from '../my-profile/my-profile-separator-cont
 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(() => {
@@ -65,6 +66,11 @@ 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);
@@ -196,6 +202,10 @@ 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 && (

packages/p2p/src/components/orders/chat/__tests__/chat-messages.spec.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatMessage, { admin_message } from 'Utils/chat-message';
+import ChatMessages from '../chat-messages';
+
+const mock_use_store_values = {
+    sendbird_store: {
+        active_chat_channel: {},
+        chat_info: {
+            user_id: 'test_user_id',
+        },
+        chat_messages: [
+            new ChatMessage({
+                created_at: 3,
+                channel_url: 'test',
+                file_type: '',
+                id: 1,
+                message: admin_message,
+                message_type: 'user',
+                name: 'test',
+                sender_user_id: 'test',
+                url: 'test',
+                status: 2,
+                custom_type: 'admin',
+            }),
+        ],
+        onMessagesScroll: jest.fn(),
+        setMessagesRef: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_use_store_values),
+}));
+
+describe('<ChatMessages />', () => {
+    it('should render the bot message with appropriate styles', () => {
+        render(<ChatMessages />);
+        const bot_message = screen.getByText(
+            /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('order-chat__messages-item--admin');
+    });
+});

packages/p2p/src/components/orders/chat/chat-footer.jsx

@@ -87,9 +87,6 @@ const ChatFooter = observer(() => {
 
     return (
         <React.Fragment>
-            <Text className='order-chat__footer-disclaimer' color='less-prominent' size='xxs'>
-                <Localize i18n_default_text='In case of a dispute, we will only consider the communication through Deriv P2P chat channel.' />
-            </Text>
             <div
                 className={classNames('order-chat__footer', {
                     'order-chat__footer--empty': sendbird_store.chat_messages.length === 0,

packages/p2p/src/components/orders/chat/chat-footer.scss

@@ -3,10 +3,6 @@
     border-top: 2px solid var(--general-section-1);
     max-height: 33.333%;
 
-    &-disclaimer {
-        margin: 0.8rem 2.4rem;
-    }
-
     &--empty {
         margin-top: auto;
     }

packages/p2p/src/components/orders/chat/chat-message-text.jsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { Text } from '@deriv/components';
 import PropTypes from 'prop-types';
+import ChatMessage from 'Utils/chat-message';
 
-const ChatMessageText = React.memo(({ children, color }) => (
+const ChatMessageText = React.memo(({ children, color, type = '' }) => (
     <div className={`order-chat__messages-item-message`}>
-        <Text as='div' color={color} line_height='m' size='xs'>
+        <Text
+            as='p'
+            color={color}
+            line_height={type === ChatMessage.TYPE_ADMIN ? 'xl' : 'm'}
+            size={type === ChatMessage.TYPE_ADMIN ? 'xxs' : 'xs'}
+        >
             {children}
         </Text>
     </div>
@@ -14,6 +20,7 @@ ChatMessageText.displayName = 'ChatMessageText';
 ChatMessageText.propTypes = {
     children: PropTypes.any,
     color: PropTypes.string,
+    type: PropTypes.string,
 };
 
 export default ChatMessageText;

packages/p2p/src/components/orders/chat/chat-messages.jsx

@@ -73,10 +73,13 @@ const ChatMessages = observer(() => {
                 onScroll={event => sendbird_store.onMessagesScroll(event)}
             >
                 {sendbird_store.chat_messages.map(chat_message => {
-                    const is_my_message = chat_message.sender_user_id === sendbird_store.chat_info.user_id;
+                    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((current_date = message_date));
+                    const should_render_date =
+                        current_date !== message_date && Boolean(!is_admin_message && (current_date = message_date));
 
                     return (
                         <React.Fragment key={chat_message.id}>
@@ -90,18 +93,25 @@ const ChatMessages = observer(() => {
                             <div
                                 className={classNames(
                                     'order-chat__messages-item',
-                                    `order-chat__messages-item--${is_my_message ? 'outgoing' : 'incoming'}`
+                                    `order-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}>{chat_message.message}</ChatMessageText>
+                                    <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_admin_message && (
+                                        <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}

packages/p2p/src/components/orders/chat/chat-messages.scss

@@ -80,5 +80,13 @@
                 border-bottom-right-radius: 0;
             }
         }
+
+        &--admin {
+            align-items: center;
+            background: var(--status-warning-transparent);
+            border: 1px solid var(--status-warning);
+            padding: 0.8rem 0;
+            border-radius: 0.8rem;
+        }
     }
 }

packages/p2p/src/stores/sendbird-store.ts

@@ -209,7 +209,7 @@ export default class SendbirdStore extends BaseStore {
         const is_inclusive_of_timestamp = false;
         const result_size = 50;
         const reverse_results = false;
-        const custom_type = [''];
+        const custom_type = ['', 'admin'];
 
         const messages_timestamp =
             timestamp ?? toMoment(this.root_store.general_store.server_time.get()).utc().valueOf();
@@ -435,7 +435,7 @@ export default class SendbirdStore extends BaseStore {
             });
     }
 
-    sendMessage(message: string) {
+    sendMessage(message: string, custom_type = '') {
         const modified_message = message.trim();
 
         if (modified_message.length === 0) {
@@ -453,6 +453,7 @@ export default class SendbirdStore extends BaseStore {
             message_type: MessageType.USER,
             sender_user_id: this.chat_info.user_id,
             status: ChatMessage.STATUS_PENDING,
+            custom_type,
         };
 
         this.addChannelMessage(new ChatMessage(placeholder_msg_options));
@@ -461,6 +462,7 @@ export default class SendbirdStore extends BaseStore {
             ?.sendUserMessage({
                 message: modified_message,
                 data: msg_identifier,
+                customType: custom_type,
             })
             .onSucceeded(channel_message => {
                 const msg_idx = this.chat_messages.findIndex(msg => msg.id === msg_identifier);

packages/p2p/src/utils/chat-message.ts

@@ -3,6 +3,7 @@ import { FileMessage, UserMessage } from '@sendbird/chat/message';
 type TChatMessageArgs = {
     created_at: number;
     channel_url: string;
+    custom_type?: string;
     id: string;
     file_type?: string;
     message?: string;
@@ -17,6 +18,7 @@ type TChatMessageArgs = {
 export default class ChatMessage {
     created_at: number;
     channel_url: string;
+    custom_type?: string;
     id: string;
     file_type?: string;
     message?: string;
@@ -30,6 +32,7 @@ export default class ChatMessage {
     constructor({
         created_at,
         channel_url,
+        custom_type,
         id,
         file_type,
         message,
@@ -42,6 +45,7 @@ export default class ChatMessage {
     }: TChatMessageArgs) {
         this.created_at = created_at;
         this.channel_url = channel_url;
+        this.custom_type = custom_type;
         this.file_type = file_type;
         this.id = id;
         this.message = message;
@@ -62,6 +66,7 @@ export default class ChatMessage {
     // static STATUS_DELIVERED_TO_SERVER = 2;
     // static STATUS_READ_BY_RECEIVER = 3;
 
+    static TYPE_ADMIN = 'admin';
     static TYPE_USER = 'user';
     static TYPE_FILE = 'file';
 }
@@ -70,6 +75,7 @@ export const convertFromChannelMessage = (channel_message: UserMessage | FileMes
     return new ChatMessage({
         created_at: channel_message.createdAt,
         channel_url: channel_message.channelUrl,
+        custom_type: channel_message.customType,
         file_type: channel_message.isFileMessage() ? channel_message.type : undefined,
         id: channel_message.messageId.toString(),
         message: channel_message.isUserMessage() ? channel_message.message : undefined,
@@ -80,3 +86,6 @@ export const convertFromChannelMessage = (channel_message: UserMessage | FileMes
         url: channel_message.isFileMessage() ? channel_message.url : undefined,
     });
 };
+
+export const admin_message =
+    "Hello! This is where you can chat with the counterparty to confirm the order details.\nNote: In case of a dispute, we'll use this chat as a reference.";