From 6ba5b6930bed2209995d4399cec595da27587c05 Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <farrah@deriv.com>
Date: Mon, 2 Sep 2024 14:23:32 +0400
Subject: [PATCH] feat: safety disclaimer

---
 .../components/ChatMessageText/ChatMessageText.tsx    |  4 +++-
 .../orders/components/ChatMessages/ChatMessages.scss  | 11 +++++++++++
 .../orders/components/ChatMessages/ChatMessages.tsx   | 11 ++++++++++-
 .../ChatMessages/__tests__/ChatMessages.spec.tsx      |  4 +++-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx b/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
index 190e7816..a2d7168c 100644
--- a/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
+++ b/src/pages/orders/components/ChatMessageText/ChatMessageText.tsx
@@ -10,9 +10,11 @@ type TChatMessageTextProps = {
 
 const ChatMessageText = ({ children, color, type = '' }: PropsWithChildren<TChatMessageTextProps>) => {
     const { isDesktop } = useDevice();
+    const isAdmin = type === 'admin';
+
     return (
         <div className='chat-message-text'>
-            <Text color={color} lineHeight='xl' size={type === 'admin' && isDesktop ? 'xs' : 'sm'}>
+            <Text color={color} lineHeight={isAdmin ? 'lg' : 'xl'} size={isAdmin && isDesktop ? 'xs' : 'sm'}>
                 {children}
             </Text>
         </div>
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.scss b/src/pages/orders/components/ChatMessages/ChatMessages.scss
index 9b96fee2..94684737 100644
--- a/src/pages/orders/components/ChatMessages/ChatMessages.scss
+++ b/src/pages/orders/components/ChatMessages/ChatMessages.scss
@@ -10,10 +10,12 @@
     @include mobile-or-tablet-screen {
         height: 100%;
     }
+
     &__date {
         margin-top: 1.6rem;
         text-align: center;
     }
+
     &__item {
         display: flex;
         flex-direction: column;
@@ -26,6 +28,7 @@
         &__file {
             color: inherit;
         }
+
         &__image {
             width: 50%;
 
@@ -40,6 +43,7 @@
                 }
             }
         }
+
         &__pdf {
             background-color: #ffffff;
             border-radius: 0.8rem;
@@ -48,11 +52,13 @@
             align-items: center;
             gap: 1rem;
             margin-bottom: 0.4rem;
+
             a {
                 color: #999999;
                 text-decoration: none;
             }
         }
+
         &__timestamp {
             align-items: center;
             display: flex;
@@ -67,6 +73,7 @@
                 border-bottom-left-radius: 0;
             }
         }
+
         &__outgoing {
             align-items: flex-end;
 
@@ -82,6 +89,10 @@
             border: 1px solid #ffad3a;
             padding: 0.8rem 0;
             border-radius: 0.8rem;
+
+            &--text {
+                margin-bottom: 1rem;
+            }
         }
     }
 }
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
index cfb17958..a6910f62 100644
--- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx
+++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
@@ -19,7 +19,16 @@ type TChatMessagesProps = {
 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
+                    components={[<strong key={0} />]}
+                    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.'
+                />
+            </div>
+            <Localize
+                components={[<strong key={0} />]}
+                i18n_default_text="<0>Note:</0> In case of a dispute, we'll use this chat as a reference."
+            />
         </ChatMessageText>
     </div>
 );
diff --git a/src/pages/orders/components/ChatMessages/__tests__/ChatMessages.spec.tsx b/src/pages/orders/components/ChatMessages/__tests__/ChatMessages.spec.tsx
index 9a5f2016..e9d2c8df 100644
--- a/src/pages/orders/components/ChatMessages/__tests__/ChatMessages.spec.tsx
+++ b/src/pages/orders/components/ChatMessages/__tests__/ChatMessages.spec.tsx
@@ -36,7 +36,9 @@ describe('ChatMessages', () => {
     it('should render the messages as expected', () => {
         render(<ChatMessages {...mockProps} />);
         expect(
-            screen.getByText(/Hello! This is where you can chat with the counterparty to confirm the order details./)
+            screen.getByText(
+                /Deriv will never contact you via WhatsApp to ask for your personal information. Always ignore any messages from numbers claiming to be from Deriv./
+            )
         ).toBeInTheDocument();
     });
     it('should display the message sent by the user', () => {