[P2PS] / Ameerul / P2PS-2351 Adding Safety Disclaimer to P2P Chatbox (b…

…inary-com#16636) * chore: changed admin message text content in chatbox * chore: removed <br /> from text
aizad-deriv · Sep 6, 2024 · aca5646 · aca5646
1 parent ce51476
commit aca5646
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx b/packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx
@@ -38,12 +38,12 @@ 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./
+            /Deriv will never contact you via WhatsApp to ask for your personal information. Always ignore any messages from numbers claiming to be from Deriv/
         );
-        const bot_message2 = screen.getByText(/Note: In case of a dispute, we'll use this chat as a reference./);
+        const bot_message2 = screen.getByText(/In case of a dispute, we'll use this chat as a reference./);
         expect(bot_message).toBeInTheDocument();
         expect(bot_message2).toBeInTheDocument();
-        expect(bot_message).toHaveStyle('--text-lh: var(--text-lh-xl)');
-        expect(bot_message).toHaveStyle('--text-size: var(--text-size-xxs)');
+        expect(bot_message2).toHaveStyle('--text-lh: var(--text-lh-l)');
+        expect(bot_message2).toHaveStyle('--text-size: var(--text-size-xxs)');
     });
 });
diff --git a/packages/p2p/src/pages/orders/chat/chat-message-text.jsx b/packages/p2p/src/pages/orders/chat/chat-message-text.jsx
@@ -9,7 +9,7 @@ const ChatMessageText = React.memo(({ children, color, type = '' }) => (
         <Text
             as='p'
             color={color}
-            line_height={type === ChatMessage.TYPE_ADMIN ? 'xl' : 'm'}
+            line_height={type === ChatMessage.TYPE_ADMIN ? 'l' : 'm'}
             size={type === ChatMessage.TYPE_ADMIN ? 'xxs' : 'xs'}
         >
             {children}

diff --git a/packages/p2p/src/pages/orders/chat/chat-messages.jsx b/packages/p2p/src/pages/orders/chat/chat-messages.jsx
@@ -15,7 +15,16 @@ import './chat-messages.scss';
 const AdminMessage = () => (
     <div className='chat-messages-item chat-messages-item--admin'>
         <ChatMessageText color='general' type='admin'>
-            <Localize i18n_default_text="Hello! This is where you can chat with the counterparty to confirm the order details.<br />Note: In case of a dispute, we'll use this chat as a reference." />
+            <div className='chat-messages-item--admin-text'>
+                <Localize
+                    i18n_default_text='<0>Important:</0> Deriv will never contact you via WhatsApp to ask for your personal information. Always ignore any messages from numbers claiming to be from Deriv.'
+                    components={[<strong key={0} />]}
+                />
+            </div>
+            <Localize
+                i18n_default_text="<0>Note:</0> In case of a dispute, we'll use this chat as a reference."
+                components={[<strong key={0} />]}
+            />
         </ChatMessageText>
     </div>
 );

diff --git a/packages/p2p/src/pages/orders/chat/chat-messages.scss b/packages/p2p/src/pages/orders/chat/chat-messages.scss
@@ -72,6 +72,10 @@
             border: 1px solid var(--status-warning);
             padding: 0.8rem 0;
             border-radius: 0.8rem;
+
+            &-text {
+                margin-bottom: 1rem;
+            }
         }
     }
 }