From d1b37dce1812b45b1742da4a1fff83fa667f5380 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 6 Dec 2022 12:10:07 +0800
Subject: [PATCH 01/25] chore: changed tab to block users, change button style,
 added dropdown

---
 .../block-user-dropdown.jsx                   | 24 +++++++++++++++
 .../block-user-dropdown.scss                  |  4 +++
 .../block-user/block-user-dropdown/index.js   |  3 ++
 .../block-user-table/block-user-row.jsx       | 27 +++++++++++++++--
 .../block-user-table/block-user-row.scss      | 30 +++++++++++++++++++
 .../my-profile/block-user/block-user.jsx      |  6 +++-
 .../my-profile/block-user/block-user.scss     |  6 ++++
 .../my-profile/my-profile-content.jsx         |  2 +-
 .../my-profile-header/my-profile-header.jsx   |  4 +--
 .../my-profile-stats/my-profile-stats.jsx     |  4 +--
 packages/p2p/src/constants/my-profile-tabs.js |  2 +-
 packages/p2p/src/stores/my-profile-store.js   | 22 ++++++++++++++
 12 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
new file mode 100644
index 000000000000..c8befb405766
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Dropdown } from '@deriv/components';
+import { observer } from 'mobx-react-lite';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import './block-user-dropdown.scss';
+
+const BlockUserDropdown = () => {
+    const { my_profile_store } = useStores();
+
+    return (
+        <Dropdown
+            className='block-user-dropdown'
+            classNameLabel='block-user-dropdown--label'
+            is_align_text_left
+            list={my_profile_store.block_user_sort_list}
+            onChange={my_profile_store.handleChange}
+            placeholder={localize('Sort by')}
+            value={my_profile_store.selected_sort_value}
+        />
+    );
+};
+
+export default observer(BlockUserDropdown);
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
new file mode 100644
index 000000000000..0e531ffdcb0c
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
@@ -0,0 +1,4 @@
+.block-user-dropdown {
+    margin-left: 1rem;
+    width: 20rem;
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js
new file mode 100644
index 000000000000..846c7e204170
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js
@@ -0,0 +1,3 @@
+import BlockUserDropdown from './block-user-dropdown.jsx';
+
+export default BlockUserDropdown;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx
index c4c40c49c1bb..844078a3f1b5 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx
@@ -22,14 +22,37 @@ const BlockUserRow = ({ row: advertiser }) => {
                 </div>
             </Table.Cell>
             <Table.Cell className='block-user__row-button'>
-                <Button secondary large onClick={() => my_profile_store.onClickUnblock(advertiser)}>
-                    {localize('Unblock')}
+                <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                    {localize('Block')}
                 </Button>
             </Table.Cell>
         </Table.Row>
     );
 };
 
+// const BlockUserRow = ({ row: advertiser }) => {
+//     const { my_profile_store } = useStores();
+//     return (
+//         <Table.Row className='block-user-row'>
+//             <Table.Cell>
+//                 <div className='block-user-row__cell'>
+//                     <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
+//                     <div className='block-user-row__cell-container'>
+//                         <Text size='xs' line_height='m' color='general'>
+//                             {advertiser.name}
+//                         </Text>
+//                     </div>
+//                 </div>
+//             </Table.Cell>
+//             <Table.Cell className='block-user-row__button'>
+//                 <Button secondary large onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+//                     {localize('Block')}
+//                 </Button>
+//             </Table.Cell>
+//         </Table.Row>
+//     );
+// };
+
 BlockUserRow.propTypes = {
     advertiser: PropTypes.object,
 };
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss
new file mode 100644
index 000000000000..d48b33980a23
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss
@@ -0,0 +1,30 @@
+.block-user-row {
+    display: grid;
+    padding: 1.6rem;
+    grid-template-columns: 1fr 1fr;
+
+    &:hover {
+        background-color: var(--general-hover);
+
+        @include mobile {
+            background-color: inherit;
+        }
+    }
+
+    &__button {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    &__cell {
+        align-items: center;
+        display: flex;
+
+        &-container {
+            display: flex;
+            flex-direction: column;
+            margin-left: 0.8rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index b904aefddc5b..bdef462e7e55 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
+import BlockUserDropdown from './block-user-dropdown';
 import BlockUserModal from 'Components/block-user/block-user-modal';
 import BlockUserTable from 'Components/my-profile/block-user/block-user-table/block-user-table';
 import SearchBox from 'Components/search-box';
@@ -33,7 +34,10 @@ const BlockUserList = observer(() => {
     return (
         <div className='block-user__list'>
             {my_profile_store.blocked_advertisers_list.length > 0 && !general_store.is_barred && (
-                <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search')} />
+                <div className='block-user__list-header'>
+                    <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search by nickname')} />
+                    <BlockUserDropdown />
+                </div>
             )}
             <BlockUserTable />
         </div>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/components/my-profile/block-user/block-user.scss
index 73e701d803a2..486f22d665ef 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.scss
@@ -19,6 +19,12 @@
 
         & .search-box {
             margin: 0rem 0.8rem 2.4rem;
+            width: 20rem;
+        }
+
+        &-header {
+            display: flex;
+            flex-direction: row;
         }
     }
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-content.jsx b/packages/p2p/src/components/my-profile/my-profile-content.jsx
index 5576826fa4d4..8ac9b5084d1b 100644
--- a/packages/p2p/src/components/my-profile/my-profile-content.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-content.jsx
@@ -47,7 +47,7 @@ const MyProfileContent = () => {
                 </MobileWrapper>
             </React.Fragment>
         );
-    } else if (my_profile_store.active_tab === my_profile_tabs.BLOCKED_ADVERTISERS) {
+    } else if (my_profile_store.active_tab === my_profile_tabs.BLOCK_USERS) {
         return <BlockUser />;
     }
     return <MyProfileStats />;
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
index 0c43797046eb..f69ffb4fec2c 100644
--- a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
@@ -23,8 +23,8 @@ const MyProfileHeader = () => {
             value: my_profile_tabs.AD_TEMPLATE,
         },
         {
-            text: localize('Blocked advertisers'),
-            value: my_profile_tabs.BLOCKED_ADVERTISERS,
+            text: localize('Block Users'),
+            value: my_profile_tabs.BLOCK_USERS,
         },
     ];
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
index eddecc10b5e8..0f2d7c2983b9 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
@@ -25,8 +25,8 @@ const MyStats = () => {
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.AD_TEMPLATE),
         },
         {
-            default_text: 'Blocked advertisers',
-            onClick: () => my_profile_store.setActiveTab(my_profile_tabs.BLOCKED_ADVERTISERS),
+            default_text: 'Block Users',
+            onClick: () => my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS),
         },
     ];
 
diff --git a/packages/p2p/src/constants/my-profile-tabs.js b/packages/p2p/src/constants/my-profile-tabs.js
index d36db86c19b9..c8e25de42663 100644
--- a/packages/p2p/src/constants/my-profile-tabs.js
+++ b/packages/p2p/src/constants/my-profile-tabs.js
@@ -2,5 +2,5 @@ export const my_profile_tabs = Object.freeze({
     MY_STATS: 'my_stats',
     PAYMENT_METHODS: 'payment_methods',
     AD_TEMPLATE: 'ad_template',
-    BLOCKED_ADVERTISERS: 'blocked_advertisers',
+    BLOCK_USERS: 'block_users',
 });
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index 4dd921b5c57a..d7d35a15781f 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -34,6 +34,7 @@ export default class MyProfileStore extends BaseStore {
     selected_payment_method_display_name = '';
     selected_payment_method_fields = [];
     selected_payment_method_type = '';
+    selected_sort_value = 'all_users';
     should_hide_my_profile_tab = false;
     should_show_add_payment_method_error_modal = false;
     should_show_add_payment_method_form = false;
@@ -72,12 +73,14 @@ export default class MyProfileStore extends BaseStore {
             selected_payment_method_display_name: observable,
             selected_payment_method_fields: observable,
             selected_payment_method_type: observable,
+            selected_sort_value: observable,
             should_hide_my_profile_tab: observable,
             should_show_add_payment_method_error_modal: observable,
             should_show_add_payment_method_form: observable,
             should_show_edit_payment_method_form: observable,
             advertiser_has_payment_methods: computed,
             advertiser_payment_methods_list: computed,
+            block_user_sort_list: computed,
             payment_method_field_set: computed,
             initial_values: computed,
             payment_method_info: computed,
@@ -92,6 +95,7 @@ export default class MyProfileStore extends BaseStore {
             getPaymentMethodDisplayName: action.bound,
             getPaymentMethodValue: action.bound,
             getSelectedPaymentMethodDetails: action.bound,
+            handleChange: action.bound,
             handleSubmit: action.bound,
             handleToggle: action.bound,
             hideAddPaymentMethodForm: action.bound,
@@ -131,6 +135,7 @@ export default class MyProfileStore extends BaseStore {
             setSelectedPaymentMethodDisplayName: action.bound,
             setSelectedPaymentMethodFields: action.bound,
             setSelectedPaymentMethodType: action.bound,
+            setSelectedSortValue: action.bound,
             setShouldHideMyProfileTab: action.bound,
             setShouldShowAddPaymentMethodErrorModal: action.bound,
             setShouldShowAddPaymentMethodForm: action.bound,
@@ -158,6 +163,14 @@ export default class MyProfileStore extends BaseStore {
         return list;
     }
 
+    // eslint-disable-next-line class-methods-use-this
+    get block_user_sort_list() {
+        return [
+            { text: localize('All'), value: 'all_users' },
+            { text: localize('Blocked'), value: 'blocked_users' },
+        ];
+    }
+
     get payment_method_field_set() {
         // The fields are rendered dynamically based on the response. This variable will hold a dictionary of field id and its name/required properties
         return this.selected_payment_method_fields.reduce((dict, field_data) => {
@@ -391,6 +404,11 @@ export default class MyProfileStore extends BaseStore {
             }
         });
     }
+
+    handleChange(e) {
+        this.setSelectedSortValue(e.target.value);
+    }
+
     handleSubmit(values) {
         requestWS({
             p2p_advertiser_update: 1,
@@ -704,6 +722,10 @@ export default class MyProfileStore extends BaseStore {
         this.selected_payment_method_type = selected_payment_method_type;
     }
 
+    setSelectedSortValue(selected_sort_value) {
+        this.selected_sort_value = selected_sort_value;
+    }
+
     setShouldHideMyProfileTab(should_hide_my_profile_tab) {
         this.should_hide_my_profile_tab = should_hide_my_profile_tab;
     }

From 1b5d6dbca75576eec3584f26c8bc966b9a894a3d Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 6 Dec 2022 16:14:13 +0800
Subject: [PATCH 02/25] chore: refactored+restructured block-user-table files
 and fixed show verification component

---
 .../src/components/buy-sell/buy-sell-row.jsx  |  24 ++-
 .../{ => block-user-row}/block-user-row.jsx   |  57 +++---
 .../{ => block-user-row}/block-user-row.scss  |   0
 .../block-user-table/block-user-row/index.js  |   4 +
 .../block-user-table-error.jsx                |  12 +-
 .../block-user-table-error.scss               |  17 ++
 .../block-user-table-error/index.js           |   4 +
 .../block-user-table/block-user-table.jsx     |  13 +-
 .../block-user-table/block-user-table.scss    |  42 +++++
 .../block-user/block-user-table/index.js      |   1 -
 .../my-profile/block-user/block-user.jsx      |   1 +
 .../my-profile/block-user/block-user.scss     | 176 +++++++++---------
 packages/p2p/src/stores/my-profile-store.js   |  14 +-
 13 files changed, 223 insertions(+), 142 deletions(-)
 rename packages/p2p/src/components/my-profile/block-user/block-user-table/{ => block-user-row}/block-user-row.jsx (69%)
 rename packages/p2p/src/components/my-profile/block-user/block-user-table/{ => block-user-row}/block-user-row.scss (100%)
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js
 rename packages/p2p/src/components/my-profile/block-user/block-user-table/{ => block-user-table-error}/block-user-table-error.jsx (84%)
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss

diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
index 3b04979dd909..d0189f8c5679 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
@@ -66,11 +66,13 @@ const BuySellRow = ({ row: advert }) => {
             <div className='buy-sell-row'>
                 <div
                     className='buy-sell-row__advertiser'
-                    onClick={() =>
-                        general_store.is_barred || !general_store.is_advertiser
-                            ? undefined
-                            : buy_sell_store.showAdvertiserPage(advert)
-                    }
+                    onClick={() => {
+                        if (!general_store.is_advertiser) {
+                            buy_sell_store.setShouldShowVerification(true);
+                        } else if (!general_store.is_barred) {
+                            buy_sell_store.showAdvertiserPage(advert);
+                        }
+                    }}
                 >
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}
@@ -173,11 +175,13 @@ const BuySellRow = ({ row: advert }) => {
             <Table.Cell>
                 <div
                     className={classNames('buy-sell__cell', { 'buy-sell__cell-hover': !general_store.is_barred })}
-                    onClick={() =>
-                        general_store.is_barred || !general_store.is_advertiser
-                            ? undefined
-                            : buy_sell_store.showAdvertiserPage(advert)
-                    }
+                    onClick={() => {
+                        if (!general_store.is_advertiser) {
+                            buy_sell_store.setShouldShowVerification(true);
+                        } else if (!general_store.is_barred) {
+                            buy_sell_store.showAdvertiserPage(advert);
+                        }
+                    }}
                 >
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
similarity index 69%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx
rename to packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 844078a3f1b5..762bd08d0855 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -5,47 +5,23 @@ import { useStores } from 'Stores';
 import { Button, Table, Text } from '@deriv/components';
 import UserAvatar from 'Components/user/user-avatar';
 import { localize } from 'Components/i18next';
-import '../block-user.scss';
-
-const BlockUserRow = ({ row: advertiser }) => {
-    const { my_profile_store } = useStores();
-    return (
-        <Table.Row className='block-user__row'>
-            <Table.Cell>
-                <div className='block-user__row-cell'>
-                    <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
-                    <div className='block-user__row-cell--container'>
-                        <Text size='xs' line_height='m' color='general'>
-                            {advertiser.name}
-                        </Text>
-                    </div>
-                </div>
-            </Table.Cell>
-            <Table.Cell className='block-user__row-button'>
-                <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
-                    {localize('Block')}
-                </Button>
-            </Table.Cell>
-        </Table.Row>
-    );
-};
 
 // const BlockUserRow = ({ row: advertiser }) => {
 //     const { my_profile_store } = useStores();
 //     return (
-//         <Table.Row className='block-user-row'>
+//         <Table.Row className='block-user__row'>
 //             <Table.Cell>
-//                 <div className='block-user-row__cell'>
+//                 <div className='block-user__row-cell'>
 //                     <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
-//                     <div className='block-user-row__cell-container'>
+//                     <div className='block-user__row-cell--container'>
 //                         <Text size='xs' line_height='m' color='general'>
 //                             {advertiser.name}
 //                         </Text>
 //                     </div>
 //                 </div>
 //             </Table.Cell>
-//             <Table.Cell className='block-user-row__button'>
-//                 <Button secondary large onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+//             <Table.Cell className='block-user__row-button'>
+//                 <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
 //                     {localize('Block')}
 //                 </Button>
 //             </Table.Cell>
@@ -53,6 +29,29 @@ const BlockUserRow = ({ row: advertiser }) => {
 //     );
 // };
 
+const BlockUserRow = ({ row: advertiser }) => {
+    const { my_profile_store } = useStores();
+    return (
+        <Table.Row className='block-user-row'>
+            <Table.Cell>
+                <div className='block-user-row__cell'>
+                    <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
+                    <div className='block-user-row__cell-container'>
+                        <Text size='xs' line_height='m' color='general'>
+                            {advertiser.name}
+                        </Text>
+                    </div>
+                </div>
+            </Table.Cell>
+            <Table.Cell className='block-user-row__button'>
+                <Button secondary medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                    {localize('Unblock')}
+                </Button>
+            </Table.Cell>
+        </Table.Row>
+    );
+};
+
 BlockUserRow.propTypes = {
     advertiser: PropTypes.object,
 };
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row.scss
rename to packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js
new file mode 100644
index 000000000000..eb2f119c1a66
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js
@@ -0,0 +1,4 @@
+import BlockUserRow from './block-user-row.jsx';
+import './block-user-row.scss';
+
+export default BlockUserRow;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
similarity index 84%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error.jsx
rename to packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
index d76941b3e5d1..63811a0a9b67 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
@@ -12,16 +12,16 @@ const BlockUserTableError = ({ error_message }) => {
     return (
         <React.Fragment>
             <DesktopWrapper>
-                <div className='block-user__table--error'>
+                <div className='block-user-table-error'>
                     <Icon
-                        className='block-user__table--error-icon'
+                        className='block-user-table-error__icon'
                         icon='IcBlockedAdvertisersBarred'
                         height={128}
                         width={128}
                     />
                     <Text
                         align='center'
-                        className='block-user__table--error-text'
+                        className='block-user-table-error__text'
                         line_height='m'
                         size='s'
                         weight='bold'
@@ -32,7 +32,7 @@ const BlockUserTableError = ({ error_message }) => {
             </DesktopWrapper>
             <MobileWrapper>
                 <MobileFullPageModal
-                    body_className='block-user__table--error'
+                    body_className='block-user-table-error'
                     height_offset='80px'
                     is_modal_open
                     page_header_text={localize('Blocked advertisers')}
@@ -40,13 +40,13 @@ const BlockUserTableError = ({ error_message }) => {
                 >
                     <Icon
                         icon='IcBlockedAdvertisersBarred'
-                        className='block-user__table--error-icon'
+                        className='block-user-table-error__icon'
                         height={128}
                         width={128}
                     />
                     <Text
                         align='center'
-                        className='block-user__table--error-text'
+                        className='block-user-table-error__text'
                         line_height='m'
                         size='s'
                         weight='bold'
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
new file mode 100644
index 000000000000..00b0376b6a92
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
@@ -0,0 +1,17 @@
+.block-user-table-error {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &__icon {
+        margin-top: 2.2rem;
+    }
+
+    &__text {
+        margin: 3rem 11rem;
+
+        @include mobile {
+            margin: 3rem 2rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js
new file mode 100644
index 000000000000..20f0ee18f81e
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js
@@ -0,0 +1,4 @@
+import BlockUserTableError from './block-user-table-error.jsx';
+import './block-user-table-error.scss';
+
+export default BlockUserTableError;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
index fb2498c104e5..14bdfb7751aa 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -5,9 +5,10 @@ import { InfiniteDataList, Loading, Table, Text } from '@deriv/components';
 import { localize } from 'Components/i18next';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
-import BlockUserRow from './block-user-row.jsx';
+import BlockUserRow from './block-user-row';
 import BlockUserEmpty from 'Components/block-user/block-user-empty';
-import BlockUserTableError from './block-user-table-error.jsx';
+import BlockUserTableError from './block-user-table-error/block-user-table-error.jsx';
+import './block-user-table.scss';
 
 const BlockUserTable = () => {
     const { general_store, my_profile_store } = useStores();
@@ -39,7 +40,7 @@ const BlockUserTable = () => {
 
     if (my_profile_store.search_term && my_profile_store.search_results.length === 0) {
         return (
-            <Text align='center' className='block-user__text' line_height='m' size='s' weight='normal'>
+            <Text align='center' className='block-user-table__text' line_height='m' size='s' weight='bold'>
                 {localize('There are no matching name.')}
             </Text>
         );
@@ -48,10 +49,10 @@ const BlockUserTable = () => {
     if (my_profile_store.blocked_advertisers_list.length) {
         return (
             <React.Fragment>
-                <Table className='block-user__table'>
-                    <Table.Body className='block-user__table-body'>
+                <Table className='block-user-table'>
+                    <Table.Body className='block-user-table__body'>
                         <InfiniteDataList
-                            data_list_className='block-user__data-list'
+                            data_list_className='block-use-table__data-list'
                             has_more_items_to_load={false}
                             items={my_profile_store.rendered_blocked_advertisers_list}
                             keyMapperFn={item => item.id}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
new file mode 100644
index 000000000000..38eaa186b867
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
@@ -0,0 +1,42 @@
+.block-user-table {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    @include mobile {
+        height: 100%;
+    }
+
+    &__body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__data-list {
+        flex: 1;
+
+        &__data-list-body {
+            flex: 1;
+        }
+
+        .data-list__body-wrapper {
+            flex: 1;
+        }
+    }
+
+    &__header {
+        display: grid;
+        grid-template-columns: 1fr;
+
+        > .dc-table__head:first-child {
+            margin-left: 1.6rem;
+        }
+    }
+
+    &__text {
+        display: inline-block;
+        padding-top: 3rem;
+        width: 100%;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-table/index.js
index 65c74e1007ef..0cd00faba6ef 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/index.js
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/index.js
@@ -1,4 +1,3 @@
 import BlockUserTable from './block-user-table.jsx';
-import '../block-user.scss';
 
 export default BlockUserTable;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index bdef462e7e55..3119def919f3 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -9,6 +9,7 @@ import SearchBox from 'Components/search-box';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import debounce from 'lodash.debounce';
 import { localize } from 'Components/i18next';
+import './block-user.scss';
 
 const BlockUserList = observer(() => {
     const { general_store, my_profile_store } = useStores();
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/components/my-profile/block-user/block-user.scss
index 486f22d665ef..e6a5afbd23e3 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.scss
@@ -1,15 +1,15 @@
 .block-user {
-    &__data-list {
-        flex: 1;
+    // &__data-list {
+    //     flex: 1;
 
-        &__data-list-body {
-            flex: 1;
-        }
+    //     &__data-list-body {
+    //         flex: 1;
+    //     }
 
-        .data-list__body-wrapper {
-            flex: 1;
-        }
-    }
+    //     .data-list__body-wrapper {
+    //         flex: 1;
+    //     }
+    // }
 
     &__list {
         display: flex;
@@ -44,83 +44,83 @@
         }
     }
 
-    &__table {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-
-        @include mobile {
-            height: 100%;
-        }
-
-        &-body {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        &--error {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-
-            &-icon {
-                margin-top: 2.2rem;
-            }
-
-            &-text {
-                margin: 3rem 11rem;
-
-                @include mobile {
-                    margin: 3rem 2rem;
-                }
-            }
-        }
-
-        &-header {
-            display: grid;
-            grid-template-columns: 1fr;
-
-            > .dc-table__head:first-child {
-                margin-left: 1.6rem;
-            }
-        }
-    }
-
-    &__text {
-        display: inline-block;
-        padding-top: 3rem;
-        width: 100%;
-    }
-
-    &__row {
-        display: grid;
-        padding: 1.6rem;
-        grid-template-columns: 1fr 1fr;
-
-        &:hover {
-            background-color: var(--general-hover);
-
-            @include mobile {
-                background-color: inherit;
-            }
-        }
-
-        &-button {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-        }
-
-        &-cell {
-            align-items: center;
-            display: flex;
-
-            &--container {
-                display: flex;
-                flex-direction: column;
-                margin-left: 0.8rem;
-            }
-        }
-    }
+    // &__table {
+    //     display: flex;
+    //     flex: 1;
+    //     flex-direction: column;
+
+    //     @include mobile {
+    //         height: 100%;
+    //     }
+
+    //     &-body {
+    //         flex: 1;
+    //         display: flex;
+    //         flex-direction: column;
+    //     }
+
+    //     &--error {
+    //         align-items: center;
+    //         display: flex;
+    //         flex-direction: column;
+
+    //         &-icon {
+    //             margin-top: 2.2rem;
+    //         }
+
+    //         &-text {
+    //             margin: 3rem 11rem;
+
+    //             @include mobile {
+    //                 margin: 3rem 2rem;
+    //             }
+    //         }
+    //     }
+
+    //     &-header {
+    //         display: grid;
+    //         grid-template-columns: 1fr;
+
+    //         > .dc-table__head:first-child {
+    //             margin-left: 1.6rem;
+    //         }
+    //     }
+    // }
+
+    // &__text {
+    //     display: inline-block;
+    //     padding-top: 3rem;
+    //     width: 100%;
+    // }
+
+    // &__row {
+    //     display: grid;
+    //     padding: 1.6rem;
+    //     grid-template-columns: 1fr 1fr;
+
+    //     &:hover {
+    //         background-color: var(--general-hover);
+
+    //         @include mobile {
+    //             background-color: inherit;
+    //         }
+    //     }
+
+    //     &-button {
+    //         display: flex;
+    //         justify-content: flex-end;
+    //         align-items: center;
+    //     }
+
+    //     &-cell {
+    //         align-items: center;
+    //         display: flex;
+
+    //         &--container {
+    //             display: flex;
+    //             flex-direction: column;
+    //             margin-left: 0.8rem;
+    //         }
+    //     }
+    // }
 }
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index d7d35a15781f..e18bbf4cb626 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -166,8 +166,18 @@ export default class MyProfileStore extends BaseStore {
     // eslint-disable-next-line class-methods-use-this
     get block_user_sort_list() {
         return [
-            { text: localize('All'), value: 'all_users' },
-            { text: localize('Blocked'), value: 'blocked_users' },
+            {
+                text: localize('All ({{blocked_advertisers_list}})', {
+                    blocked_advertisers_list: this.blocked_advertisers_list.length,
+                }),
+                value: 'all_users',
+            },
+            {
+                text: localize('Blocked ({{blocked_advertisers_list}})', {
+                    blocked_advertisers_list: this.blocked_advertisers_list.length,
+                }),
+                value: 'blocked_users',
+            },
         ];
     }
 

From a7cca9b29a8dbd1b3f0f59b8ab3630595a4e8692 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 13 Dec 2022 16:49:41 +0800
Subject: [PATCH 03/25] chore: user can now route to advertiser page from block
 users tab

---
 .../advertiser-page/advertiser-page.jsx       |  2 +-
 .../block-user-row/block-user-row.jsx         | 12 +++++--
 .../block-user-row/block-user-row.scss        |  1 +
 .../p2p/src/stores/advertiser-page-store.js   | 20 +++++++++++
 packages/p2p/src/stores/my-profile-store.js   | 36 ++++++++++++++-----
 5 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index b4d6a055863d..60dfe2faef9e 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -29,6 +29,7 @@ const AdvertiserPage = () => {
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
     const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info;
+
     const {
         basic_verification,
         buy_orders_count,
@@ -175,7 +176,6 @@ const AdvertiserPage = () => {
                                     </div>
                                 </div>
                             </MobileWrapper>
-
                             <div className='advertiser-page__rating'>
                                 <DesktopWrapper>
                                     <React.Fragment>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 762bd08d0855..c7a8410eb878 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -30,11 +30,19 @@ import { localize } from 'Components/i18next';
 // };
 
 const BlockUserRow = ({ row: advertiser }) => {
-    const { my_profile_store } = useStores();
+    const { buy_sell_store, my_profile_store } = useStores();
     return (
         <Table.Row className='block-user-row'>
             <Table.Cell>
-                <div className='block-user-row__cell'>
+                <div
+                    className='block-user-row__cell'
+                    onClick={() => {
+                        my_profile_store.getCounterpartyAdvertiserInfo(advertiser.id);
+                        buy_sell_store.setSelectedAdState({
+                            advertiser_details: { id: advertiser.id, name: advertiser.name },
+                        });
+                    }}
+                >
                     <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
                     <div className='block-user-row__cell-container'>
                         <Text size='xs' line_height='m' color='general'>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index d48b33980a23..bcdaa08cc6bf 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -20,6 +20,7 @@
     &__cell {
         align-items: center;
         display: flex;
+        cursor: pointer;
 
         &-container {
             display: flex;
diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js
index c2714cffc87e..e1b51fd0d63b 100644
--- a/packages/p2p/src/stores/advertiser-page-store.js
+++ b/packages/p2p/src/stores/advertiser-page-store.js
@@ -43,6 +43,7 @@ export default class AdvertiserPageStore extends BaseStore {
             advertiser_details: computed,
             advertiser_details_id: computed,
             advertiser_details_name: computed,
+            getCounterpartyAdvertiserList: action.bound,
             handleTabItemClick: action.bound,
             onCancel: action.bound,
             onCancelClick: action.bound,
@@ -137,6 +138,24 @@ export default class AdvertiserPageStore extends BaseStore {
         this.setIsLoading(false);
     }
 
+    getCounterpartyAdvertiserList(advertiser_id) {
+        this.setIsLoading(true);
+        requestWS({
+            p2p_advert_list: 1,
+            advertiser_id,
+        }).then(response => {
+            if (response) {
+                if (!response.error) {
+                    const { list } = response.p2p_advert_list;
+                    this.setAdverts(list.filter(advert => advert.counterparty_type === this.counterparty_type));
+                } else {
+                    this.setErrorMessage(response.error);
+                }
+            }
+            this.setIsLoading(false);
+        });
+    }
+
     handleTabItemClick(idx) {
         this.setActiveIndex(idx);
         if (idx === 0) {
@@ -178,6 +197,7 @@ export default class AdvertiserPageStore extends BaseStore {
             !this.is_counterparty_advertiser_blocked,
             this.advertiser_details_id
         );
+        if (this.is_counterparty_advertiser_blocked) this.getCounterpartyAdvertiserList(this.advertiser_details_id);
         this.setIsDropdownMenuVisible(false);
     }
 
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index e18bbf4cb626..653b3d14c40d 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -89,8 +89,9 @@ export default class MyProfileStore extends BaseStore {
             payment_methods_list_values: computed,
             rendered_blocked_advertisers_list: computed,
             createPaymentMethod: action.bound,
-            getBlockedAdvertisersList: action.bound,
             getAdvertiserPaymentMethods: action.bound,
+            getBlockedAdvertisersList: action.bound,
+            getCounterpartyAdvertiserInfo: action.bound,
             getPaymentMethodsList: action.bound,
             getPaymentMethodDisplayName: action.bound,
             getPaymentMethodValue: action.bound,
@@ -302,6 +303,20 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
+    getAdvertiserPaymentMethods() {
+        this.setIsLoading(true);
+        requestWS({
+            p2p_advertiser_payment_methods: 1,
+        }).then(response => {
+            if (response.error) {
+                this.setAdvertiserPaymentMethodsError(response.error.message);
+            } else {
+                this.setAdvertiserPaymentMethods(response?.p2p_advertiser_payment_methods);
+            }
+            this.setIsLoading(false);
+        });
+    }
+
     getBlockedAdvertisersList() {
         this.setIsLoading(true);
         requestWS({
@@ -319,17 +334,20 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
-    getAdvertiserPaymentMethods() {
-        this.setIsLoading(true);
+    getCounterpartyAdvertiserInfo(advertiser_id) {
+        const { advertiser_page_store, buy_sell_store, general_store } = this.root_store;
         requestWS({
-            p2p_advertiser_payment_methods: 1,
+            p2p_advertiser_info: 1,
+            id: advertiser_id,
         }).then(response => {
-            if (response.error) {
-                this.setAdvertiserPaymentMethodsError(response.error.message);
-            } else {
-                this.setAdvertiserPaymentMethods(response?.p2p_advertiser_payment_methods);
+            if (response) {
+                if (!response.error) {
+                    advertiser_page_store.setCounterpartyAdvertiserInfo(response.p2p_advertiser_info);
+                    buy_sell_store.setShowAdvertiserPage(true);
+                } else {
+                    general_store.setBlockUnblockUserError(response.error.message);
+                }
             }
-            this.setIsLoading(false);
         });
     }
 

From 486c7ea621e2b7a3518e55a5c718980cd484871f Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 14 Dec 2022 15:30:08 +0800
Subject: [PATCH 04/25] chore: removed comments, fixed icon

---
 .../advertiser-page-adverts.jsx               |  2 +-
 .../block-user-row/block-user-row.jsx         | 23 -----
 .../my-profile/block-user/block-user.scss     | 92 -------------------
 3 files changed, 1 insertion(+), 116 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
index a67e2da7a058..dd9c2c12ea69 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
@@ -67,7 +67,7 @@ const AdvertiserPageAdverts = () => {
                     ) : (
                         <Empty
                             className={classNames('', { 'advertiser-page-empty': isMobile() })}
-                            icon='IcCashierNoAds'
+                            icon='IcNoData'
                             title={localize('No ads')}
                         />
                     )}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index c7a8410eb878..c394e0e0b218 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -6,29 +6,6 @@ import { Button, Table, Text } from '@deriv/components';
 import UserAvatar from 'Components/user/user-avatar';
 import { localize } from 'Components/i18next';
 
-// const BlockUserRow = ({ row: advertiser }) => {
-//     const { my_profile_store } = useStores();
-//     return (
-//         <Table.Row className='block-user__row'>
-//             <Table.Cell>
-//                 <div className='block-user__row-cell'>
-//                     <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
-//                     <div className='block-user__row-cell--container'>
-//                         <Text size='xs' line_height='m' color='general'>
-//                             {advertiser.name}
-//                         </Text>
-//                     </div>
-//                 </div>
-//             </Table.Cell>
-//             <Table.Cell className='block-user__row-button'>
-//                 <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
-//                     {localize('Block')}
-//                 </Button>
-//             </Table.Cell>
-//         </Table.Row>
-//     );
-// };
-
 const BlockUserRow = ({ row: advertiser }) => {
     const { buy_sell_store, my_profile_store } = useStores();
     return (
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/components/my-profile/block-user/block-user.scss
index e6a5afbd23e3..1f11240c9484 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.scss
@@ -1,16 +1,4 @@
 .block-user {
-    // &__data-list {
-    //     flex: 1;
-
-    //     &__data-list-body {
-    //         flex: 1;
-    //     }
-
-    //     .data-list__body-wrapper {
-    //         flex: 1;
-    //     }
-    // }
-
     &__list {
         display: flex;
         flex: 1;
@@ -43,84 +31,4 @@
             }
         }
     }
-
-    // &__table {
-    //     display: flex;
-    //     flex: 1;
-    //     flex-direction: column;
-
-    //     @include mobile {
-    //         height: 100%;
-    //     }
-
-    //     &-body {
-    //         flex: 1;
-    //         display: flex;
-    //         flex-direction: column;
-    //     }
-
-    //     &--error {
-    //         align-items: center;
-    //         display: flex;
-    //         flex-direction: column;
-
-    //         &-icon {
-    //             margin-top: 2.2rem;
-    //         }
-
-    //         &-text {
-    //             margin: 3rem 11rem;
-
-    //             @include mobile {
-    //                 margin: 3rem 2rem;
-    //             }
-    //         }
-    //     }
-
-    //     &-header {
-    //         display: grid;
-    //         grid-template-columns: 1fr;
-
-    //         > .dc-table__head:first-child {
-    //             margin-left: 1.6rem;
-    //         }
-    //     }
-    // }
-
-    // &__text {
-    //     display: inline-block;
-    //     padding-top: 3rem;
-    //     width: 100%;
-    // }
-
-    // &__row {
-    //     display: grid;
-    //     padding: 1.6rem;
-    //     grid-template-columns: 1fr 1fr;
-
-    //     &:hover {
-    //         background-color: var(--general-hover);
-
-    //         @include mobile {
-    //             background-color: inherit;
-    //         }
-    //     }
-
-    //     &-button {
-    //         display: flex;
-    //         justify-content: flex-end;
-    //         align-items: center;
-    //     }
-
-    //     &-cell {
-    //         align-items: center;
-    //         display: flex;
-
-    //         &--container {
-    //             display: flex;
-    //             flex-direction: column;
-    //             margin-left: 0.8rem;
-    //         }
-    //     }
-    // }
 }

From 7156102ad91dfee1f5ffc9187fc1677d95854608 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 14 Dec 2022 17:29:21 +0800
Subject: [PATCH 05/25] chore: added icon, refactored block-user-list, fixed
 handling barred user

---
 .../src/components/icon/common/ic-no-data.svg |  1 +
 .../components/src/components/icon/icons.js   |  2 +
 .../block-user-list/block-user-list.jsx       | 45 +++++++++++++++++++
 .../block-user-list/block-user-list.scss      | 16 +++++++
 .../block-user/block-user-list/index.js       |  3 ++
 .../block-user-table/block-user-table.jsx     |  5 ---
 .../my-profile/block-user/block-user.jsx      | 44 +++---------------
 .../my-profile/block-user/block-user.scss     | 17 -------
 8 files changed, 73 insertions(+), 60 deletions(-)
 create mode 100644 packages/components/src/components/icon/common/ic-no-data.svg
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-list/index.js

diff --git a/packages/components/src/components/icon/common/ic-no-data.svg b/packages/components/src/components/icon/common/ic-no-data.svg
new file mode 100644
index 000000000000..8654e411ad75
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-no-data.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M30.874 6a9.02 9.02 0 0 0-6.333 2.757 9.069 9.069 0 0 0-2.54 6.437v97.612a9.066 9.066 0 0 0 2.54 6.437A9.02 9.02 0 0 0 30.874 122h66.252a9.021 9.021 0 0 0 6.333-2.757 9.068 9.068 0 0 0 2.54-6.437V34L80 6H30.874Z" stroke="#BBCCCE" stroke-width="4" stroke-dasharray="4 4"/><rect x="36" y="87" width="56" height="6" rx="3" fill="#E0F0F0"/><rect x="36" y="73" width="56" height="6" rx="3" fill="#E0F0F0"/><rect x="36" y="59" width="56" height="6" rx="3" fill="#E0F0F0"/><rect x="36" y="45" width="24" height="6" rx="3" fill="#E0F0F0"/><rect x="36" y="101" width="56" height="6" rx="3" fill="#E0F0F0"/><path d="M80 6v23.45A4.483 4.483 0 0 0 84.415 34H106L80 6Z" fill="#BBCCCE"/><path d="M0 26a8 8 0 0 1 8-8h10v92H8a8 8 0 0 1-8-8V26Z" fill="#E0F0F0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M82.355 95.71c6.168 0 11.842-2.12 16.332-5.67l8.21 8.21-.388 3.495 11.647 11.647a5.491 5.491 0 0 0 7.765-7.765L114.274 93.98l-3.495.388-8.161-8.161a26.245 26.245 0 0 0 6.092-16.852C108.71 54.799 96.91 43 82.355 43 67.799 43 56 54.8 56 69.355S67.8 95.71 82.355 95.71Zm20.315-26.355c0 11.22-9.096 20.315-20.315 20.315-11.22 0-20.315-9.095-20.315-20.315S71.135 49.04 82.355 49.04s20.315 9.095 20.315 20.315Z" fill="#85ACB0"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h128v128H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 37c6fe57fc47..f1a3fe2b60d9 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -423,6 +423,7 @@ import './common/ic-money-transfer.svg';
 import './common/ic-multiplier.svg';
 import './common/ic-new-file.svg';
 import './common/ic-no-ad.svg';
+import './common/ic-no-data.svg';
 import './common/ic-no-order.svg';
 import './common/ic-notification-clear.svg';
 import './common/ic-notification.svg';
@@ -567,6 +568,7 @@ import './currency/ic-currency-usdc.svg';
 import './currency/ic-currency-usdk.svg';
 import './currency/ic-currency-ust.svg';
 import './currency/ic-currency-virtual.svg';
+import './derivez/ic-derivez.svg';
 import './dxtrade/ic-dxtrade-deriv-x.svg';
 import './dxtrade/ic-dxtrade-derived.svg';
 import './dxtrade/ic-dxtrade-derivx-platform.svg';
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
new file mode 100644
index 000000000000..a243636036ae
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import BlockUserDropdown from '../block-user-dropdown';
+import BlockUserTable from '../block-user-table';
+import SearchBox from 'Components/search-box';
+import debounce from 'lodash.debounce';
+import { localize } from 'Components/i18next';
+import './block-user-list.scss';
+
+const BlockUserList = observer(() => {
+    const { my_profile_store } = useStores();
+
+    const loadBlockedAdvertisers = debounce(search => {
+        my_profile_store.setSearchTerm(search.trim());
+        my_profile_store.loadMoreBlockedAdvertisers();
+    }, 200);
+
+    const onSearch = search => {
+        // Ensures that blocked advertisers list is not reloaded if search term entered is the same
+        if (my_profile_store.search_term !== search.trim()) {
+            my_profile_store.setIsLoading(true);
+            loadBlockedAdvertisers(search);
+        }
+    };
+
+    const onClear = () => {
+        my_profile_store.setSearchTerm('');
+        my_profile_store.setSearchResults([]);
+    };
+
+    return (
+        <div className='block-user-list'>
+            {my_profile_store.blocked_advertisers_list.length > 0 && (
+                <div className='block-user-list__header'>
+                    <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search by nickname')} />
+                    <BlockUserDropdown />
+                </div>
+            )}
+            <BlockUserTable />
+        </div>
+    );
+});
+
+export default BlockUserList;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
new file mode 100644
index 000000000000..e0332c094a77
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
@@ -0,0 +1,16 @@
+.block-user-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+
+    & .search-box {
+        margin: 0rem 0.8rem 2.4rem;
+        width: 20rem;
+    }
+
+    &__header {
+        display: flex;
+        flex-direction: row;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-list/index.js
new file mode 100644
index 000000000000..72269ee1bcb8
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/index.js
@@ -0,0 +1,3 @@
+import BlockUserList from './block-user-list.jsx';
+
+export default BlockUserList;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
index 14bdfb7751aa..dd5956b12742 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -7,7 +7,6 @@ import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
 import BlockUserRow from './block-user-row';
 import BlockUserEmpty from 'Components/block-user/block-user-empty';
-import BlockUserTableError from './block-user-table-error/block-user-table-error.jsx';
 import './block-user-table.scss';
 
 const BlockUserTable = () => {
@@ -34,10 +33,6 @@ const BlockUserTable = () => {
         return <Loading is_fullscreen={isMobile()} />;
     }
 
-    if (general_store.block_unblock_user_error && general_store.is_barred) {
-        return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
-    }
-
     if (my_profile_store.search_term && my_profile_store.search_results.length === 0) {
         return (
             <Text align='center' className='block-user-table__text' line_height='m' size='s' weight='bold'>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 3119def919f3..228325879d88 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -2,52 +2,20 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
-import BlockUserDropdown from './block-user-dropdown';
 import BlockUserModal from 'Components/block-user/block-user-modal';
-import BlockUserTable from 'Components/my-profile/block-user/block-user-table/block-user-table';
-import SearchBox from 'Components/search-box';
+import BlockUserList from './block-user-list';
+import BlockUserTableError from './block-user-table/block-user-table-error';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import debounce from 'lodash.debounce';
 import { localize } from 'Components/i18next';
 import './block-user.scss';
 
-const BlockUserList = observer(() => {
-    const { general_store, my_profile_store } = useStores();
-
-    const loadBlockedAdvertisers = debounce(search => {
-        my_profile_store.setSearchTerm(search.trim());
-        my_profile_store.loadMoreBlockedAdvertisers();
-    }, 200);
-
-    const onSearch = search => {
-        // Ensures that blocked advertisers list is not reloaded if search term entered is the same
-        if (my_profile_store.search_term !== search.trim()) {
-            my_profile_store.setIsLoading(true);
-            loadBlockedAdvertisers(search);
-        }
-    };
-
-    const onClear = () => {
-        my_profile_store.setSearchTerm('');
-        my_profile_store.setSearchResults([]);
-    };
-
-    return (
-        <div className='block-user__list'>
-            {my_profile_store.blocked_advertisers_list.length > 0 && !general_store.is_barred && (
-                <div className='block-user__list-header'>
-                    <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search by nickname')} />
-                    <BlockUserDropdown />
-                </div>
-            )}
-            <BlockUserTable />
-        </div>
-    );
-});
-
 const BlockUser = () => {
     const { general_store, my_profile_store } = useStores();
 
+    if (general_store.is_barred) {
+        return <BlockUserTableError error_message={'test'} />;
+    }
+
     return (
         <React.Fragment>
             <BlockUserModal
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/components/my-profile/block-user/block-user.scss
index 1f11240c9484..e2cde37cd9ce 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.scss
@@ -1,21 +1,4 @@
 .block-user {
-    &__list {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        height: 100%;
-
-        & .search-box {
-            margin: 0rem 0.8rem 2.4rem;
-            width: 20rem;
-        }
-
-        &-header {
-            display: flex;
-            flex-direction: row;
-        }
-    }
-
     &__modal {
         @include mobile {
             display: flex;

From b80dd3901205b260712ce0c6fd250ac5e061c2fd Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 15 Dec 2022 14:33:25 +0800
Subject: [PATCH 06/25] chore: fixed block/unblock user if they are barred

---
 .../block-user/block-user-list/block-user-list.jsx         | 7 ++++++-
 .../src/components/my-profile/block-user/block-user.jsx    | 5 -----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
index a243636036ae..d08845817b60 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
@@ -3,13 +3,14 @@ import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import BlockUserDropdown from '../block-user-dropdown';
 import BlockUserTable from '../block-user-table';
+import BlockUserTableError from '../block-user-table/block-user-table-error';
 import SearchBox from 'Components/search-box';
 import debounce from 'lodash.debounce';
 import { localize } from 'Components/i18next';
 import './block-user-list.scss';
 
 const BlockUserList = observer(() => {
-    const { my_profile_store } = useStores();
+    const { general_store, my_profile_store } = useStores();
 
     const loadBlockedAdvertisers = debounce(search => {
         my_profile_store.setSearchTerm(search.trim());
@@ -29,6 +30,10 @@ const BlockUserList = observer(() => {
         my_profile_store.setSearchResults([]);
     };
 
+    if (general_store.is_barred && general_store.block_unblock_user_error) {
+        return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
+    }
+
     return (
         <div className='block-user-list'>
             {my_profile_store.blocked_advertisers_list.length > 0 && (
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 228325879d88..020c6f151f9c 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -4,7 +4,6 @@ import { useStores } from 'Stores';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
 import BlockUserModal from 'Components/block-user/block-user-modal';
 import BlockUserList from './block-user-list';
-import BlockUserTableError from './block-user-table/block-user-table-error';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { localize } from 'Components/i18next';
 import './block-user.scss';
@@ -12,10 +11,6 @@ import './block-user.scss';
 const BlockUser = () => {
     const { general_store, my_profile_store } = useStores();
 
-    if (general_store.is_barred) {
-        return <BlockUserTableError error_message={'test'} />;
-    }
-
     return (
         <React.Fragment>
             <BlockUserModal

From 51a24256ba5e30c3f1dc3f19e18b85905c696a34 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Fri, 30 Dec 2022 17:10:14 +0800
Subject: [PATCH 07/25] chore: integrated backend, display trade partners,
 search and dropdown

---
 .../block-user-list/block-user-list.scss      |  5 ++
 .../block-user-row/block-user-row.jsx         | 16 +++-
 .../block-user-row/block-user-row.scss        |  6 +-
 .../my-profile/block-user/block-user.jsx      |  2 +-
 packages/p2p/src/stores/my-profile-store.js   | 76 +++++++++++++++----
 5 files changed, 85 insertions(+), 20 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
index e0332c094a77..b1ff4ac0f181 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
@@ -7,10 +7,15 @@
     & .search-box {
         margin: 0rem 0.8rem 2.4rem;
         width: 20rem;
+
+        @include mobile {
+            width: 15rem;
+        }
     }
 
     &__header {
         display: flex;
         flex-direction: row;
+        align-items: center;
     }
 }
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index c394e0e0b218..763258f9a3d4 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
@@ -8,6 +9,7 @@ import { localize } from 'Components/i18next';
 
 const BlockUserRow = ({ row: advertiser }) => {
     const { buy_sell_store, my_profile_store } = useStores();
+
     return (
         <Table.Row className='block-user-row'>
             <Table.Cell>
@@ -28,10 +30,16 @@ const BlockUserRow = ({ row: advertiser }) => {
                     </div>
                 </div>
             </Table.Cell>
-            <Table.Cell className='block-user-row__button'>
-                <Button secondary medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
-                    {localize('Unblock')}
-                </Button>
+            <Table.Cell className='block-user-row__button-group'>
+                {advertiser.is_blocked ? (
+                    <Button secondary medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                        {localize('Unblock')}
+                    </Button>
+                ) : (
+                    <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                        {localize('Block')}
+                    </Button>
+                )}
             </Table.Cell>
         </Table.Row>
     );
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index bcdaa08cc6bf..3a63ba07170b 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -11,10 +11,14 @@
         }
     }
 
-    &__button {
+    &__button-group {
         display: flex;
         justify-content: flex-end;
         align-items: center;
+
+        & button {
+            width: 8rem;
+        }
     }
 
     &__cell {
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 020c6f151f9c..91aac8bdc4e1 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -15,7 +15,7 @@ const BlockUser = () => {
         <React.Fragment>
             <BlockUserModal
                 advertiser_name={my_profile_store.selected_blocked_user.name}
-                is_advertiser_blocked
+                is_advertiser_blocked={!!my_profile_store.selected_blocked_user.is_blocked}
                 is_block_user_modal_open={general_store.is_block_user_modal_open}
                 onCancel={() => general_store.setIsBlockUserModalOpen(false)}
                 onSubmit={my_profile_store.onSubmit}
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index e7d53b88df88..136578ea41cb 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -39,6 +39,7 @@ export default class MyProfileStore extends BaseStore {
     should_show_add_payment_method_error_modal = false;
     should_show_add_payment_method_form = false;
     should_show_edit_payment_method_form = false;
+    trade_partners_list = [];
 
     // TODO: Refactor this out once modal management refactoring is completed
     MODAL_TRANSITION_DURATION = 280;
@@ -81,6 +82,7 @@ export default class MyProfileStore extends BaseStore {
             should_show_add_payment_method_error_modal: observable,
             should_show_add_payment_method_form: observable,
             should_show_edit_payment_method_form: observable,
+            trade_partners_list: observable,
             advertiser_has_payment_methods: computed,
             advertiser_payment_methods_list: computed,
             block_user_sort_list: computed,
@@ -99,6 +101,7 @@ export default class MyProfileStore extends BaseStore {
             getPaymentMethodDisplayName: action.bound,
             getPaymentMethodValue: action.bound,
             getSelectedPaymentMethodDetails: action.bound,
+            getTradePartnersList: action.bound,
             handleChange: action.bound,
             handleSubmit: action.bound,
             handleToggle: action.bound,
@@ -144,6 +147,7 @@ export default class MyProfileStore extends BaseStore {
             setShouldShowAddPaymentMethodErrorModal: action.bound,
             setShouldShowAddPaymentMethodForm: action.bound,
             setShouldShowEditPaymentMethodForm: action.bound,
+            setTradePartnersList: action.bound,
         });
     }
 
@@ -178,7 +182,8 @@ export default class MyProfileStore extends BaseStore {
             },
             {
                 text: localize('Blocked ({{blocked_advertisers_list}})', {
-                    blocked_advertisers_list: this.blocked_advertisers_list.length,
+                    blocked_advertisers_list: this.blocked_advertisers_list.filter(partner => partner.is_blocked === 1)
+                        .length,
                 }),
                 value: 'blocked_users',
             },
@@ -320,14 +325,32 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
+    getTradePartnersList() {
+        this.setIsLoading(true);
+        requestWS({
+            p2p_advertiser_list: 1,
+            trade_partners: 1,
+        }).then(response => {
+            if (response) {
+                if (!response.error) {
+                    this.setTradePartnersList(response.p2p_advertiser_list.list);
+                } else {
+                    this.root_store.general_store.setBlockUnblockUserError(response.error.message);
+                }
+            }
+            this.setIsLoading(false);
+        });
+    }
+
     getBlockedAdvertisersList() {
         this.setIsLoading(true);
         requestWS({
-            p2p_advertiser_relations: 1,
+            p2p_advertiser_list: 1,
+            trade_partners: 1,
         }).then(response => {
             if (response) {
                 if (!response.error) {
-                    this.setBlockedAdvertisersList(response.p2p_advertiser_relations?.blocked_advertisers);
+                    this.setBlockedAdvertisersList(response?.p2p_advertiser_list?.list);
                     this.loadMoreBlockedAdvertisers();
                 } else {
                     this.root_store.general_store.setBlockUnblockUserError(response.error.message);
@@ -438,6 +461,21 @@ export default class MyProfileStore extends BaseStore {
 
     handleChange(e) {
         this.setSelectedSortValue(e.target.value);
+        if (e.target.value === 'all_users') {
+            this.getBlockedAdvertisersList();
+        } else {
+            this.setIsLoading(true);
+            requestWS({
+                p2p_advertiser_list: 1,
+                trade_partners: 1,
+                is_blocked: 1,
+            }).then(response => {
+                if (!response.error) {
+                    this.setBlockedAdvertisersList(response?.p2p_advertiser_list?.list);
+                }
+                this.setIsLoading(false);
+            });
+        }
     }
 
     handleSubmit(values) {
@@ -482,18 +520,24 @@ export default class MyProfileStore extends BaseStore {
      */
     loadMoreBlockedAdvertisers() {
         if (this.search_term) {
-            const search_results = this.blocked_advertisers_list.filter(blocked_advertiser =>
-                blocked_advertiser.name.toLowerCase().includes(this.search_term.toLowerCase().trim())
-            );
-
-            // if user deletes the last blocked advertiser while searching, display 'You have no blocked advertisers' message condition
-            if (this.search_term && search_results.length === 0 && this.blocked_advertisers_list.length === 0) {
-                this.setSearchTerm('');
-            }
+            this.setIsLoading(true);
+            requestWS({
+                p2p_advertiser_list: 1,
+                trade_partners: 1,
+                advertiser_name: this.search_term,
+            }).then(response => {
+                if (!response.error) {
+                    const { list } = response.p2p_advertiser_list;
 
-            this.setSearchResults(search_results);
+                    if (this.selected_sort_value === 'all_users') {
+                        this.setSearchResults(list);
+                    } else {
+                        this.setSearchResults(list.filter(partner => partner.is_blocked === 1));
+                    }
+                }
+                this.setIsLoading(false);
+            });
         }
-        this.setIsLoading(false);
     }
 
     onClickDelete() {
@@ -538,7 +582,7 @@ export default class MyProfileStore extends BaseStore {
 
         clearTimeout(delay);
         general_store.setIsBlockUserModalOpen(false);
-        general_store.blockUnblockUser(false, this.selected_blocked_user.id);
+        general_store.blockUnblockUser(!this.selected_blocked_user.is_blocked, this.selected_blocked_user.id);
         const delay = setTimeout(() => this.getBlockedAdvertisersList(), 250);
     }
 
@@ -772,4 +816,8 @@ export default class MyProfileStore extends BaseStore {
     setShouldShowEditPaymentMethodForm(should_show_edit_payment_method_form) {
         this.should_show_edit_payment_method_form = should_show_edit_payment_method_form;
     }
+
+    setTradePartnersList(trade_partners_list) {
+        this.trade_partners_list = trade_partners_list;
+    }
 }

From 598057cac97b79441c6c86664b5ba2c08bf0fea8 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 5 Jan 2023 14:25:57 +0800
Subject: [PATCH 08/25] chore: fixed styling, added filter modal/dropdown,
 refactored code

---
 .../p2p/src/components/buy-sell/buy-sell.jsx  |   6 +-
 .../p2p/src/components/buy-sell/buy-sell.scss |   4 +
 .../block-user-dropdown.jsx                   |  16 +-
 .../block-user-dropdown.scss                  |  11 +
 .../block-user-filter-modal.jsx               |  40 ++++
 .../block-user-filter-modal/index.js          |   3 +
 .../block-user-list/block-user-list.jsx       |  42 ++--
 .../block-user-list/block-user-list.scss      |  14 +-
 .../block-user-table/block-user-table.jsx     |  33 ++-
 .../block-user-table/block-user-table.scss    |  17 --
 .../my-profile/block-user/block-user.jsx      |   6 +-
 packages/p2p/src/stores/my-profile-store.js   | 201 +++++++++---------
 12 files changed, 244 insertions(+), 149 deletions(-)
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
 create mode 100644 packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js

diff --git a/packages/p2p/src/components/buy-sell/buy-sell.jsx b/packages/p2p/src/components/buy-sell/buy-sell.jsx
index c959333e7924..5c45690fbe6c 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell.jsx
@@ -39,7 +39,11 @@ const BuySell = () => {
     if (buy_sell_store.should_show_verification) {
         return (
             <React.Fragment>
-                <PageReturn onClick={buy_sell_store.hideVerification} page_title={localize('Verification')} />
+                <PageReturn
+                    className='buy-sell__page-return'
+                    onClick={buy_sell_store.hideVerification}
+                    page_title={localize('Verification')}
+                />
                 <Verification />
             </React.Fragment>
         );
diff --git a/packages/p2p/src/components/buy-sell/buy-sell.scss b/packages/p2p/src/components/buy-sell/buy-sell.scss
index f9fdd2c8b38e..5857e198168a 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell.scss
+++ b/packages/p2p/src/components/buy-sell/buy-sell.scss
@@ -73,6 +73,10 @@
         }
     }
 
+    &__page-return {
+        margin: 2rem;
+    }
+
     &__table-header {
         display: grid;
         grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
index c8befb405766..a413df12641e 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Dropdown } from '@deriv/components';
+import { Dropdown, Icon } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
@@ -8,6 +9,19 @@ import './block-user-dropdown.scss';
 const BlockUserDropdown = () => {
     const { my_profile_store } = useStores();
 
+    if (isMobile()) {
+        return (
+            <div
+                className='block-user-dropdown'
+                onClick={() => {
+                    my_profile_store.setIsFilterModalOpen(true);
+                }}
+            >
+                <Icon icon='IcCashierSort' />
+            </div>
+        );
+    }
+
     return (
         <Dropdown
             className='block-user-dropdown'
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
index 0e531ffdcb0c..cd29dc4ad0d1 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
@@ -1,4 +1,15 @@
 .block-user-dropdown {
     margin-left: 1rem;
     width: 20rem;
+
+    @include mobile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--border-normal);
+        border-radius: 4px;
+        padding: 0.8rem;
+        height: 4rem;
+        width: 4rem;
+    }
 }
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
new file mode 100644
index 000000000000..a5b40d343031
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Modal, RadioGroup, Text } from '@deriv/components';
+import { useStores } from 'Stores';
+
+const BlockUserFilterModal = () => {
+    const { my_profile_store } = useStores();
+
+    return (
+        <Modal
+            is_open={my_profile_store.is_filter_modal_open}
+            height='10rem'
+            toggleModal={() => my_profile_store.setIsFilterModalOpen(false)}
+            width='80vw'
+        >
+            <RadioGroup
+                className='sort-radiogroup'
+                onToggle={my_profile_store.handleChange}
+                selected={my_profile_store.selected_sort_value}
+                required
+            >
+                {my_profile_store.block_user_sort_list.map((list_item, key) => {
+                    return (
+                        <RadioGroup.Item
+                            key={key}
+                            value={list_item.value}
+                            label={
+                                <Text color='prominent' size='s'>
+                                    {list_item.text}
+                                </Text>
+                            }
+                        />
+                    );
+                })}
+            </RadioGroup>
+        </Modal>
+    );
+};
+
+export default observer(BlockUserFilterModal);
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js b/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js
new file mode 100644
index 000000000000..7da3e2b9c1e8
--- /dev/null
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js
@@ -0,0 +1,3 @@
+import BlockUserFilterModal from './block-user-filter-modal.jsx';
+
+export default BlockUserFilterModal;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
index d08845817b60..bba999ac149a 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
+import { Text, Loading } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
 import BlockUserDropdown from '../block-user-dropdown';
 import BlockUserTable from '../block-user-table';
 import BlockUserTableError from '../block-user-table/block-user-table-error';
@@ -12,35 +14,45 @@ import './block-user-list.scss';
 const BlockUserList = observer(() => {
     const { general_store, my_profile_store } = useStores();
 
-    const loadBlockedAdvertisers = debounce(search => {
+    const debouncedGetSearchedTradePartners = debounce(search => {
         my_profile_store.setSearchTerm(search.trim());
-        my_profile_store.loadMoreBlockedAdvertisers();
+        my_profile_store.getSearchedTradePartners();
     }, 200);
 
     const onSearch = search => {
-        // Ensures that blocked advertisers list is not reloaded if search term entered is the same
+        // Ensures that trade partners list is not reloaded if search term entered is the same
         if (my_profile_store.search_term !== search.trim()) {
-            my_profile_store.setIsLoading(true);
-            loadBlockedAdvertisers(search);
+            my_profile_store.setIsBlockUserTableLoading(true);
+            debouncedGetSearchedTradePartners(search);
         }
     };
 
-    const onClear = () => {
-        my_profile_store.setSearchTerm('');
-        my_profile_store.setSearchResults([]);
-    };
-
     if (general_store.is_barred && general_store.block_unblock_user_error) {
         return <BlockUserTableError error_message={general_store.block_unblock_user_error} />;
     }
 
+    if (my_profile_store.is_loading) {
+        return <Loading is_fullscreen={isMobile()} />;
+    }
+
     return (
         <div className='block-user-list'>
-            {my_profile_store.blocked_advertisers_list.length > 0 && (
-                <div className='block-user-list__header'>
-                    <SearchBox onClear={onClear} onSearch={onSearch} placeholder={localize('Search by nickname')} />
-                    <BlockUserDropdown />
-                </div>
+            {my_profile_store.trade_partners_list.length > 0 && (
+                <React.Fragment>
+                    <Text className='block-user-list__text' size='xs'>
+                        {localize(
+                            "When you block someone, you won't see their ads, and they can't see yours. Your ads will be hidden from their search results, too."
+                        )}
+                    </Text>
+                    <div className='block-user-list__header'>
+                        <SearchBox
+                            onClear={my_profile_store.onClear}
+                            onSearch={onSearch}
+                            placeholder={localize('Search by nickname')}
+                        />
+                        <BlockUserDropdown />
+                    </div>
+                </React.Fragment>
             )}
             <BlockUserTable />
         </div>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
index b1ff4ac0f181..78d88b5f8b4a 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
@@ -16,6 +16,18 @@
     &__header {
         display: flex;
         flex-direction: row;
-        align-items: center;
+
+        @include mobile {
+            align-items: center;
+            margin: 0 1.6rem;
+        }
+    }
+
+    &__text {
+        margin: 0 0.8rem 2rem;
+
+        @include mobile {
+            margin: 1.6rem;
+        }
     }
 }
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
index dd5956b12742..73a131f369a7 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -13,45 +13,58 @@ const BlockUserTable = () => {
     const { general_store, my_profile_store } = useStores();
 
     React.useEffect(() => {
-        my_profile_store.setBlockedAdvertisersList([]);
-        my_profile_store.getBlockedAdvertisersList();
+        my_profile_store.setTradePartnersList([]);
+        my_profile_store.getTradePartnersList({ startIndex: 0 }, true);
         my_profile_store.setSearchTerm('');
 
         reaction(
             () => general_store.is_barred,
             () => {
                 if (!general_store.is_barred) general_store.setBlockUnblockUserError('');
-                my_profile_store.getBlockedAdvertisersList();
                 my_profile_store.setSearchTerm('');
+                my_profile_store.getTradePartnersList({ startIndex: 0 });
             }
         );
 
+        return () => {
+            my_profile_store.setTradePartnersList([]);
+            my_profile_store.setSearchTerm('');
+            my_profile_store.setSearchResults([]);
+        };
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    if (my_profile_store.is_loading) {
+    if (my_profile_store.is_block_user_table_loading) {
         return <Loading is_fullscreen={isMobile()} />;
     }
 
-    if (my_profile_store.search_term && my_profile_store.search_results.length === 0) {
+    if (my_profile_store.search_term && my_profile_store.rendered_trade_partners_list.length === 0) {
         return (
-            <Text align='center' className='block-user-table__text' line_height='m' size='s' weight='bold'>
+            <Text
+                align='center'
+                className='block-user-table__text'
+                line_height='m'
+                size='s'
+                weight={isMobile() ? 'normal' : 'bold'}
+            >
                 {localize('There are no matching name.')}
             </Text>
         );
     }
 
-    if (my_profile_store.blocked_advertisers_list.length) {
+    if (my_profile_store.trade_partners_list.length) {
         return (
             <React.Fragment>
                 <Table className='block-user-table'>
                     <Table.Body className='block-user-table__body'>
                         <InfiniteDataList
                             data_list_className='block-use-table__data-list'
-                            has_more_items_to_load={false}
-                            items={my_profile_store.rendered_blocked_advertisers_list}
+                            has_filler
+                            has_more_items_to_load={my_profile_store.has_more_items_to_load}
+                            items={my_profile_store.rendered_trade_partners_list}
                             keyMapperFn={item => item.id}
-                            loadMoreRowsFn={() => {}}
+                            loadMoreRowsFn={my_profile_store.getTradePartnersList}
                             rowRenderer={props => <BlockUserRow {...props} />}
                         />
                     </Table.Body>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
index 38eaa186b867..5a0ef4ef373d 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
@@ -15,23 +15,6 @@
 
     &__data-list {
         flex: 1;
-
-        &__data-list-body {
-            flex: 1;
-        }
-
-        .data-list__body-wrapper {
-            flex: 1;
-        }
-    }
-
-    &__header {
-        display: grid;
-        grid-template-columns: 1fr;
-
-        > .dc-table__head:first-child {
-            margin-left: 1.6rem;
-        }
     }
 
     &__text {
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 91aac8bdc4e1..6bf1573c6120 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -6,6 +6,7 @@ import BlockUserModal from 'Components/block-user/block-user-modal';
 import BlockUserList from './block-user-list';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { localize } from 'Components/i18next';
+import BlockUserFilterModal from './block-user-filter-modal';
 import './block-user.scss';
 
 const BlockUser = () => {
@@ -14,8 +15,8 @@ const BlockUser = () => {
     return (
         <React.Fragment>
             <BlockUserModal
-                advertiser_name={my_profile_store.selected_blocked_user.name}
-                is_advertiser_blocked={!!my_profile_store.selected_blocked_user.is_blocked}
+                advertiser_name={my_profile_store.selected_trade_partner.name}
+                is_advertiser_blocked={!!my_profile_store.selected_trade_partner.is_blocked}
                 is_block_user_modal_open={general_store.is_block_user_modal_open}
                 onCancel={() => general_store.setIsBlockUserModalOpen(false)}
                 onSubmit={my_profile_store.onSubmit}
@@ -24,6 +25,7 @@ const BlockUser = () => {
                 <BlockUserList />
             </DesktopWrapper>
             <MobileWrapper>
+                <BlockUserFilterModal />
                 <MobileFullPageModal
                     body_className='block-user__modal'
                     height_offset='80px'
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index 136578ea41cb..9003e5823eeb 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -4,6 +4,7 @@ import { localize } from 'Components/i18next';
 import { textValidator } from 'Utils/validations';
 import BaseStore from 'Stores/base_store';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
+import { isMobile } from '@deriv/shared';
 
 export default class MyProfileStore extends BaseStore {
     active_tab = my_profile_tabs.MY_STATS;
@@ -11,17 +12,19 @@ export default class MyProfileStore extends BaseStore {
     advertiser_payment_methods = {};
     advertiser_payment_methods_error = '';
     available_payment_methods = {};
-    blocked_advertisers_list = [];
     delete_error_message = '';
     error_message = '';
     form_error = '';
     full_name = '';
+    has_more_items_to_load = false;
+    is_block_user_table_loading = false;
     is_button_loading = false;
     is_cancel_add_payment_method_modal_open = false;
     is_cancel_edit_payment_method_modal_open = false;
     is_confirm_delete_modal_open = false;
     is_delete_payment_method_error_modal_open = false;
-    is_loading = true;
+    is_filter_modal_open = false;
+    is_loading = false;
     is_submit_success = false;
     payment_method_value = undefined;
     payment_methods_list = [];
@@ -29,12 +32,12 @@ export default class MyProfileStore extends BaseStore {
     payment_method_to_edit = {};
     search_results = [];
     search_term = '';
-    selected_blocked_user = {};
     selected_payment_method = '';
     selected_payment_method_display_name = '';
     selected_payment_method_fields = [];
     selected_payment_method_type = '';
     selected_sort_value = 'all_users';
+    selected_trade_partner = {};
     should_hide_my_profile_tab = false;
     should_show_add_payment_method_error_modal = false;
     should_show_add_payment_method_form = false;
@@ -54,16 +57,18 @@ export default class MyProfileStore extends BaseStore {
             advertiser_payment_methods: observable,
             advertiser_payment_methods_error: observable,
             available_payment_methods: observable,
-            blocked_advertisers_list: observable,
             delete_error_message: observable,
             error_message: observable,
             form_error: observable,
             full_name: observable,
+            has_more_items_to_load: observable,
+            is_block_user_table_loading: observable,
             is_button_loading: observable,
             is_cancel_add_payment_method_modal_open: observable,
             is_cancel_edit_payment_method_modal_open: observable,
             is_confirm_delete_modal_open: observable,
             is_delete_payment_method_error_modal_open: observable,
+            is_filter_modal_open: observable,
             is_loading: observable,
             is_submit_success: observable,
             payment_method_value: observable,
@@ -72,12 +77,12 @@ export default class MyProfileStore extends BaseStore {
             payment_method_to_edit: observable,
             search_results: observable,
             search_term: observable,
-            selected_blocked_user: observable,
             selected_payment_method: observable,
             selected_payment_method_display_name: observable,
             selected_payment_method_fields: observable,
             selected_payment_method_type: observable,
             selected_sort_value: observable,
+            selected_trade_partner: observable,
             should_hide_my_profile_tab: observable,
             should_show_add_payment_method_error_modal: observable,
             should_show_add_payment_method_form: observable,
@@ -92,22 +97,22 @@ export default class MyProfileStore extends BaseStore {
             payment_methods_list_items: computed,
             payment_methods_list_methods: computed,
             payment_methods_list_values: computed,
-            rendered_blocked_advertisers_list: computed,
+            rendered_trade_partners_list: computed,
             createPaymentMethod: action.bound,
             getAdvertiserPaymentMethods: action.bound,
-            getBlockedAdvertisersList: action.bound,
             getCounterpartyAdvertiserInfo: action.bound,
             getPaymentMethodsList: action.bound,
             getPaymentMethodDisplayName: action.bound,
             getPaymentMethodValue: action.bound,
+            getSearchedTradePartners: action.bound,
             getSelectedPaymentMethodDetails: action.bound,
             getTradePartnersList: action.bound,
             handleChange: action.bound,
             handleSubmit: action.bound,
             handleToggle: action.bound,
             hideAddPaymentMethodForm: action.bound,
-            loadMoreBlockedAdvertisers: action.bound,
             onClickDelete: action.bound,
+            onClear: action.bound,
             validatePaymentMethodFields: action.bound,
             updatePaymentMethod: action.bound,
             showAddPaymentMethodForm: action.bound,
@@ -119,16 +124,18 @@ export default class MyProfileStore extends BaseStore {
             setAdvertiserPaymentMethods: action.bound,
             setAdvertiserPaymentMethodsError: action.bound,
             setAvailablePaymentMethods: action.bound,
-            setBlockedAdvertisersList: action.bound,
             setDefaultAdvertDescription: action.bound,
             setDeleteErrorMessage: action.bound,
             setErrorMessage: action.bound,
             setFormError: action.bound,
             setFullName: action.bound,
+            setHasMoreItemsToLoad: action.bound,
+            setIsBlockUserTableLoading: action.bound,
             setIsCancelAddPaymentMethodModalOpen: action.bound,
             setIsCancelEditPaymentMethodModalOpen: action.bound,
             setIsConfirmDeleteModalOpen: action.bound,
             setIsDeletePaymentMethodErrorModalOpen: action.bound,
+            setIsFilterModalOpen: action.bound,
             setIsLoading: action.bound,
             setIsSubmitSuccess: action.bound,
             setPaymentMethodValue: action.bound,
@@ -137,12 +144,12 @@ export default class MyProfileStore extends BaseStore {
             setPaymentMethodToEdit: action.bound,
             setSearchResults: action.bound,
             setSearchTerm: action.bound,
-            setSelectedBlockedUser: action.bound,
             setSelectedPaymentMethod: action.bound,
             setSelectedPaymentMethodDisplayName: action.bound,
             setSelectedPaymentMethodFields: action.bound,
             setSelectedPaymentMethodType: action.bound,
             setSelectedSortValue: action.bound,
+            setSelectedTradePartner: action.bound,
             setShouldHideMyProfileTab: action.bound,
             setShouldShowAddPaymentMethodErrorModal: action.bound,
             setShouldShowAddPaymentMethodForm: action.bound,
@@ -171,19 +178,21 @@ export default class MyProfileStore extends BaseStore {
         return list;
     }
 
-    // eslint-disable-next-line class-methods-use-this
     get block_user_sort_list() {
         return [
             {
-                text: localize('All ({{blocked_advertisers_list}})', {
-                    blocked_advertisers_list: this.blocked_advertisers_list.length,
+                text: localize('All ({{trade_partners_list}})', {
+                    trade_partners_list: this.search_term
+                        ? this.search_results.length
+                        : this.trade_partners_list.length,
                 }),
                 value: 'all_users',
             },
             {
-                text: localize('Blocked ({{blocked_advertisers_list}})', {
-                    blocked_advertisers_list: this.blocked_advertisers_list.filter(partner => partner.is_blocked === 1)
-                        .length,
+                text: localize('Blocked ({{trade_partners_list}})', {
+                    trade_partners_list: this.search_term
+                        ? this.search_results.filter(partner => partner.is_blocked === 1).length
+                        : this.trade_partners_list.filter(partner => partner.is_blocked === 1).length,
                 }),
                 value: 'blocked_users',
             },
@@ -259,16 +268,20 @@ export default class MyProfileStore extends BaseStore {
     }
 
     /**
-     * Evaluates a new blocked_advertiser_list based on if the user has searched a blocked advertiser
-     * By default it returns the blocked_advertisers_list when there are no searches
+     * Evaluates a new trade_partners_list based on if the user has searched an advertiser
+     * By default it returns the trade_partners_list when there are no searches
      *
-     * @returns {Array} Either the entire blocked advertisers list or filtered advertisers list by search term
+     * @returns {Array} Returns the entire trade partners list or filtered list of searched trade partners
      */
-    get rendered_blocked_advertisers_list() {
+    get rendered_trade_partners_list() {
         if (this.search_term) {
-            return this.search_results;
+            return this.selected_sort_value === 'all_users'
+                ? this.search_results
+                : this.search_results.filter(partner => partner.is_blocked === 1);
         }
-        return this.blocked_advertisers_list;
+        return this.selected_sort_value === 'all_users'
+            ? this.trade_partners_list
+            : this.trade_partners_list.filter(partner => partner.is_blocked === 1);
     }
 
     createPaymentMethod(values, { setSubmitting }) {
@@ -325,41 +338,6 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
-    getTradePartnersList() {
-        this.setIsLoading(true);
-        requestWS({
-            p2p_advertiser_list: 1,
-            trade_partners: 1,
-        }).then(response => {
-            if (response) {
-                if (!response.error) {
-                    this.setTradePartnersList(response.p2p_advertiser_list.list);
-                } else {
-                    this.root_store.general_store.setBlockUnblockUserError(response.error.message);
-                }
-            }
-            this.setIsLoading(false);
-        });
-    }
-
-    getBlockedAdvertisersList() {
-        this.setIsLoading(true);
-        requestWS({
-            p2p_advertiser_list: 1,
-            trade_partners: 1,
-        }).then(response => {
-            if (response) {
-                if (!response.error) {
-                    this.setBlockedAdvertisersList(response?.p2p_advertiser_list?.list);
-                    this.loadMoreBlockedAdvertisers();
-                } else {
-                    this.root_store.general_store.setBlockUnblockUserError(response.error.message);
-                }
-            }
-            this.setIsLoading(false);
-        });
-    }
-
     getCounterpartyAdvertiserInfo(advertiser_id) {
         const { advertiser_page_store, buy_sell_store, general_store } = this.root_store;
         requestWS({
@@ -459,22 +437,41 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
-    handleChange(e) {
-        this.setSelectedSortValue(e.target.value);
-        if (e.target.value === 'all_users') {
-            this.getBlockedAdvertisersList();
-        } else {
-            this.setIsLoading(true);
-            requestWS({
-                p2p_advertiser_list: 1,
-                trade_partners: 1,
-                is_blocked: 1,
-            }).then(response => {
+    getTradePartnersList({ startIndex }, is_initial_load = false) {
+        const { general_store } = this.root_store;
+
+        if (is_initial_load) this.setIsBlockUserTableLoading(true);
+
+        requestWS({
+            p2p_advertiser_list: 1,
+            trade_partners: 1,
+            offset: startIndex,
+            limit: general_store.list_item_limit,
+            ...(this.search_term ? { advertiser_name: this.search_term } : {}),
+        }).then(response => {
+            if (response) {
                 if (!response.error) {
-                    this.setBlockedAdvertisersList(response?.p2p_advertiser_list?.list);
+                    const { list } = response.p2p_advertiser_list;
+                    const partners_list = startIndex === 0 ? list : [...this.trade_partners_list, ...list];
+                    const searched_list = startIndex === 0 ? list : [...this.search_results, ...list];
+                    this.setHasMoreItemsToLoad(list.length >= general_store.list_item_limit);
+
+                    if (this.search_term) this.setSearchResults(searched_list);
+                    else this.setTradePartnersList(partners_list);
+                } else {
+                    general_store.setBlockUnblockUserError(response.error.message);
                 }
-                this.setIsLoading(false);
-            });
+            }
+            this.setIsBlockUserTableLoading(false);
+        });
+    }
+
+    handleChange(e) {
+        this.setSelectedSortValue(e.target.value);
+        this.getTradePartnersList({ startIndex: 0 }, true);
+
+        if (isMobile()) {
+            this.setIsFilterModalOpen(false);
         }
     }
 
@@ -495,6 +492,7 @@ export default class MyProfileStore extends BaseStore {
             }, 3000);
         });
     }
+
     handleToggle() {
         this.root_store.general_store.setShouldShowRealName(!this.root_store?.general_store?.should_show_real_name);
         requestWS({
@@ -515,28 +513,11 @@ export default class MyProfileStore extends BaseStore {
     }
 
     /**
-     * This function loads more blocked advertisers as necessary if the user is searching for a blocked advertiser
-     * It updates the search_results based on the searched advertiser
+     * This function updates the search_results based on the searched advertiser
      */
-    loadMoreBlockedAdvertisers() {
+    getSearchedTradePartners() {
         if (this.search_term) {
-            this.setIsLoading(true);
-            requestWS({
-                p2p_advertiser_list: 1,
-                trade_partners: 1,
-                advertiser_name: this.search_term,
-            }).then(response => {
-                if (!response.error) {
-                    const { list } = response.p2p_advertiser_list;
-
-                    if (this.selected_sort_value === 'all_users') {
-                        this.setSearchResults(list);
-                    } else {
-                        this.setSearchResults(list.filter(partner => partner.is_blocked === 1));
-                    }
-                }
-                this.setIsLoading(false);
-            });
+            this.getTradePartnersList({ startIndex: 0 });
         }
     }
 
@@ -558,11 +539,19 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
+    onClear() {
+        if (this.search_term) {
+            this.setSearchTerm('');
+            this.setSearchResults([]);
+            this.getTradePartnersList({ startIndex: 0 });
+        }
+    }
+
     onClickUnblock(advertiser) {
         const { general_store } = this.root_store;
 
         general_store.setIsBlockUserModalOpen(true);
-        this.setSelectedBlockedUser(advertiser);
+        this.setSelectedTradePartner(advertiser);
     }
 
     onEditDeletePaymentMethodCard(event, payment_method) {
@@ -582,8 +571,8 @@ export default class MyProfileStore extends BaseStore {
 
         clearTimeout(delay);
         general_store.setIsBlockUserModalOpen(false);
-        general_store.blockUnblockUser(!this.selected_blocked_user.is_blocked, this.selected_blocked_user.id);
-        const delay = setTimeout(() => this.getBlockedAdvertisersList(), 250);
+        general_store.blockUnblockUser(!this.selected_trade_partner.is_blocked, this.selected_trade_partner.id);
+        const delay = setTimeout(() => this.getTradePartnersList({ startIndex: 0 }), 250);
     }
 
     showAddPaymentMethodForm() {
@@ -705,10 +694,6 @@ export default class MyProfileStore extends BaseStore {
         this.available_payment_methods = available_payment_methods;
     }
 
-    setBlockedAdvertisersList(blocked_advertisers_list) {
-        this.blocked_advertisers_list = blocked_advertisers_list;
-    }
-
     setDefaultAdvertDescription(default_advert_description) {
         this.default_advert_description = default_advert_description;
     }
@@ -729,6 +714,14 @@ export default class MyProfileStore extends BaseStore {
         this.full_name = full_name;
     }
 
+    setHasMoreItemsToLoad(has_more_items_to_load) {
+        this.has_more_items_to_load = has_more_items_to_load;
+    }
+
+    setIsBlockUserTableLoading(is_block_user_table_loading) {
+        this.is_block_user_table_loading = is_block_user_table_loading;
+    }
+
     setIsCancelAddPaymentMethodModalOpen(is_cancel_add_payment_method_modal_open) {
         this.is_cancel_add_payment_method_modal_open = is_cancel_add_payment_method_modal_open;
     }
@@ -745,6 +738,10 @@ export default class MyProfileStore extends BaseStore {
         this.is_delete_payment_method_error_modal_open = is_delete_payment_method_error_modal_open;
     }
 
+    setIsFilterModalOpen(is_filter_modal_open) {
+        this.is_filter_modal_open = is_filter_modal_open;
+    }
+
     setIsLoading(is_loading) {
         this.is_loading = is_loading;
     }
@@ -777,10 +774,6 @@ export default class MyProfileStore extends BaseStore {
         this.search_term = search_term;
     }
 
-    setSelectedBlockedUser(selected_blocked_user) {
-        this.selected_blocked_user = selected_blocked_user;
-    }
-
     setSelectedPaymentMethod(selected_payment_method) {
         this.selected_payment_method = selected_payment_method;
     }
@@ -801,6 +794,10 @@ export default class MyProfileStore extends BaseStore {
         this.selected_sort_value = selected_sort_value;
     }
 
+    setSelectedTradePartner(selected_trade_partner) {
+        this.selected_trade_partner = selected_trade_partner;
+    }
+
     setShouldHideMyProfileTab(should_hide_my_profile_tab) {
         this.should_hide_my_profile_tab = should_hide_my_profile_tab;
     }

From 3be1a3d02230c1f072b4276ff8ed418c9f0360f6 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 5 Jan 2023 15:45:59 +0800
Subject: [PATCH 09/25] fix: added suggestions

---
 .../src/components/buy-sell/buy-sell-row.jsx  | 26 +++++++------------
 .../block-user-row/block-user-row.jsx         | 11 ++++----
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
index d0189f8c5679..663d1960f055 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
+++ b/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
@@ -60,20 +60,18 @@ const BuySellRow = ({ row: advert }) => {
         exchange_rate: floating_rate_store.exchange_rate,
         market_rate: effective_rate,
     });
+    const onClickRow = () => {
+        if (!general_store.is_advertiser) {
+            buy_sell_store.setShouldShowVerification(true);
+        } else if (!general_store.is_barred) {
+            buy_sell_store.showAdvertiserPage(advert);
+        }
+    };
 
     if (isMobile()) {
         return (
             <div className='buy-sell-row'>
-                <div
-                    className='buy-sell-row__advertiser'
-                    onClick={() => {
-                        if (!general_store.is_advertiser) {
-                            buy_sell_store.setShouldShowVerification(true);
-                        } else if (!general_store.is_barred) {
-                            buy_sell_store.showAdvertiserPage(advert);
-                        }
-                    }}
-                >
+                <div className='buy-sell-row__advertiser' onClick={() => onClickRow()}>
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}
                         nickname={advertiser_name}
@@ -175,13 +173,7 @@ const BuySellRow = ({ row: advert }) => {
             <Table.Cell>
                 <div
                     className={classNames('buy-sell__cell', { 'buy-sell__cell-hover': !general_store.is_barred })}
-                    onClick={() => {
-                        if (!general_store.is_advertiser) {
-                            buy_sell_store.setShouldShowVerification(true);
-                        } else if (!general_store.is_barred) {
-                            buy_sell_store.showAdvertiserPage(advert);
-                        }
-                    }}
+                    onClick={() => onClickRow()}
                 >
                     <OnlineStatusAvatar
                         is_online={advertiser_details.is_online}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 763258f9a3d4..721c457080f0 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -9,6 +9,7 @@ import { localize } from 'Components/i18next';
 
 const BlockUserRow = ({ row: advertiser }) => {
     const { buy_sell_store, my_profile_store } = useStores();
+    const { id, is_blocked, name } = advertiser;
 
     return (
         <Table.Row className='block-user-row'>
@@ -16,22 +17,22 @@ const BlockUserRow = ({ row: advertiser }) => {
                 <div
                     className='block-user-row__cell'
                     onClick={() => {
-                        my_profile_store.getCounterpartyAdvertiserInfo(advertiser.id);
+                        my_profile_store.getCounterpartyAdvertiserInfo(id);
                         buy_sell_store.setSelectedAdState({
-                            advertiser_details: { id: advertiser.id, name: advertiser.name },
+                            advertiser_details: { id, name },
                         });
                     }}
                 >
-                    <UserAvatar nickname={advertiser.name} size={32} text_size='s' />
+                    <UserAvatar nickname={name} size={32} text_size='s' />
                     <div className='block-user-row__cell-container'>
                         <Text size='xs' line_height='m' color='general'>
-                            {advertiser.name}
+                            {name}
                         </Text>
                     </div>
                 </div>
             </Table.Cell>
             <Table.Cell className='block-user-row__button-group'>
-                {advertiser.is_blocked ? (
+                {is_blocked ? (
                     <Button secondary medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
                         {localize('Unblock')}
                     </Button>

From e988f03671134fdcb18ba718df0f74f4c57ccde7 Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <farrah@deriv.com>
Date: Fri, 13 Jan 2023 17:23:22 +0400
Subject: [PATCH 10/25] fix: redirection when hiding advertiser page

---
 .../src/components/advertiser-page/advertiser-page.jsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index 60dfe2faef9e..263d256e8cce 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -6,6 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
 import { buy_sell } from 'Constants/buy-sell';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import RateChangeModal from 'Components/buy-sell/rate-change-modal.jsx';
 import BuySellModal from 'Components/buy-sell/buy-sell-modal.jsx';
 import PageReturn from 'Components/page-return/page-return.jsx';
@@ -24,7 +25,7 @@ import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
 import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
-    const { general_store, advertiser_page_store, buy_sell_store } = useStores();
+    const { general_store, advertiser_page_store, buy_sell_store, my_profile_store } = useStores();
 
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
@@ -118,7 +119,11 @@ const AdvertiserPage = () => {
             <div className='advertiser-page__page-return-header'>
                 <PageReturn
                     className='buy-sell__advertiser-page-return'
-                    onClick={buy_sell_store.hideAdvertiserPage}
+                    onClick={() => {
+                        buy_sell_store.hideAdvertiserPage();
+                        if (general_store.active_index === general_store.path.my_profile)
+                            my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS);
+                    }}
                     page_title={localize("Advertiser's page")}
                 />
                 {!is_my_advert && (

From 3f739fe1cc72b6c3c5193e6629e5c7d084b22a2b Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <farrah@deriv.com>
Date: Fri, 13 Jan 2023 17:36:42 +0400
Subject: [PATCH 11/25] fix: changed block users label

---
 .../my-profile/my-profile-header/my-profile-header.jsx          | 2 +-
 .../components/my-profile/my-profile-stats/my-profile-stats.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
index f69ffb4fec2c..c9e4a43b6616 100644
--- a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
@@ -23,7 +23,7 @@ const MyProfileHeader = () => {
             value: my_profile_tabs.AD_TEMPLATE,
         },
         {
-            text: localize('Block Users'),
+            text: localize('Block users'),
             value: my_profile_tabs.BLOCK_USERS,
         },
     ];
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
index 0f2d7c2983b9..d1bbb3bca820 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
@@ -25,7 +25,7 @@ const MyStats = () => {
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.AD_TEMPLATE),
         },
         {
-            default_text: 'Block Users',
+            default_text: 'Block users',
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS),
         },
     ];

From 2e190554dc06a64172e5cecfa2f5b804527a4b61 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Mon, 16 Jan 2023 14:50:15 +0800
Subject: [PATCH 12/25] chore: fix button sizing, changed text, removed
 autosizer

---
 .../block-user-empty/block-user-empty.jsx     |  6 ++---
 .../block-user-row/block-user-row.scss        |  2 +-
 .../my-profile/block-user/block-user.jsx      |  2 +-
 .../src/components/my-profile/my-profile.jsx  | 24 ++++++++-----------
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
index 78fa00b8b210..23ebc43ce9e6 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
+++ b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
@@ -19,7 +19,7 @@ const BlockUserEmpty = () => {
                         width={128}
                     />
                     <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
-                        <Localize i18n_default_text='You have no blocked advertisers' />
+                        <Localize i18n_default_text='No users to show here.' />
                     </Text>
                 </div>
             </DesktopWrapper>
@@ -28,7 +28,7 @@ const BlockUserEmpty = () => {
                     body_className='block-user-empty'
                     height_offset='80px'
                     is_modal_open
-                    page_header_text={localize('Blocked advertisers')}
+                    page_header_text={localize('Block users')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <Icon
@@ -38,7 +38,7 @@ const BlockUserEmpty = () => {
                         width={128}
                     />
                     <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
-                        <Localize i18n_default_text='You have no blocked advertisers' />
+                        <Localize i18n_default_text='No users to show here.' />
                     </Text>
                 </MobileFullPageModal>
             </MobileWrapper>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index 3a63ba07170b..5bfa672a6780 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -17,7 +17,7 @@
         align-items: center;
 
         & button {
-            width: 8rem;
+            min-width: 9rem;
         }
     }
 
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 6bf1573c6120..65f42e667926 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -32,7 +32,7 @@ const BlockUser = () => {
                     is_flex
                     is_modal_open
                     page_header_className='buy-sell__modal-header'
-                    page_header_text={localize('Blocked advertisers')}
+                    page_header_text={localize('Block users')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <BlockUserList />
diff --git a/packages/p2p/src/components/my-profile/my-profile.jsx b/packages/p2p/src/components/my-profile/my-profile.jsx
index 96d964365209..f3dad75e0e70 100644
--- a/packages/p2p/src/components/my-profile/my-profile.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AutoSizer, DesktopWrapper, Text } from '@deriv/components';
+import { DesktopWrapper, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
@@ -31,19 +31,15 @@ const MyProfile = () => {
     }
 
     return (
-        <AutoSizer>
-            {({ height, width }) => (
-                <div className='my-profile' style={{ height, width }}>
-                    <div className='my-profile__content'>
-                        <MyProfileDetailsContainer />
-                        <DesktopWrapper>
-                            <MyProfileHeader />
-                        </DesktopWrapper>
-                        <MyProfileContent />
-                    </div>
-                </div>
-            )}
-        </AutoSizer>
+        <div className='my-profile'>
+            <div className='my-profile__content'>
+                <MyProfileDetailsContainer />
+                <DesktopWrapper>
+                    <MyProfileHeader />
+                </DesktopWrapper>
+                <MyProfileContent />
+            </div>
+        </div>
     );
 };
 

From 961781d423faa1fa098c555868a227e5b35c7775 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Mon, 16 Jan 2023 15:05:48 +0800
Subject: [PATCH 13/25] chore: show no users to show if user has no blocked
 users. changed no ads text

---
 .../src/components/advertiser-page/advertiser-page-adverts.jsx  | 2 +-
 .../my-profile/block-user/block-user-table/block-user-table.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
index dd9c2c12ea69..098e8803d90a 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
@@ -68,7 +68,7 @@ const AdvertiserPageAdverts = () => {
                         <Empty
                             className={classNames('', { 'advertiser-page-empty': isMobile() })}
                             icon='IcNoData'
-                            title={localize('No ads')}
+                            title={localize('There are no ads yet')}
                         />
                     )}
                 </React.Fragment>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
index 73a131f369a7..8fe516858df6 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -53,7 +53,7 @@ const BlockUserTable = () => {
         );
     }
 
-    if (my_profile_store.trade_partners_list.length) {
+    if (my_profile_store.rendered_trade_partners_list.length) {
         return (
             <React.Fragment>
                 <Table className='block-user-table'>

From d09698c3d4c7742a80dd850639469069fd806c18 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Mon, 16 Jan 2023 15:17:07 +0800
Subject: [PATCH 14/25] chore: fixed block user modal padding issues

---
 .../block-user/block-user-modal/block-user-modal.scss         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss
index 84d470158208..a7999bd128af 100644
--- a/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss
+++ b/packages/p2p/src/components/block-user/block-user-modal/block-user-modal.scss
@@ -1,5 +1,9 @@
 .block-user-modal {
     &__body {
         padding: 0 2.4rem;
+
+        @include mobile {
+            padding: 0 1.6rem;
+        }
     }
 }

From 1890a61b455d41abbe63c42a99e13d2903e1ee41 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 17 Jan 2023 08:57:34 +0800
Subject: [PATCH 15/25] chore: put autosizer back, changed table styling,
 changed logic for displaying dropdown values

---
 .../block-user-table/block-user-table.scss    |  6 +++--
 .../src/components/my-profile/my-profile.jsx  | 24 +++++++++++--------
 packages/p2p/src/stores/my-profile-store.js   | 24 ++++++++++++-------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
index 5a0ef4ef373d..949561669304 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
@@ -13,8 +13,10 @@
         flex-direction: column;
     }
 
-    &__data-list {
-        flex: 1;
+    & .data-list {
+        @include desktop {
+            height: 65rem;
+        }
     }
 
     &__text {
diff --git a/packages/p2p/src/components/my-profile/my-profile.jsx b/packages/p2p/src/components/my-profile/my-profile.jsx
index f3dad75e0e70..96d964365209 100644
--- a/packages/p2p/src/components/my-profile/my-profile.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DesktopWrapper, Text } from '@deriv/components';
+import { AutoSizer, DesktopWrapper, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
@@ -31,15 +31,19 @@ const MyProfile = () => {
     }
 
     return (
-        <div className='my-profile'>
-            <div className='my-profile__content'>
-                <MyProfileDetailsContainer />
-                <DesktopWrapper>
-                    <MyProfileHeader />
-                </DesktopWrapper>
-                <MyProfileContent />
-            </div>
-        </div>
+        <AutoSizer>
+            {({ height, width }) => (
+                <div className='my-profile' style={{ height, width }}>
+                    <div className='my-profile__content'>
+                        <MyProfileDetailsContainer />
+                        <DesktopWrapper>
+                            <MyProfileHeader />
+                        </DesktopWrapper>
+                        <MyProfileContent />
+                    </div>
+                </div>
+            )}
+        </AutoSizer>
     );
 };
 
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index 9003e5823eeb..18aeda61e68b 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -98,6 +98,7 @@ export default class MyProfileStore extends BaseStore {
             payment_methods_list_methods: computed,
             payment_methods_list_values: computed,
             rendered_trade_partners_list: computed,
+            trade_partner_dropdown_list: computed,
             createPaymentMethod: action.bound,
             getAdvertiserPaymentMethods: action.bound,
             getCounterpartyAdvertiserInfo: action.bound,
@@ -181,18 +182,16 @@ export default class MyProfileStore extends BaseStore {
     get block_user_sort_list() {
         return [
             {
-                text: localize('All ({{trade_partners_list}})', {
-                    trade_partners_list: this.search_term
-                        ? this.search_results.length
-                        : this.trade_partners_list.length,
+                text: localize('All ({{list_value}})', {
+                    list_value: this.is_block_user_table_loading ? '...' : this.trade_partner_dropdown_list.length,
                 }),
                 value: 'all_users',
             },
             {
-                text: localize('Blocked ({{trade_partners_list}})', {
-                    trade_partners_list: this.search_term
-                        ? this.search_results.filter(partner => partner.is_blocked === 1).length
-                        : this.trade_partners_list.filter(partner => partner.is_blocked === 1).length,
+                text: localize('Blocked ({{list_value}})', {
+                    list_value: this.is_block_user_table_loading
+                        ? '...'
+                        : this.trade_partner_dropdown_list.filter(partner => partner.is_blocked === 1).length,
                 }),
                 value: 'blocked_users',
             },
@@ -284,6 +283,15 @@ export default class MyProfileStore extends BaseStore {
             : this.trade_partners_list.filter(partner => partner.is_blocked === 1);
     }
 
+    get trade_partner_dropdown_list() {
+        if (this.search_term) {
+            if (this.search_results.length) return this.search_results;
+            else if (this.search_results.length === 0) return [];
+        }
+
+        return this.trade_partners_list;
+    }
+
     createPaymentMethod(values, { setSubmitting }) {
         setSubmitting(true);
         requestWS({

From 5c663561c819819e40a5a4b84c35e9da63a99e4d Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 17 Jan 2023 11:40:08 +0800
Subject: [PATCH 16/25] chore: removed styling

---
 .../block-user/block-user-table/block-user-table.scss       | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
index 949561669304..5e3d20a675f1 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
@@ -13,12 +13,6 @@
         flex-direction: column;
     }
 
-    & .data-list {
-        @include desktop {
-            height: 65rem;
-        }
-    }
-
     &__text {
         display: inline-block;
         padding-top: 3rem;

From 10ef5182ac53d742ff01f267c226e66d24212e1d Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Tue, 17 Jan 2023 13:50:16 +0800
Subject: [PATCH 17/25] chore: fixed duplicate rows for trade partners list

---
 .../block-user-table/block-user-table.jsx     |  8 +++---
 packages/p2p/src/stores/my-profile-store.js   | 26 +++++--------------
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
index 8fe516858df6..db535e359e5f 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -14,7 +14,7 @@ const BlockUserTable = () => {
 
     React.useEffect(() => {
         my_profile_store.setTradePartnersList([]);
-        my_profile_store.getTradePartnersList({ startIndex: 0 }, true);
+        my_profile_store.getTradePartnersList(true);
         my_profile_store.setSearchTerm('');
 
         reaction(
@@ -22,7 +22,7 @@ const BlockUserTable = () => {
             () => {
                 if (!general_store.is_barred) general_store.setBlockUnblockUserError('');
                 my_profile_store.setSearchTerm('');
-                my_profile_store.getTradePartnersList({ startIndex: 0 });
+                my_profile_store.getTradePartnersList(true);
             }
         );
 
@@ -61,10 +61,10 @@ const BlockUserTable = () => {
                         <InfiniteDataList
                             data_list_className='block-use-table__data-list'
                             has_filler
-                            has_more_items_to_load={my_profile_store.has_more_items_to_load}
+                            has_more_items_to_load={false}
                             items={my_profile_store.rendered_trade_partners_list}
                             keyMapperFn={item => item.id}
-                            loadMoreRowsFn={my_profile_store.getTradePartnersList}
+                            loadMoreRowsFn={() => {}}
                             rowRenderer={props => <BlockUserRow {...props} />}
                         />
                     </Table.Body>
diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js
index 18aeda61e68b..90e70a316e61 100644
--- a/packages/p2p/src/stores/my-profile-store.js
+++ b/packages/p2p/src/stores/my-profile-store.js
@@ -16,7 +16,6 @@ export default class MyProfileStore extends BaseStore {
     error_message = '';
     form_error = '';
     full_name = '';
-    has_more_items_to_load = false;
     is_block_user_table_loading = false;
     is_button_loading = false;
     is_cancel_add_payment_method_modal_open = false;
@@ -61,7 +60,6 @@ export default class MyProfileStore extends BaseStore {
             error_message: observable,
             form_error: observable,
             full_name: observable,
-            has_more_items_to_load: observable,
             is_block_user_table_loading: observable,
             is_button_loading: observable,
             is_cancel_add_payment_method_modal_open: observable,
@@ -130,7 +128,6 @@ export default class MyProfileStore extends BaseStore {
             setErrorMessage: action.bound,
             setFormError: action.bound,
             setFullName: action.bound,
-            setHasMoreItemsToLoad: action.bound,
             setIsBlockUserTableLoading: action.bound,
             setIsCancelAddPaymentMethodModalOpen: action.bound,
             setIsCancelEditPaymentMethodModalOpen: action.bound,
@@ -445,7 +442,7 @@ export default class MyProfileStore extends BaseStore {
         });
     }
 
-    getTradePartnersList({ startIndex }, is_initial_load = false) {
+    getTradePartnersList(is_initial_load = false) {
         const { general_store } = this.root_store;
 
         if (is_initial_load) this.setIsBlockUserTableLoading(true);
@@ -453,19 +450,14 @@ export default class MyProfileStore extends BaseStore {
         requestWS({
             p2p_advertiser_list: 1,
             trade_partners: 1,
-            offset: startIndex,
-            limit: general_store.list_item_limit,
             ...(this.search_term ? { advertiser_name: this.search_term } : {}),
         }).then(response => {
             if (response) {
                 if (!response.error) {
                     const { list } = response.p2p_advertiser_list;
-                    const partners_list = startIndex === 0 ? list : [...this.trade_partners_list, ...list];
-                    const searched_list = startIndex === 0 ? list : [...this.search_results, ...list];
-                    this.setHasMoreItemsToLoad(list.length >= general_store.list_item_limit);
 
-                    if (this.search_term) this.setSearchResults(searched_list);
-                    else this.setTradePartnersList(partners_list);
+                    if (this.search_term) this.setSearchResults(list);
+                    else this.setTradePartnersList(list);
                 } else {
                     general_store.setBlockUnblockUserError(response.error.message);
                 }
@@ -476,7 +468,7 @@ export default class MyProfileStore extends BaseStore {
 
     handleChange(e) {
         this.setSelectedSortValue(e.target.value);
-        this.getTradePartnersList({ startIndex: 0 }, true);
+        this.getTradePartnersList(true);
 
         if (isMobile()) {
             this.setIsFilterModalOpen(false);
@@ -525,7 +517,7 @@ export default class MyProfileStore extends BaseStore {
      */
     getSearchedTradePartners() {
         if (this.search_term) {
-            this.getTradePartnersList({ startIndex: 0 });
+            this.getTradePartnersList(true);
         }
     }
 
@@ -551,7 +543,7 @@ export default class MyProfileStore extends BaseStore {
         if (this.search_term) {
             this.setSearchTerm('');
             this.setSearchResults([]);
-            this.getTradePartnersList({ startIndex: 0 });
+            this.getTradePartnersList(true);
         }
     }
 
@@ -580,7 +572,7 @@ export default class MyProfileStore extends BaseStore {
         clearTimeout(delay);
         general_store.setIsBlockUserModalOpen(false);
         general_store.blockUnblockUser(!this.selected_trade_partner.is_blocked, this.selected_trade_partner.id);
-        const delay = setTimeout(() => this.getTradePartnersList({ startIndex: 0 }), 250);
+        const delay = setTimeout(() => this.getTradePartnersList(), 250);
     }
 
     showAddPaymentMethodForm() {
@@ -722,10 +714,6 @@ export default class MyProfileStore extends BaseStore {
         this.full_name = full_name;
     }
 
-    setHasMoreItemsToLoad(has_more_items_to_load) {
-        this.has_more_items_to_load = has_more_items_to_load;
-    }
-
     setIsBlockUserTableLoading(is_block_user_table_loading) {
         this.is_block_user_table_loading = is_block_user_table_loading;
     }

From 98af14e8ee20492a7edc902badd5f4f0edbbdd72 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 18 Jan 2023 11:50:05 +0800
Subject: [PATCH 18/25] chore: added error modal in block user tab if user B is
 banned whilst blocking

---
 .../my-profile/block-user/block-user.jsx           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 65f42e667926..2eeb7002ad3f 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -2,11 +2,13 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { DesktopWrapper, MobileFullPageModal, MobileWrapper } from '@deriv/components';
-import BlockUserModal from 'Components/block-user/block-user-modal';
-import BlockUserList from './block-user-list';
+import { isMobile } from '@deriv/shared';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { localize } from 'Components/i18next';
+import BlockUserModal from 'Components/block-user/block-user-modal';
+import BlockUserList from './block-user-list';
 import BlockUserFilterModal from './block-user-filter-modal';
+import ErrorModal from 'Components/error-modal/error-modal';
 import './block-user.scss';
 
 const BlockUser = () => {
@@ -21,6 +23,14 @@ const BlockUser = () => {
                 onCancel={() => general_store.setIsBlockUserModalOpen(false)}
                 onSubmit={my_profile_store.onSubmit}
             />
+            <ErrorModal
+                error_message={general_store.block_unblock_user_error}
+                error_modal_title='Unable to block advertiser'
+                has_close_icon={false}
+                is_error_modal_open={general_store.block_unblock_user_error && !general_store.is_barred}
+                setIsErrorModalOpen={() => general_store.setBlockUnblockUserError('')}
+                width={isMobile() ? '90rem' : '40rem'}
+            />
             <DesktopWrapper>
                 <BlockUserList />
             </DesktopWrapper>

From 425a9925b863ac24f76fda6ad63e62e4879baf61 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Wed, 18 Jan 2023 12:44:24 +0800
Subject: [PATCH 19/25] chore: dont allow barred user to navigate to
 advertisers page, fixed styling issue stats

---
 .../block-user-row/block-user-row.jsx           | 17 +++++++++++------
 .../block-user-row/block-user-row.scss          |  4 ++++
 .../my-profile-stats-table.scss                 |  1 -
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 721c457080f0..465b01d50df5 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -6,21 +6,26 @@ import { useStores } from 'Stores';
 import { Button, Table, Text } from '@deriv/components';
 import UserAvatar from 'Components/user/user-avatar';
 import { localize } from 'Components/i18next';
+import classNames from 'classnames';
 
 const BlockUserRow = ({ row: advertiser }) => {
-    const { buy_sell_store, my_profile_store } = useStores();
+    const { buy_sell_store, general_store, my_profile_store } = useStores();
     const { id, is_blocked, name } = advertiser;
 
     return (
         <Table.Row className='block-user-row'>
             <Table.Cell>
                 <div
-                    className='block-user-row__cell'
+                    className={classNames('block-user-row__cell', {
+                        'block-user-row__cell--barred': general_store.is_barred,
+                    })}
                     onClick={() => {
-                        my_profile_store.getCounterpartyAdvertiserInfo(id);
-                        buy_sell_store.setSelectedAdState({
-                            advertiser_details: { id, name },
-                        });
+                        if (!general_store.is_barred) {
+                            my_profile_store.getCounterpartyAdvertiserInfo(id);
+                            buy_sell_store.setSelectedAdState({
+                                advertiser_details: { id, name },
+                            });
+                        }
                     }}
                 >
                     <UserAvatar nickname={name} size={32} text_size='s' />
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index 5bfa672a6780..541d87d6cf12 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -26,6 +26,10 @@
         display: flex;
         cursor: pointer;
 
+        &--barred {
+            cursor: not-allowed;
+        }
+
         &-container {
             display: flex;
             flex-direction: column;
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
index 23c6bfe58cc7..cb8dfb5aa5a6 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
@@ -2,7 +2,6 @@
     border-bottom: none;
     grid-template-columns: repeat(4, 1fr);
     margin: 1.4rem 0;
-    overflow: auto;
 
     &.dc-table__row {
         height: unset;

From 7c902f84a5c7f43d6e703496e78ed3d73f3b4f63 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 19 Jan 2023 13:52:36 +0800
Subject: [PATCH 20/25] chore: fixed navigation issue, styling, button hovering
 issue on mobile

---
 .../advertiser-page/advertiser-page.jsx       |  1 +
 .../block-user-empty/block-user-empty.scss    |  4 +++
 .../components/error-modal/error-modal.scss   |  4 +++
 .../block-user-list/block-user-list.scss      |  2 ++
 .../block-user-row/block-user-row.jsx         | 25 ++++++++++++++++---
 .../block-user-row/block-user-row.scss        | 17 ++++++++++++-
 6 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index 263d256e8cce..4122db733c12 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -96,6 +96,7 @@ const AdvertiserPage = () => {
                 is_error_modal_open={is_error_modal_open}
                 setIsErrorModalOpen={is_open => {
                     if (!is_open) buy_sell_store.hideAdvertiserPage();
+                    if (general_store.active_index !== 0) my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS);
                     advertiser_page_store.onCancel();
                     general_store.setBlockUnblockUserError('');
                 }}
diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss
index dd67de69a806..f9320b9ffbcd 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss
+++ b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss
@@ -3,6 +3,10 @@
     display: flex;
     flex-direction: column;
 
+    @include mobile {
+        margin-top: 16rem;
+    }
+
     &__icon {
         margin-top: 2.2rem;
     }
diff --git a/packages/p2p/src/components/error-modal/error-modal.scss b/packages/p2p/src/components/error-modal/error-modal.scss
index eb26b69cd033..5e521fcc3fa4 100644
--- a/packages/p2p/src/components/error-modal/error-modal.scss
+++ b/packages/p2p/src/components/error-modal/error-modal.scss
@@ -1,5 +1,9 @@
 .error-modal {
     &__body {
         padding: 0 2.4rem;
+
+        @include mobile {
+            padding: 0 1.6rem;
+        }
     }
 }
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
index 78d88b5f8b4a..75691c5f050e 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
@@ -20,6 +20,7 @@
         @include mobile {
             align-items: center;
             margin: 0 1.6rem;
+            z-index: 7;
         }
     }
 
@@ -28,6 +29,7 @@
 
         @include mobile {
             margin: 1.6rem;
+            z-index: 7;
         }
     }
 }
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 465b01d50df5..755a57121cd5 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -3,10 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
+import classNames from 'classnames';
+import { isMobile } from '@deriv/shared';
 import { Button, Table, Text } from '@deriv/components';
-import UserAvatar from 'Components/user/user-avatar';
 import { localize } from 'Components/i18next';
-import classNames from 'classnames';
+import UserAvatar from 'Components/user/user-avatar';
 
 const BlockUserRow = ({ row: advertiser }) => {
     const { buy_sell_store, general_store, my_profile_store } = useStores();
@@ -38,11 +39,27 @@ const BlockUserRow = ({ row: advertiser }) => {
             </Table.Cell>
             <Table.Cell className='block-user-row__button-group'>
                 {is_blocked ? (
-                    <Button secondary medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                    <Button
+                        className={classNames('block-user-row__button-group__button', {
+                            'block-user-row__button-group__button--unblock-hover':
+                                isMobile() && general_store.is_block_user_modal_open,
+                        })}
+                        secondary
+                        medium
+                        onClick={() => my_profile_store.onClickUnblock(advertiser)}
+                    >
                         {localize('Unblock')}
                     </Button>
                 ) : (
-                    <Button alternate medium onClick={() => my_profile_store.onClickUnblock(advertiser)}>
+                    <Button
+                        className={classNames('block-user-row__button-group__button', {
+                            'block-user-row__button-group__button--block-hover':
+                                isMobile() && general_store.is_block_user_modal_open,
+                        })}
+                        alternate
+                        medium
+                        onClick={() => my_profile_store.onClickUnblock(advertiser)}
+                    >
                         {localize('Block')}
                     </Button>
                 )}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index 541d87d6cf12..54c12414c2a4 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -16,8 +16,23 @@
         justify-content: flex-end;
         align-items: center;
 
-        & button {
+        &__button {
             min-width: 9rem;
+
+            // Needed to override sticky hover in mobile
+            @include mobile {
+                &--block-hover {
+                    background: transparent !important;
+
+                    & > span {
+                        color: var(--brand-red-coral) !important;
+                    }
+                }
+
+                &--unblock-hover {
+                    background: transparent !important;
+                }
+            }
         }
     }
 

From 677f845640b07c0f8e7d990a40fc94fa3121b29a Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 19 Jan 2023 15:09:54 +0800
Subject: [PATCH 21/25] chore: changed Block users to My Counterparties

---
 .../p2p/src/components/advertiser-page/advertiser-page.jsx   | 5 +++--
 .../block-user/block-user-empty/block-user-empty.jsx         | 2 +-
 .../p2p/src/components/my-profile/block-user/block-user.jsx  | 2 +-
 .../p2p/src/components/my-profile/my-profile-content.jsx     | 2 +-
 .../my-profile/my-profile-header/my-profile-header.jsx       | 4 ++--
 .../my-profile/my-profile-stats/my-profile-stats.jsx         | 4 ++--
 packages/p2p/src/constants/my-profile-tabs.js                | 2 +-
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
index 4122db733c12..aed006b4cfcb 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -96,7 +96,8 @@ const AdvertiserPage = () => {
                 is_error_modal_open={is_error_modal_open}
                 setIsErrorModalOpen={is_open => {
                     if (!is_open) buy_sell_store.hideAdvertiserPage();
-                    if (general_store.active_index !== 0) my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS);
+                    if (general_store.active_index !== 0)
+                        my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
                     advertiser_page_store.onCancel();
                     general_store.setBlockUnblockUserError('');
                 }}
@@ -123,7 +124,7 @@ const AdvertiserPage = () => {
                     onClick={() => {
                         buy_sell_store.hideAdvertiserPage();
                         if (general_store.active_index === general_store.path.my_profile)
-                            my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS);
+                            my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES);
                     }}
                     page_title={localize("Advertiser's page")}
                 />
diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
index 23ebc43ce9e6..dbf7d15d71c1 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
+++ b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
@@ -28,7 +28,7 @@ const BlockUserEmpty = () => {
                     body_className='block-user-empty'
                     height_offset='80px'
                     is_modal_open
-                    page_header_text={localize('Block users')}
+                    page_header_text={localize('My Counterparties')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <Icon
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 2eeb7002ad3f..3022b3fea54d 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -42,7 +42,7 @@ const BlockUser = () => {
                     is_flex
                     is_modal_open
                     page_header_className='buy-sell__modal-header'
-                    page_header_text={localize('Block users')}
+                    page_header_text={localize('My Counterparties')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <BlockUserList />
diff --git a/packages/p2p/src/components/my-profile/my-profile-content.jsx b/packages/p2p/src/components/my-profile/my-profile-content.jsx
index 5e93dea9f31a..4392d69f55e1 100644
--- a/packages/p2p/src/components/my-profile/my-profile-content.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-content.jsx
@@ -52,7 +52,7 @@ const MyProfileContent = () => {
                 </MobileWrapper>
             </React.Fragment>
         );
-    } else if (my_profile_store.active_tab === my_profile_tabs.BLOCK_USERS) {
+    } else if (my_profile_store.active_tab === my_profile_tabs.MY_COUNTERPARTIES) {
         return <BlockUser />;
     }
     return <MyProfileStats />;
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
index c9e4a43b6616..0f98aa934f4e 100644
--- a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
@@ -23,8 +23,8 @@ const MyProfileHeader = () => {
             value: my_profile_tabs.AD_TEMPLATE,
         },
         {
-            text: localize('Block users'),
-            value: my_profile_tabs.BLOCK_USERS,
+            text: localize('My Counterparties'),
+            value: my_profile_tabs.MY_COUNTERPARTIES,
         },
     ];
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
index d1bbb3bca820..0fea3418241d 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
@@ -25,8 +25,8 @@ const MyStats = () => {
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.AD_TEMPLATE),
         },
         {
-            default_text: 'Block users',
-            onClick: () => my_profile_store.setActiveTab(my_profile_tabs.BLOCK_USERS),
+            default_text: 'My Counterparties',
+            onClick: () => my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES),
         },
     ];
 
diff --git a/packages/p2p/src/constants/my-profile-tabs.js b/packages/p2p/src/constants/my-profile-tabs.js
index c8e25de42663..2df37daa4a52 100644
--- a/packages/p2p/src/constants/my-profile-tabs.js
+++ b/packages/p2p/src/constants/my-profile-tabs.js
@@ -2,5 +2,5 @@ export const my_profile_tabs = Object.freeze({
     MY_STATS: 'my_stats',
     PAYMENT_METHODS: 'payment_methods',
     AD_TEMPLATE: 'ad_template',
-    BLOCK_USERS: 'block_users',
+    MY_COUNTERPARTIES: 'my_counterparties',
 });

From a0c97a6f05d72a3ad540661fd81ebe0f43b80b90 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 19 Jan 2023 16:03:50 +0800
Subject: [PATCH 22/25] chore: changed Counterparties to counterparties

---
 .../components/block-user/block-user-empty/block-user-empty.jsx | 2 +-
 .../p2p/src/components/my-profile/block-user/block-user.jsx     | 2 +-
 .../my-profile/my-profile-header/my-profile-header.jsx          | 2 +-
 .../components/my-profile/my-profile-stats/my-profile-stats.jsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
index dbf7d15d71c1..0b6629b98b21 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
+++ b/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
@@ -28,7 +28,7 @@ const BlockUserEmpty = () => {
                     body_className='block-user-empty'
                     height_offset='80px'
                     is_modal_open
-                    page_header_text={localize('My Counterparties')}
+                    page_header_text={localize('My counterparties')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <Icon
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
index 3022b3fea54d..62a04e6046ca 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user.jsx
@@ -42,7 +42,7 @@ const BlockUser = () => {
                     is_flex
                     is_modal_open
                     page_header_className='buy-sell__modal-header'
-                    page_header_text={localize('My Counterparties')}
+                    page_header_text={localize('My counterparties')}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
                 >
                     <BlockUserList />
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
index 0f98aa934f4e..d325cddaa315 100644
--- a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
@@ -23,7 +23,7 @@ const MyProfileHeader = () => {
             value: my_profile_tabs.AD_TEMPLATE,
         },
         {
-            text: localize('My Counterparties'),
+            text: localize('My counterparties'),
             value: my_profile_tabs.MY_COUNTERPARTIES,
         },
     ];
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
index 0fea3418241d..c2857cb88ea7 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
@@ -25,7 +25,7 @@ const MyStats = () => {
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.AD_TEMPLATE),
         },
         {
-            default_text: 'My Counterparties',
+            default_text: 'My counterparties',
             onClick: () => my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES),
         },
     ];

From 7e8f55340c2fb58afc9202b729211dc9279094e7 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 19 Jan 2023 16:19:24 +0800
Subject: [PATCH 23/25] chore: fix hovering issue on button

---
 .../block-user-table/block-user-row/block-user-row.scss   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index 54c12414c2a4..719c7a2397b3 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -22,7 +22,9 @@
             // Needed to override sticky hover in mobile
             @include mobile {
                 &--block-hover {
-                    background: transparent !important;
+                    &:hover {
+                        background: transparent !important;
+                    }
 
                     & > span {
                         color: var(--brand-red-coral) !important;
@@ -30,7 +32,9 @@
                 }
 
                 &--unblock-hover {
-                    background: transparent !important;
+                    &:hover {
+                        background: transparent !important;
+                    }
                 }
             }
         }

From e31f21cde5d367bb9345e2c3ae16dd37a580c821 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 19 Jan 2023 16:33:57 +0800
Subject: [PATCH 24/25] chore: removed hover effect in mobile for buttons

---
 .../block-user-row/block-user-row.jsx         | 11 ++-----
 .../block-user-row/block-user-row.scss        | 29 ++++++++++---------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index 755a57121cd5..f907e5160364 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import classNames from 'classnames';
-import { isMobile } from '@deriv/shared';
 import { Button, Table, Text } from '@deriv/components';
 import { localize } from 'Components/i18next';
 import UserAvatar from 'Components/user/user-avatar';
@@ -40,10 +39,7 @@ const BlockUserRow = ({ row: advertiser }) => {
             <Table.Cell className='block-user-row__button-group'>
                 {is_blocked ? (
                     <Button
-                        className={classNames('block-user-row__button-group__button', {
-                            'block-user-row__button-group__button--unblock-hover':
-                                isMobile() && general_store.is_block_user_modal_open,
-                        })}
+                        className='block-user-row__button-group__unblock-button'
                         secondary
                         medium
                         onClick={() => my_profile_store.onClickUnblock(advertiser)}
@@ -52,10 +48,7 @@ const BlockUserRow = ({ row: advertiser }) => {
                     </Button>
                 ) : (
                     <Button
-                        className={classNames('block-user-row__button-group__button', {
-                            'block-user-row__button-group__button--block-hover':
-                                isMobile() && general_store.is_block_user_modal_open,
-                        })}
+                        className='block-user-row__button-group__block-button'
                         alternate
                         medium
                         onClick={() => my_profile_store.onClickUnblock(advertiser)}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
index 719c7a2397b3..e45e609aa321 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
+++ b/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
@@ -16,25 +16,28 @@
         justify-content: flex-end;
         align-items: center;
 
-        &__button {
+        & button {
             min-width: 9rem;
+        }
+
+        &__unblock-button {
+            // Needed to override sticky hover in mobile
+            @include mobile {
+                &:hover {
+                    background: transparent !important;
+                }
+            }
+        }
 
+        &__block-button {
             // Needed to override sticky hover in mobile
             @include mobile {
-                &--block-hover {
-                    &:hover {
-                        background: transparent !important;
-                    }
-
-                    & > span {
-                        color: var(--brand-red-coral) !important;
-                    }
+                &:hover {
+                    background: transparent !important;
                 }
 
-                &--unblock-hover {
-                    &:hover {
-                        background: transparent !important;
-                    }
+                & > span {
+                    color: var(--brand-red-coral) !important;
                 }
             }
         }

From cff63a40d8e0895f6d3af56f8f48482f4119b571 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 26 Jan 2023 17:08:42 +0800
Subject: [PATCH 25/25] chore: fixed block issue on sell order

---
 packages/p2p/src/stores/advertiser-page-store.js | 13 ++++++++++++-
 packages/p2p/src/stores/general-store.js         | 12 ++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js
index e1b51fd0d63b..d0494e15b80b 100644
--- a/packages/p2p/src/stores/advertiser-page-store.js
+++ b/packages/p2p/src/stores/advertiser-page-store.js
@@ -127,12 +127,23 @@ export default class AdvertiserPageStore extends BaseStore {
     }
 
     setAdvertiserInfo(response) {
+        const { general_store } = this.root_store;
+
         if (response.error) {
             this.setErrorMessage(response.error);
         } else {
             const { p2p_advertiser_info } = response;
             this.setCounterpartyAdvertiserInfo(p2p_advertiser_info);
-            this.setIsCounterpartyAdvertiserBlocked(!!p2p_advertiser_info.is_blocked);
+
+            // TODO: uncomment this when BE has fixed is_blocked flag issue for block user overlay
+            // this.setIsCounterpartyAdvertiserBlocked(!!p2p_advertiser_info.is_blocked);
+
+            // TODO: remove this when above issue is fixed
+            this.setIsCounterpartyAdvertiserBlocked(
+                general_store.advertiser_relations_response.some(
+                    advertiser => p2p_advertiser_info.id === advertiser.id
+                ) || !!p2p_advertiser_info.is_blocked
+            );
         }
 
         this.setIsLoading(false);
diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js
index 8bbc27edc31f..f07832388f9a 100644
--- a/packages/p2p/src/stores/general-store.js
+++ b/packages/p2p/src/stores/general-store.js
@@ -17,6 +17,7 @@ export default class GeneralStore extends BaseStore {
     advertiser_id = null;
     advertiser_info = {};
     advertiser_sell_limit = null;
+    advertiser_relations_response = []; //TODO: Remove this when backend has fixed is_blocked flag issue
     block_unblock_user_error = '';
     balance;
     cancels_remaining = null;
@@ -69,6 +70,7 @@ export default class GeneralStore extends BaseStore {
             advertiser_id: observable,
             advertiser_buy_limit: observable,
             advertiser_sell_limit: observable,
+            advertiser_relations_response: observable, //TODO: Remove this when backend has fixed is_blocked flag issue
             block_unblock_user_error: observable,
             balance: observable,
             feature_level: observable,
@@ -124,6 +126,7 @@ export default class GeneralStore extends BaseStore {
             setAdvertiserBuyLimit: action.bound,
             setAdvertiserSellLimit: action.bound,
             setAppProps: action.bound,
+            setAdvertiserRelationsResponse: action.bound, //TODO: Remove this when backend has fixed is_blocked flag issue
             setFeatureLevel: action.bound,
             setInactiveNotificationCount: action.bound,
             setIsAdvertiser: action.bound,
@@ -202,6 +205,10 @@ export default class GeneralStore extends BaseStore {
                     this.setIsBlockUserModalOpen(false);
                     if (should_set_is_counterparty_blocked) {
                         const { p2p_advertiser_relations } = response;
+
+                        //TODO: Remove this when backend has fixed is_blocked flag issue
+                        this.setAdvertiserRelationsResponse(p2p_advertiser_relations.blocked_advertisers);
+
                         advertiser_page_store.setIsCounterpartyAdvertiserBlocked(
                             p2p_advertiser_relations.blocked_advertisers.some(ad => ad.id === advertiser_id)
                         );
@@ -585,6 +592,11 @@ export default class GeneralStore extends BaseStore {
         this.props = props;
     }
 
+    //TODO: Remove this when backend has fixed is_blocked flag issue
+    setAdvertiserRelationsResponse(advertiser_relations_response) {
+        this.advertiser_relations_response = advertiser_relations_response;
+    }
+
     setBlockUnblockUserError(block_unblock_user_error) {
         this.block_unblock_user_error = block_unblock_user_error;
     }