[P2PS] / Ameerul / P2PS-2084 Improvise Deriv P2P Available Balance In…

…formation (#12924)

* chore: updated description for available p2p balance

* chore: removed div, added as div to text

packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/__tests__/my-profile-balance-modal.spec.tsx

@@ -29,7 +29,15 @@ describe('<MyProfileBalanceModal />', () => {
     it('should render MyProfileBalanceModal', () => {
         render(<MyProfileBalanceModal />);
 
-        expect(screen.getByText('Deriv P2P Balance')).toBeInTheDocument();
+        expect(screen.getByText('Available Deriv P2P Balance')).toBeInTheDocument();
+        expect(
+            screen.getByText('Your Deriv P2P balance only includes deposits that can’t be reversed.')
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Deposits via cards and the following payment methods aren’t included: Maestro, Diners Club, ZingPay, Skrill, Neteller, Ozow, and UPI QR.'
+            )
+        ).toBeInTheDocument();
     });
 
     it('should call hideModal when clicking on the OK button', () => {

packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.scss

@@ -5,5 +5,9 @@
         @include mobile {
             padding: 0 1.6rem;
         }
+
+        &-text {
+            margin-bottom: 1.6rem;
+        }
     }
 }

packages/p2p/src/components/modal-manager/modals/my-profile-balance-modal/my-profile-balance-modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal } from '@deriv/components';
+import { Button, Modal, Text } from '@deriv/components';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { Localize, localize } from 'Components/i18next';
 
@@ -12,10 +12,15 @@ const MyProfileBalanceModal = () => {
             has_close_icon={false}
             is_open={is_modal_open}
             small
-            title={localize('Deriv P2P Balance')}
+            title={localize('Available Deriv P2P Balance')}
         >
             <Modal.Body className='my-profile-balance-modal__body'>
-                <Localize i18n_default_text='Deriv P2P balance = deposits that can’t be reversed' />
+                <Text as='div' className='my-profile-balance-modal__body-text' size='xs'>
+                    <Localize i18n_default_text='Your Deriv P2P balance only includes deposits that can’t be reversed.' />
+                </Text>
+                <Text size='xs'>
+                    <Localize i18n_default_text='Deposits via cards and the following payment methods aren’t included: Maestro, Diners Club, ZingPay, Skrill, Neteller, Ozow, and UPI QR.' />
+                </Text>
             </Modal.Body>
             <Modal.Footer>
                 <Button has_effect text={localize('OK')} onClick={hideModal} primary large />