binary-com · DerivFE · Sep 18, 2023 · May 1, 2023 · May 1, 2023 · May 1, 2023
@@ -22,6 +22,7 @@ import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/fo
 import { getDateAfterHours } from 'Utils/date-time';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import 'Components/order-details/order-details.scss';
+import ChatMessage, { admin_message } from 'Utils/chat-message.js';
 
 const OrderDetails = observer(() => {
     const { buy_sell_store, general_store, my_profile_store, order_store, sendbird_store } = useStores();
@@ -194,6 +195,10 @@ const OrderDetails = observer(() => {
     );
     const rate_amount = removeTrailingZeros(formatMoney(local_currency, rate, true, 6));
 
+    if (buy_sell_store.is_create_order_subscribed && sendbird_store.chat_messages.length === 0) {
+        sendbird_store.sendMessage(admin_message, ChatMessage.TYPE_ADMIN);
+    }
+
     return (
         <OrderDetailsWrapper page_title={page_title}>
             {should_show_lost_funds_banner && (

@@ -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,

@@ -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;
     }

@@ -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, colour }) => (
+const ChatMessageText = React.memo(({ children, colour, type = '' }) => (
     <div className={`order-chat__messages-item-message`}>
-        <Text as='p' color={colour} line_height='m' size='xs'>
+        <Text
+            as='p'
+            color={colour}
+            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,
     colour: PropTypes.string,
+    type: PropTypes.string,
 };
 
 export default ChatMessageText;
@@ -44,10 +44,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_colour = 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}>
@@ -61,11 +64,15 @@ 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'
+                                    }`
                                 )}
                             >
                                 {chat_message.message_type === ChatMessage.TYPE_USER && (
-                                    <ChatMessageText colour={message_colour}>{chat_message.message}</ChatMessageText>
+                                    <ChatMessageText colour={message_colour} type={chat_message.custom_type}>
+                                        {chat_message.message}
+                                    </ChatMessageText>
                                 )}
                                 {chat_message.message_type === ChatMessage.TYPE_FILE &&
                                     (isImageType(chat_message.file_type) ? (
@@ -90,9 +97,11 @@ const ChatMessages = observer(() => {
                                         </ChatMessageText>
                                     ))}
                                 <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}

@@ -67,5 +67,13 @@
                 border-bottom-right-radius: $BORDER_RADIUS;
             }
         }
+
+        &--admin {
+            align-items: center;
+            background: var(--status-warning-transparent);
+            border: 1px solid var(--status-warning);
+            padding: 0.8rem 0;
+            border-radius: 0.8rem;
+        }
     }
 }
diff --git a/packages/p2p/src/stores/sendbird-store.js b/packages/p2p/src/stores/sendbird-store.js
@@ -408,7 +408,7 @@ export default class SendbirdStore extends BaseStore {
         );
     }
 
-    sendMessage(message) {
+    sendMessage(message, custom_type = '') {
         const modified_message = message.replace(/^[\r\n]+|[\r\n]+$/g, '');
 
         if (modified_message.length === 0 || modified_message.trim().length === 0) {
@@ -420,6 +420,7 @@ export default class SendbirdStore extends BaseStore {
 
         params.message = modified_message;
         params.data = msg_identifier;
+        params.customType = custom_type;
 
         // Add a placeholder message with a pending indicator
         const placeholder_msg_options = {
@@ -430,13 +431,13 @@ export default class SendbirdStore extends BaseStore {
             message_type: ChatMessage.TYPE_USER,
             sender_user_id: this.chat_info.user_id,
             status: ChatMessage.STATUS_PENDING,
+            custom_type,
         };
 
         this.addChannelMessage(new ChatMessage(placeholder_msg_options));
 
         this.active_chat_channel.sendUserMessage(params, (channel_message, error) => {
             const msg_idx = this.chat_messages.findIndex(msg => msg.messageId === msg_identifier);
-
             if (error) {
                 const errored_message = new ChatMessage({
                     ...placeholder_msg_options,

diff --git a/packages/p2p/src/utils/chat-message.js b/packages/p2p/src/utils/chat-message.js
@@ -1,7 +1,20 @@
 export default class ChatMessage {
-    constructor({ created_at, channel_url, id, file_type, message, message_type, name, sender_user_id, status, url }) {
-        this.created_at = created_at;
+    constructor({
+        channel_url,
+        created_at,
+        custom_type,
+        file_type,
+        id,
+        message,
+        message_type,
+        name,
+        sender_user_id,
+        status,
+        url,
+    }) {
         this.channel_url = channel_url;
+        this.created_at = created_at;
+        this.custom_type = custom_type;
         this.file_type = file_type;
         this.id = id;
         this.message = message;
@@ -21,14 +34,16 @@ export default class ChatMessage {
     // static STATUS_DELIVERED_TO_SERVER = 2;
     // static STATUS_READ_BY_RECEIVER = 3;
 
-    static TYPE_USER = 'user';
+    static TYPE_ADMIN = 'admin';
     static TYPE_FILE = 'file';
+    static TYPE_USER = 'user';
 }
 
 export const convertFromChannelMessage = channel_message => {
     return new ChatMessage({
-        created_at: channel_message.createdAt,
         channel_url: channel_message.channelUrl,
+        created_at: channel_message.createdAt,
+        custom_type: channel_message.customType,
         file_type: channel_message.type,
         id: channel_message.messageId,
         message: channel_message.message,
@@ -38,3 +53,6 @@ export const convertFromChannelMessage = channel_message => {
         url: channel_message.url,
     });
 };
+
+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.";